在做界面之前我们先给我们文章的显示加上了markdown，至于声明时markdown可以自行百度，至于怎么加上markdown我们在这就不做讨论了，博主就直接贴出教程地址吧~

django1.8下的markdown，highlight, pagedown解决

好啦 现在就开始给我们的博客主页改头换面

首先，我们在我们myblog/article/templates/目录下新建一个base.html文件，这个html文件会放置我们整个博客系统最基本的网站前端骨架不笨，比如布局和导航～

<!doctype html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>My First Blog</title></head><body></body></html>

我假装你们已经看了上面的markdown配置教程

首先我们得从新构建我们的模板文件，先修改我们的base.html，引入高亮js和css，加上title block和container blok，更利于以后的扩展

{% load staticfiles %}<!doctype html><html lang="en"><head>
    <meta charset="UTF-8">
    <script src="{% static 'highlight/highlight.pack.js' %}"></script>
    <link rel="stylesheet" type="text/css" href="{% static 'highlight/styles/monokai-sublime.css' %}">
    <title>{% block title %}{% endblock %}</title></head><script>hljs.initHighlightingOnLoad();</script><body>{% block container %}
{% endblock %}</body></html>

对于我们博客本身的功能先不做扩展。index.html我们依然只是显示所有文章的一个列表,代码如下：

{% extends "base.html" %}
{% load custom_markdown %}
{% block container %}    <div>
        {% for article in article_list %}            <h1><a href="#">{{ article.title }}</a></h1>
            <p>
            Time: {{ article.create_time }}            </p>
            <p>
            {{ article.content|custom_markdown }}            </p>
        {% endfor %}    </div>{% endblock %}

关于block的只是请看我们的官方中文文档，当然你想看英文的也可以，我们给出中文文档的链接

模板概述

现在我们主要编辑的还是我们的base.html,因为我们要先做好整体的网站布局和导航～

为了方便，我们前端会用到bootstrap，一般我们会把bootstrap下载到本地，为了方便我们就直接以链接的方式引入～

<head>
    <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script></head>

我个人更喜欢导航条的方式，各位可以根据自己 的喜欢自己引用css～

bootstrap中文文档

以下内容建议大家先学一下bootstrap，不然估计看不懂

bootstrap视频教程

虽然有点啰嗦，不过我还是一句一句的把每个代码进行说明，其实博主写博客的时候也是边学边写，学会了就用，会用了就写成博客～

<body><!-- bootstrap建议用nav --大家学习的时候最好不要直接贴代码，因为从外到内一个class的测试看时什么效果 --><nav class="navbar navbar-default">

    <div class="container-fluid">
        <div class="navbar-header"><!-- sr-only 是为了适应移动终端，因为bootstrap的思想是移动端优先， date-toggle是为了让这个按钮与collapse关联，date-target指出关联哪个id  -->
            <button type="button" class="navbar-toggle" date-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>       <!--这个自己测试就知道时干嘛用的  -->
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Blog</a>
        </div>
    </div>
    ...</nav>

好啦贴出按着我自己的喜好的导航条

<body style="padding-top: 40px;"><nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" date-toggle="collapse"
                    data-target="#navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Blog</a>
        </div>
        <div class="collapse navbar-collapse pull-right" id="navbar-collapse-1" >
            <ul class="nav navbar-nav">
                <li><a href="/"><span class="glyphicon glyphicon-home" aria-hidden="true"></span>主页</a></li>
                <li><a href="#"><span class="glyphicon glyphicon-heart-empty" aria-hidden="true"></span>   关于我</a></li>
            </ul>
        </div>
    </div></nav>

我们也得把文章条目的显示也美化下～这里我们用到了折叠插件。我们现在实现的是一个叫做手风琴的效果，打开index.html

<div class="panel-group" id="accordion">
    {% for article in article_list %}        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a href="#collapse{{ article.id }}" data-toggle="collapse" data-parent="#accordion">{{ article.title }}</a>
                </h4>
            </div>
            <div id="collapse{{ article.id }}" class="peal-collapse collapse">
                <div class="peal-body">
                    {{ article.content|custom_markdown }}                </div>
            </div>
        </div>
    {% endfor %}</div>

目前就先这样吧～以后随着博客系统的完善，再慢慢改变界面～