上一節(jié)我們實(shí)現(xiàn)了在網(wǎng)頁上顯示我們數(shù)據(jù)庫內(nèi)的博客，但是界面十分丑陋下隧，而且只是單一頁面奢人，這節(jié)我們要把界面美化一下，并且使用模板繼承淆院，為實(shí)現(xiàn)主界面與詳情界面的切換做準(zhǔn)備何乎。
界面美化
界面美化主要使用CSS，這是一種用來描述某種標(biāo)記語言寫的web站點(diǎn)的樣式語言。這部分主要是引用網(wǎng)上的CSS和JS文件鏈接或本地靜態(tài)文件宪赶，引用本地靜態(tài)文件時注意靜態(tài)文件位置配置以及在引用的時候加載就可以了宗弯。古城車票說的很詳細(xì)，我想了一下沒有什么需要補(bǔ)充的搂妻，這里貼上她的鏈接：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è)置圖標(biāo)的情況下赫冬，網(wǎng)頁的圖標(biāo)應(yīng)該是一個空白文件的樣子。默認(rèn)情況下溃列，瀏覽器訪問一個網(wǎng)站的時候劲厌，同時還會向服務(wù)器請求“/favicon.ico”這個URL，目的是獲取網(wǎng)站的圖標(biāo)听隐。未設(shè)置情況下补鼻，Django會返回404錯誤，只是這個錯誤不會打印出來遵绰，并且瀏覽器接收到這個404錯誤后辽幌，也無傷大雅，因?yàn)闆]有圖標(biāo)就用默認(rèn)的圖標(biāo)椿访，也就是那個空白文件圖標(biāo)乌企，所以這個錯誤也沒有跟通常的404錯誤一樣在網(wǎng)頁上顯示出來。
最多三步就可解決：
1成玫、制作ico文件加酵∪鳎可以用PS或者某些在線生成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)其實(shí)還應(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)實(shí)現(xiàn)了惜索，所以沒有再繼續(xù)探究。
模板繼承
我們平常訪問博客的時候肯定不止一個頁面剃浇，而且這些頁面通常具有相同或相似的布局和頁面元素巾兆，比如標(biāo)題、導(dǎo)航欄等等虎囚。如果每個頁面都重復(fù)寫這些東西的話角塑，一來繁瑣，二來如果我們改動版面的話就得把每個頁面的都改一遍溜宽，不便于維護(hù)吉拳。因此我們使用模板繼承的方法质帅，把各頁面共同的部分提取出來做成一個模板适揉，其他模板繼承這個模板，再加上自己獨(dú)有的部分煤惩，就能搭配出許多格式統(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彩匕，其實(shí)就是把原來被替換掉的for循環(huán)移到了這里。
保存媒区，刷新頁面驼仪，發(fā)現(xiàn)頁面和原來一樣掸犬，說明模板繼承生效了。以后我們再寫新的頁面的時候只寫content部分就行了绪爸，而對整體的修改湾碎，比如引入的CSS框架，就在base.html修改奠货。
下一節(jié)介褥，我們就繼承base.html模板寫其他詳情頁面。
2016.10.22
