本文介绍了一个基于Django的博客系统优化过程，包括页面布局改进、Markdown语法支持及代码高亮展示等内容。
完善Home页面
Home页面优化
打开index.html 文件，修改代码：
{% for post in posts %}
<h2>
<a href="#">{{ post.title }}</a>
</h2>
<p class="lead">
by <a href="index.php">{{ post.author }}</a>
</p>
<p><span class="glyphicon glyphicon-time"></span> Posted on {{ post.created|date:"Y /m /d" }}</p>
<p>{{ post.content|truncatechars:100 }}</p>
<a class="btn btn-primary" href="#">Read More <span class="glyphicon glyphicon-chevron-right"></span></a>
<hr>
{% endfor %}{{ post.content|truncatechars:100 }} 语句中| 是python中的管道用法，truncatechars:100 表示页面内容显示100个字符；{{ post.created|date:"Y /m /d" }} 中date:"Y /m /d" 表示时间的显示方式。优化后的页面：
博客页面链接
我们的博客主页面显示已基本完成，下面如何从主页面跳转到文章的完整页面？我们只需将完整页面的链接添加进博客标题和ReadMore的a标签中：
<!-- First Blog Post -->
{% for post in posts %}
<h2>
<a href="/detail/{{ post.id }}/">{{ post.title }}</a>
</h2>由于detail 视图函数需要传入一个参数，因此，将该页面的post.id 传给detail 的参数id。
打开浏览器试着运行，当点击标题或者ReadMore时，页面跳转到特定的detail.html 页面。
但是这样的硬编码，不利于我们将来的维护，如果页面名字修改了，就要修改很多地方，因此，我们使用django的命名空间，将a标签内容调整：
{% for post in posts %}
<h2>
<a href="{% url 'detail' id=post.id %}">{{ post.title }}</a>
</h2>我们在blogpost/urls.py 模块中定义了url的name参数，这里利用{% url %} 模板标签直接定位到name参数的URLconf。这就简化了我们的维护，当要修改页面名称时，只需要修改代码中一处即可。
文章完整页面
页面显示
我们的主页面已基本完善，接下来编写文章页面。先将完整页面的导入（原文件名也叫index，我已将其改名为detail）：
打开detail.html 文件，与主页面一样，先将静态文件导入。将文件中的硬编码内容删除，添加如下语句：
<!-- Blog Post -->
<!-- Title -->
<h1>{{ post.title }}</h1>
<!-- Author -->
<p class="lead">
by <a href="#">{{ post.author }}</a>
</p>
<hr>
<!-- Date/Time -->
<p><span class="glyphicon glyphicon-time"></span> Posted on {{ post.created|date:"Y /m /d" }}</p>
<hr>
<!-- Preview Image -->
<img class="img-responsive" src="http://placehold.it/900x300" alt="">
<hr>
<!-- Post Content -->
<p>{{ post.content }}</p>再从主页文章列表点击跳转到文章页面，如下：
模板继承
在做完主页和详细页面后，我们发现这两个页面有很多重复的地方，我们可以利用django的模板继承来缩减大量重复代码。仔细观察index.html 和detail.html 页面，它们只有在<div class="row"> 块下的<div class="col-md-8"> <div class="col-lg-8"> 不同：
现在在templates/ 目录新建一个base.html 文件，将主页面内容拷贝进去，然后进行如下修改：
将<div class="col-md-4"> 上方的代码全部删除，添加{% block content %} 和 {% endblock %} 语句，表示该部分可以自行修改。再将index.html 和 detail.html 文件的多余部分删除，只留下<div class="col-md-8"> 和<div class="col-lg-8"> 如下：
detail.html:
index.html:
markdown
安装markdown
pip安装：
(env)$:pip install markdowngithub安装：
(env)$:git clone git://github.com/waylan/Python-Markdown.git python-markdown
(env)$:cd python-markdown
(env)$:python setup.py install操作markdown
在work 根目录新建一个文件text，将以下内容写入并保存：
<!DOCTYPE html>
<html>
<head>
<title>blog</title>
</head>
<body>
# Markdown 语法测试
---
### 1. 斜体和粗体
使用 * 和 ** 表示斜体和粗体。
示例：
这是 *斜体*，这是 **粗体**。
### 2. 分级标题
使用 === 表示一级标题，使用 --- 表示二级标题。
示例：
这是一个一级标题
============================
这是一个二级标题
--------------------------------------------------
### 这是一个三级标题
你也可以选择在行首加井号表示不同级别的标题 (H1-H6)，例如：# H1, ## H2, ### H3，#### H4。
### 3. 无序列表
使用 *，+，- 表示无序列表。
示例：
- 无序列表项 一
- 无序列表项 二
- 无序列表项 三
### 4. 有序列表
使用数字和点表示有序列表。
示例：
1. 有序列表项 一
2. 有序列表项 二
3. 有序列表项 三
### 5. 文字引用
使用 > 表示文字引用。
示例：
</body>
</html>
当前目录文件：
(env) $: ls
blog env text进入python命令行：
(env) $: python
Python 3.5.2 (v3.5.2:4def2a2901a5, Jun 26 2016, 10:47:25)
[GCC 4.2.1 (Apple Inc. build 5666) (dot 3)] on darwin
Type "help", "copyright", "credits" or "license" for more information.
>>> import markdown
>>> input_file = open("text", mode="r", encoding='utf-8')
>>> text = input_file.read()
>>> html = markdown.markdown(text, ['markdown.extensions.extra'])
>>> html
'<!DOCTYPE html>\n<html>\n <head>\n <title>blog</title>\n </head>\n <body>\n # Markdown 语法测试\n\n<hr />\n<h3>1. 斜体和粗体</h3>\n<p>使用 * 和 ** 表示斜体和粗体。</p>\nm>斜体</em>，这是 <strong>粗体</strong>。</p>\n<h3>2. 分级标题</h3>\n<p>使用 === 表示一级标题，使用 --- 表示二级标题。</p>\n<p>示例：</p>\n<pre><code>这是一个一级标题\n=========================--------------------------\n\n### 这是一个三级标题\n</code></pre>\n\n<p>你也可以选择在行首加井号表示不同级别的标题 (H1-H6)，例如：# H1, ## H2, ### H3，#### H4。</p>\n<h3>3. 无序列表</h3>\n<p>使li>无序列表项 一</li>\n<li>无序列表项 二</li>\n<li>无序列表项 三</li>\n</ul>\n<h3>4. 有序列表</h3>\n<p>使用数字和点表示有序列表。</p>\n<p>示例：</p>\n<ol>\n<li>有序列表项 一</li>\n<li>有序列表项li>有序列表项 三</li>\n</ol>\n<h3>5. 文字引用</h3>\n<p>使用 > 表示文字引用。</p>\n<p>示例：\n </body>\n</html></p>'markdown.markdown(text, ['markdown.extensions.extra']) 语句的意思就是调用markdown() 函数将text文件渲染成markdown模式。参数一是被渲染的文件，参数二是markdown的扩展语法，extensions.extra 只是其中之一，其它还有：markdown.extensions.toc(目录）
markdown.extensions.admonition（警告）
markdown.extensions.codehilite（代码高亮） 等。
为博客添加markdown语法
打开blogpost/views.py 模块，在detail() 函数中添加如下语句：
import markdown
def detail(request, id):
post = get_object_or_404(Blog, pk=id)
post.content = markdown.markdown(post.content, extensions=['markdown.extensions.extra',
'markdown.extensions.codehilite',
'markdown.extensions.toc'])
return render(request, 'blogpost/detail.html', {'post': post})接下来我们在detail.html 文件的<p>{{ post.content }}</p> 处添加管道safe，语句变为<p>{{ post.content|safe }}</p>。之后进入django后台，我们添加一篇带markdown语法的文章。之后在浏览器中打开该页面：
语法高亮
前面我们在markdown里已经扩展了代码高亮语句markdown.extensions.codehilite，这个插件还需要安装Pygments 模块才能实现：
安装pygments：
(env) $： pip install pygments创建一个代码高亮的CSS样式（其中-S后面是风格样式，默认样式default是emacs，生成的文件名为styles.css）：
(env) $: pygmentize -S default -f html -a .codehilite > styles.css查看pygments的样式：
(env) $:blog apple$ pygmentize -L style查看当前目录会产生一个styles.css 文件：
(env) $:blog apple$ ls
blog blogpost db.sqlite3 manage.py styles.css templates将styles.css文件移到blogpost/static/blogpost/css/ 目录：
(env) $:blog apple$ mv monokai.css blogpost/static/blogpost/css/接下来，在base.html 文件head标签中添加样式
<link rel="stylesheet" href="{% static 'blogpost/css/styles.css' %}">运行开发服务器，打开文章详细页面：
代码高亮正常显示！
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
