django1.10开发博客（5）——界面美化和模板继承

上一节我们实现了在网页上显示我们数据库内的博客，但是界面十分丑陋，而且只是单一页面，这节我们要把界面美化一下，并且使用模板继承，为实现主界面与详情界面的切换做准备。

界面美化

---

界面美化主要使用CSS，这是一种用来描述某种标记语言写的web站点的样式语言。这部分主要是引用网上的CSS和JS文件链接或本地静态文件，引用本地静态文件时注意静态文件位置配置以及在引用的时候加载就可以了。古城车票说的很详细，我想了一下没有什么需要补充的，这里贴上她的链接：Django1.9开发博客（5）- 页面美化

下面是我的这部分源码，改动不大，基本和她的差不多。
mysite\mysite\settings.py添加静态文件目录：

STATICFILES_DIRS = (
    os.path.join(BASE_DIR, "static"),
)

前面讲过模板目录了，静态目录应该就很好理解了，就是在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里，第一行引入静态文件路径{% load staticfiles %}，在...里加入CSS网链或本地静态链接，...里排一下页面布局。最后大概变成下面这样：

{% load staticfiles %}


    
    
    
    
    
    
    


    

        

            
Django Simple Blog
        
    
    

        

            

                {% for post in posts %}
                

                    
{{ post.title }}
                    
published: {{ post.published_date }}
                    
{{ post.text|linebreaks }}
                
                {% endfor %}
            
        
    

col-md-8，viewport和description是什么意思呢？Google解决。还有两个CSS链接的先后顺序有什么讲究呢？自己换一下试试吧！

现在页面应该是这样：

13.jpg

嗯，果然漂亮许多~

网页favicon.ico

顺便教一下怎么给网页设置一个icon吧！
上一节最后说过，在未设置图标的情况下，网页的图标应该是一个空白文件的样子。默认情况下，浏览器访问一个网站的时候，同时还会向服务器请求“/favicon.ico”这个URL，目的是获取网站的图标。未设置情况下，Django会返回404错误，只是这个错误不会打印出来，并且浏览器接收到这个404错误后，也无伤大雅，因为没有图标就用默认的图标，也就是那个空白文件图标，所以这个错误也没有跟通常的404错误一样在网页上显示出来。

最多三步就可解决：
1、制作ico文件。可以用PS或者某些在线生成ico的网站，注意命名为favicon.ico，然后放在mysite\static\img内。这里推荐一个网站，既可以在线生成ico，自己也有很多好看的ico供选择：http://www.easyicon.net/
我就在里面直接下载一张了：

ico

2、在html模板head里面添加 。

刷新，完毕！

14.jpg

网上查阅发现其实还应该设置url：

url(r'^favicon\.ico$', 'django.views.generic.simple.redirect_to', {'url': '/static/images/favicon.ico'}),

但是一来这个simple.redirect_to无效，估计这个方法早已经更新了，二来到此就已经实现了，所以没有再继续探究。

模板继承

---

我们平常访问博客的时候肯定不止一个页面，而且这些页面通常具有相同或相似的布局和页面元素，比如标题、导航栏等等。如果每个页面都重复写这些东西的话，一来繁琐，二来如果我们改动版面的话就得把每个页面的都改一遍，不便于维护。因此我们使用模板继承的方法，把各页面共同的部分提取出来做成一个模板，其他模板继承这个模板，再加上自己独有的部分，就能搭配出许多格式统一内容各异的页面。

在mysite\templates\blog下新建base.html，它与post_list.html在同一目录下。复制post_list.html的内容到base.html中，在base.html把{% for post in posts %}...{% endfor %}替换成

{% block content %}
{% endblock %}

也就是创建了一个名为content的block，别的模板就可以继承base.html，然后填充content产生自己特有的部分，而其他部分都保持一致。

把post_list.html改为：

{% extends 'blog/base.html' %}
{% block content %}
    {% for post in posts %}
        

            
{{ post.title }}
            
published: {{ post.published_date }}
            
{{ post.text|linebreaks }}
        
    {% endfor %}
{% endblock content %}

第一行就是继承了base.html，之后填充content，其实就是把原来被替换掉的for循环移到了这里。

保存，刷新页面，发现页面和原来一样，说明模板继承生效了。以后我们再写新的页面的时候只写content部分就行了，而对整体的修改，比如引入的CSS框架，就在base.html修改。

下一节，我们就继承base.html模板写其他详情页面。

2016.10.22