上一節(jié)我們實現(xiàn)了在網(wǎng)頁上顯示我們數(shù)據(jù)庫內(nèi)的博客，但是界面十分丑陋，而且只是單一頁面，這節(jié)我們要把界面美化一下，并且使用模板繼承，為實現(xiàn)主界面與詳情界面的切換做準備。
界面美化
界面美化主要使用CSS，這是一種用來描述某種標記語言寫的web站點的樣式語言。這部分主要是引用網(wǎng)上的CSS和JS文件鏈接或本地靜態(tài)文件，引用本地靜態(tài)文件時注意靜態(tài)文件位置配置以及在引用的時候加載就可以了。古城車票說的很詳細，我想了一下沒有什么需要補充的，這里貼上她的鏈接：Django1.9開發(fā)博客（5）- 頁面美化
下面是我的這部分源碼，改動不大，基本和她的差不多。
mysite\mysite\settings.py添加靜態(tài)文件目錄：
STATICFILES_DIRS = (
os.path.join(BASE_DIR, "static"),
)
前面講過模板目錄了，靜態(tài)目錄應(yīng)該就很好理解了，就是在mysite\static里面。
在mysite\static\css\myblog.css里面寫：
.page-header {
background-color: #1f71e0;
margin-top: 0;
padding: 20px 20px 20px 40px;
}
.page-header h1, .page-header h1 a, .page-header h1 a:visited, .page-header h1 a:active {
color: #ffffff;
font-size: 30pt;
text-decoration: none;
}
.content {
margin-left: 40px;
}
h1, h2, h3, h4 {
font-family: 'Lobster', cursive;
}
.date {
float: right;
color: #828282;
}
.save {
float: right;
}
.post-form textarea, .post-form input {
width: 100%;
}
.top-menu, .top-menu:hover, .top-menu:visited {
color: #ffffff;
float: right;
font-size: 26pt;
margin-right: 20px;
}
.post {
margin-bottom: 70px;
}
.post h1 a, .post h1 a:visited {
color: #000000;
}
然后在mysite\templates\blog\post_list.html里，第一行引入靜態(tài)文件路徑{% load staticfiles %}，在<head>...</head>里加入CSS網(wǎng)鏈或本地靜態(tài)鏈接，<body>...</body>里排一下頁面布局。最后大概變成下面這樣：
{% load staticfiles %}
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<link rel="stylesheet" >
<link rel="stylesheet" href="{% static 'css/blog.css' %}">
<title>Django Simple Blog</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="This is a simple django blog!">
<title>Simple Django Blog</title>
</head>
<body>
<div class="page-header">
<div class="row">
<h1><a href="/">Django Simple Blog</a></h1>
</div>
</div>
<div class="content">
<div class="row">
<div class="col-md-8">
{% for post in posts %}
<div>
<h1><a href="">{{ post.title }}</a></h1>
<p>published: {{ post.published_date }}</p>
<p>{{ post.text|linebreaks }}</p>
</div>
{% endfor %}
</div>
</div>
</div>
</body>
</html>
col-md-8，viewport和description是什么意思呢？Google解決。還有兩個CSS鏈接的先后順序有什么講究呢？自己換一下試試吧！
現(xiàn)在頁面應(yīng)該是這樣：
嗯，果然漂亮許多~
網(wǎng)頁favicon.ico
順便教一下怎么給網(wǎng)頁設(shè)置一個icon吧！
上一節(jié)最后說過，在未設(shè)置圖標的情況下，網(wǎng)頁的圖標應(yīng)該是一個空白文件的樣子。默認情況下，瀏覽器訪問一個網(wǎng)站的時候，同時還會向服務(wù)器請求“/favicon.ico”這個URL，目的是獲取網(wǎng)站的圖標。未設(shè)置情況下，Django會返回404錯誤，只是這個錯誤不會打印出來，并且瀏覽器接收到這個404錯誤后，也無傷大雅，因為沒有圖標就用默認的圖標，也就是那個空白文件圖標，所以這個錯誤也沒有跟通常的404錯誤一樣在網(wǎng)頁上顯示出來。
最多三步就可解決：
1、制作ico文件?？梢杂肞S或者某些在線生成ico的網(wǎng)站，注意命名為favicon.ico，然后放在mysite\static\img內(nèi)。這里推薦一個網(wǎng)站，既可以在線生成ico，自己也有很多好看的ico供選擇：http://www.easyicon.net/
我就在里面直接下載一張了：
2、在html模板head里面添加
<link rel="shortcut icon" href="{% static 'img/favicon.ico' %}">。
刷新，完畢！
網(wǎng)上查閱發(fā)現(xiàn)其實還應(yīng)該設(shè)置url：
url(r'^favicon\.ico$', 'django.views.generic.simple.redirect_to', {'url': '/static/images/favicon.ico'}),
但是一來這個simple.redirect_to無效，估計這個方法早已經(jīng)更新了，二來到此就已經(jīng)實現(xiàn)了，所以沒有再繼續(xù)探究。
模板繼承
我們平常訪問博客的時候肯定不止一個頁面，而且這些頁面通常具有相同或相似的布局和頁面元素，比如標題、導(dǎo)航欄等等。如果每個頁面都重復(fù)寫這些東西的話，一來繁瑣，二來如果我們改動版面的話就得把每個頁面的都改一遍，不便于維護。因此我們使用模板繼承的方法，把各頁面共同的部分提取出來做成一個模板，其他模板繼承這個模板，再加上自己獨有的部分，就能搭配出許多格式統(tǒng)一內(nèi)容各異的頁面。
在mysite\templates\blog下新建base.html，它與post_list.html在同一目錄下。復(fù)制post_list.html的內(nèi)容到base.html中，在base.html把{% for post in posts %}...{% endfor %}替換成
{% block content %}
{% endblock %}
也就是創(chuàng)建了一個名為content的block，別的模板就可以繼承base.html，然后填充content產(chǎn)生自己特有的部分，而其他部分都保持一致。
把post_list.html改為：
{% extends 'blog/base.html' %}
{% block content %}
{% for post in posts %}
<div class="post">
<h1><a href="">{{ post.title }}</a></h1>
<p>published: {{ post.published_date }}</p>
<p>{{ post.text|linebreaks }}</p>
</div>
{% endfor %}
{% endblock content %}
第一行就是繼承了base.html，之后填充content，其實就是把原來被替換掉的for循環(huán)移到了這里。
保存，刷新頁面，發(fā)現(xiàn)頁面和原來一樣，說明模板繼承生效了。以后我們再寫新的頁面的時候只寫content部分就行了，而對整體的修改，比如引入的CSS框架，就在base.html修改。
下一節(jié)，我們就繼承base.html模板寫其他詳情頁面。
2016.10.22
