Home > Others

Django Development Blog-page beautification

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

CSS is a style language used to describe a Web site written in a markup language. Here we do not want to start a discussion, about CSS I recommend a very good resource here: Codeacademy HTML & CSS Course

Do not want to start from scratch, because we have a ready-made CSS framework, there is no need to repeat the wheel.

Using bootstrap

Currently the most popular CSS framework non-bootstrap, website address: http://getbootstrap.com/

Just add the following lines to the beginning of your HTML template page.

1
2
3
 
<rel=href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" >
<rel=href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css" >
<src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" ></  Script>

You do not need to introduce any files in the project, because this directly refers to the bootstrap public CSS and JS files.

Open the template file again with the following effect:

Does it feel beautiful? ^_^

Django Static file

Here I will also explain the static files in Django. Static files are CSS, JS, pictures, videos, and so on that the content will not change the file, no matter at any time, for any user is the same.

CSS is a kind of static file, in order to customize the CSS, we must first in the Django configuration, you only need to configure once. So let's get started right now!

Configuring Static files in Django

First we need to create a directory to store the static files and create a static folder in the manage.py sibling directory.

MySite
├───static
└───manage.py

Open the configuration file mysite/settings.py and add the following configuration on the last side:

1
2
3
 
Staticfiles_dirs = (
    "Static"),
)

It tells Django where to look for static files.

First CSS File

Now that we've started creating our own CSS file, we'll start by creating a new CSS directory in the static directory, and then create a blog.css file inside. The directory structure is as follows

Static
└───css
     └───blog.css

After opening the file Static/css/blog.css, add the following:

1
2
3
 
A
    #FCA205;
}

H1 A is a CSS selector, which means that the text color of link a under the H1 tag will be #fca205, which is actually orange, and the color is in hexadecimal notation.

Next we want to let the template load the static CSS file, open blog/templates/blog/post_list.html, at the beginning of the section to join:

{% load staticfiles%}

Then add the following sentence after the bootstrap reference

<link rel= "stylesheet" href= "{% static ' css/blog.css '%}" >

Finally, the entire template file looks like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21st
22
23
 
{% load staticfiles%}
<Html>
    <Head>
 <Title>django Girls Blog</Title>
 <LinkRel="Stylesheet"href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" >
 <LinkRel="Stylesheet"href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css" >
 <ScriptSrc="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" ></Script>
 <LinkRel="Stylesheet"href="{% static ' css/blog.css '%}" >
 </Head>
 <Body>
 <Div>
 <H1><Ahref="/" >django Girls Blog</A></H1>
 </Div>

{% for post in posts%}
 <Div>
 <p>published: {{post.published_date}}</P> 
 Span class= "line" > <h1><a Span class= "attr" >href= ">{{post.title}}</a> </H1> 
  < p>{{post.text|linebreaks}}</P> 
 </DIV> 
  {% ENDFOR%} 
 </BODY> 
 </< Span class= "name" >HTML>

OK, save and refresh to see the effect

I want the margin on the left side of the text to be a little bigger, so it looks better. Then add the following in the BLOG.CSS:

1
2
3
 
Body {
    15px;
}

Refresh the page after the effect:

I also want to customize the font of the text title, add the following sentence in the post_list.html template

1
 
<href=rel=type="Text/css" >

This will introduce Google's font lobster, and then modify the style of H1 A in blog.css as follows:

1
2
3
4
 
A
    #FCA205;
' Lobster ';
}

The effect after the refresh:

The class in CSS

There is a class concept in CSS that allows you to change the style of only one part of the HTML without affecting other parts.

Here we will distinguish between the title header and the style of the article itself.

In post_list.html, add the following title segment:

1
2
3
 
<class="Page-header" >
<h1><href="/" >django Girls Blog</a></h1>
</div>

The article List section is modified as follows:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<Divclass="Content" >
 <Divclass="Row" >
 <Divclass="Col-md-8" >
{% for post in posts%}
 <Divclass="POST" >
 <H1><Ahref=</a ></H1> 
  < p>published: {{post.published_date}}</P> 
 Span class= "line" > <p>{{post.text|linebreaks}}</ P> 
  </DIV> 
   </DIV> 
 </DIV> 
 </< Span class= "name" >DIV>

The BLOG.CSS style is modified as follows:

1
2
3
4
5
6
7
8 
 9 
 10 
 11 
 12 
 13 
 14 
 15 
 16 
 17 
 18 
 19 
 20 
 21 
 22 
 23 
 24 
 25 
 26 
 27 
 28 
 29 
 30 
 31 
 32 
 33 
 34 
 35 
 36 
 37 
 38 
       
. page-header {
    Background-color:#ff9400;
 Margin-top:0;
 Padding20px20px20px40px;
}
. page-headerH1,. page-headerH1A. page-headerH1A: Visited,. page-headerH1A: Active {
 Color#ffffff;
 Font-size:36pt;
 Text-decoration:none;
}
. Content {
 Margin-left:40px;
}
H1,H2,H3,h4 {
 Font-family:' Lobster ', cursive;
}
. Date {
 Float:right;
 Color#828282;
}
. Save {
 Float:right;
}
. post-formTextArea. post-formInput {
 Width100%;
}
. Top-menu,. top-menu: Hover,. top-menu: visited {
 Color#ffffff;
 float:right; 
  font-size: 26PT; 
  margin-right: 20px; 
  .post {
  margin-bottom: 70px; 
  .post h1 Span class= "Selector-tag" >a, .post h1 a:visited {
  color:  #000000; 
  
              /span>

After saving these files, refresh the page and see if it's cool:

has been more beautiful. The above CSS should not look so difficult, you can try to modify it, no matter, anyway, can be undone.

Django Development Blog-page beautification

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
django production and development settings django blog template flask or django for web development django page cms dynamic web page development web page development using html wordpress blog page design

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More