前一篇文章，实现了展示博客列表的功能。本篇文章继续针对博客进行详情的展示功能实现。
先来看下目前已经实现的效果图：
效果图_1.png
在这里看到，在博客列表中，每篇博客下方有 “阅读全文“ 按钮作为进入博客详情的入口。
index.html 中查看 ”阅读全文“ 的点击请求连接。
<p class="article-more-link">
<a href="/post/{{ post.id }}" target="_blank">阅读全文</a>
</p>
点击 "阅读全文" 可以链接到 /post/{{ post.id }} 请求地址。
接下来，则要在 post/urls.py 中对相应请求进行路由配置：
urlpatterns=[
url(r'^$',views.queryAll),
url(r'^page/(\d+)$',views.queryAll),
url(r'^post/(\d+)$',views.postDetail)
]
针对 post 详情的请求，在 post/views.py 中创建相应的 postDetail 方法去获取某个博客的详情。
def postDetail(request, postId):
postId = int(postId)
# 根据postId 获取 博客详情信息
postObjItem = Post.objects.get(id=postId)
return render(request, 'post_detail.html', {'post': postObjItem})
获取到了博客的详细信息 postItemObj，接下来 post 模块下新建 post_detail.html 对博客详情进行展示。
post_detail.html 整体结构继承自 base.html:
{% extends 'base.html' %}
{% block title %}
详情页面
{% endblock %}
{% block left %}
<div id="main">
<article class="article article-type-post">
<div class="article-meta">
<a class="article-date">
<time>{{ post.created|date:'Y-m-d H:i:s' }}</time>
</a>
<div class="article-category">
<a class="article-category-link" href="#" target="_blank">{{ post.category.cname }}</a>
</div>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title">{{ post.title }}</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<h2>前言</h2>
{{ post.desc }}
<hr>
{{ post.content}}
</div>
</div>
</article>
</div>
{% endblock %}
post_detail 页面对 tile 和 left 区域模块进行了重写，并对 post 博客的详情数据对应进行展示。
运行项目先看下博客详情的效果图：
效果图_2.png
点击了 ”阅读全文“ 按钮之后，可以对博客详情进行查看，但是同时也看到这里的内容有点杂乱无章。这篇文章是 copy 的 markdown 格式的文章，那么能不能让内容使用 markdown 过滤后再展示呢？
接下来，自定义过滤器对文章内容进行过滤。
在 post 模块下新建 python 包 templatetags ，并在 templatetags 下创建 myfilter.py 自定义过滤文件，注册用来对 文章详情进行 markdown 过滤：
from django.template import Library
register = Library()
@register.filter
def md(value):
import markdown
return markdown.markdown(value)
过滤器自定义完成后，应用到 post_detail.html 对应的文章内容展示处:
{% extends 'base.html' %}
{% load myfilter %}
{% block title %}
详情页面
{% endblock %}
{% block left %}
<div id="main">
<article class="article article-type-post">
......
<div class="article-entry" itemprop="articleBody">
<h2>前言</h2>
{{ post.desc }}
<hr>
{{ post.content | md}}
</div>
</div>
{% endblock %}
重新运行项目查看效果：
效果图_3.png
可以看到虽然进行了转换，但是依然是带有 html 标签的形式，这里在 md 后面再加入 safe 配置转换 html 标签即可：
{{ post.content | md | safe}}
效果图_4.png
经过转换后，文章可按照 markdown 规则正常显示。
文章详情展示功能已经完成，像 csdn，简书这样的论坛同时会给文章提供分享功能扩大文章的影响范围。这里直接使用百度的一套方案，直接复制相关代码加入到 post_detail.html 中。
{% endblock %}
{% block left %}
<div id="main">
......
<div class="bdsharebuttonbox"><a href="#" class="bds_more" data-cmd="more"></a><a href="#" class="bds_qzone"
data-cmd="qzone"></a><a
href="#" class="bds_tsina" data-cmd="tsina"></a><a href="#" class="bds_tqq" data-cmd="tqq"></a><a
href="#" class="bds_renren" data-cmd="renren"></a><a href="#" class="bds_weixin" data-cmd="weixin"></a>
</div>
<script>window._bd_share_config = {
"common": {
"bdSnsKey": {},
"bdText": "",
"bdMini": "2",
"bdPic": "",
"bdStyle": "0",
"bdSize": "16"
},
"share": {},
"image": {"viewList": ["qzone", "tsina", "tqq", "renren", "weixin"], "viewText": "分享到：", "viewSize": "16"},
"selectShare": {"bdContainerClass": null, "bdSelectMiniList": ["qzone", "tsina", "tqq", "renren", "weixin"]}
};
with (document) 0[(getElementsByTagName('head')[0] || body).appendChild(createElement('script')).src = 'http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion=' + ~(-new Date() / 36e5)];</script>
</div>
{% endblock %}
查看效果展示：
效果图_5.png
文章左下角实现分享功能，点击即可进行分享。
欢迎关注公众号，在聊天对话框回复「博客」获取源码地址以及其他 python 相关知识。
python面面观.jpg
网友评论