未优化博客界面
- 博客主页
没有优化前可见主页中虽然自动实现markdown文本摘要，但是直接截取markdown文本如果在摘要中出现链接或是图片，就会在摘要显示markdown格式符号，界面不够美观。
- 博客详细页
未优化的博客详细页的问题就更多了，首先网页链接没有颜色，无法分辨；还有，代码高亮有问题，去不都是红色；最后，整体文字看起来也不太协调。
博客Markdown支持优化
- 博客主页摘要修正
修改views.py文件中index_paginator函数，在程序中自动生成摘要，先把post.body转化为html格式文件，并且通过strip_tags把html格式文件中的符号提取出来。最后，在detail.html文件中提取前100个字符，自动形成摘要。
for post in post_list:
post.content = strip_tags(markdown.markdown(post.body))
return render(request, 'blog/index.html', {'post_list': post_list})
<div class="entry-content clearfix">
<p>{{ post.content | truncatechars:100}} ···</p>
<div class="read-more cl-effect-14"> <a href="{{ post.get_absolute_url }}" class="more-link">继续阅读 <span
class="meta-nav">→</span></a>
</div>
</div>
- 博客详细页代码高亮、CSS模板更换
在base.html中增加colorful.css用于代码高亮，增加github-markdown.css来渲染markdown文本。在detail.html中调用markdown-body就可以实现github风格的Markdwon前端显示。
<link rel="stylesheet" href="{% static 'blog/css/highlights/colorful.css' %}">
<link rel="stylesheet" href="{% static 'blog/css/github-markdown.css' %}"> <style>.markdown-body {
box-sizing: border-box;
min-width: 200px;
max-width: 980px;
margin: 0 auto;
padding: 45px;
}
@media (max-width: 767px) {
.markdown-body {
padding: 15px;
}
}
<article class=markdown-body">
{{ post.body|safe }}
</article>
修改后博客主页和详细页效果如下：
(1) 博客主页可以看到红框内的博文摘要，已经没有markdown符号，显示已经正常。
(2) 详细页的代码高亮、排版以及链接显示已经正常。
网站近照-SmartzLink
本章节的代码位于：smartzlink_step3
评论列表，共 12933 条评论