完善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 markdown
github安装:
(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' %}">
运行开发服务器,打开文章详细页面:
代码高亮正常显示!