Django 博客 - 5 编写博客详情界面

编写视图

这里是使用的是基于类的视图，由于要详情页展示的是Post的内容，所以需要继承DetailView

from django.views.generic import DetailView
class PostView(DetailView):
    model = Post
    context_object_name = 'post'
    template_name = 'blog/detail.html'

编写模板文件

在blog/templates/blog目录，新建一个detail.html，内容如下

{% extends 'blog/base.html' %}
{% block body %}
    <div class="uk-container">
        <article class="uk-article">
            <h1 class="uk-article-title">{{ post.title }}</h1>
            <p class="uk-article-meta">Written by {{ post.author.username }}
                on {{ post.created_time }}, {{ post.views }}views</p>
            <p>{{ post.body }}</p>
        </article>
    </div>
{% endblock %}

配置url

在blog路径下修改urls.py文件

urlpatterns = [
    ...
    url(r'^(?P<pk>[0-9]+)/$', views.PostView.as_view(), name='detail'),
]

url函数第一个参数，是一个正则表达式，这里是r'^(?P<pk>[0-9]+)/$'，所以会匹配http://127.0.0.1:8000/blog/123类似的url，其中123就是pk参数，也就是Post的主键，传给视图函数用来查询对应的Post

为了方便，给Post模型添加get_absolute_url方法，可以在模板文件里直接通过post.get_absolute_url来获取url

在blog/models.py的Post模型里添加

from django.urls import reverse

def get_absolute_url(self):
    return reverse('blog:detail', kwargs={'pk': self.pk})

再将blog/templates/blog/index.html做如下修改

- <a class="uk-button uk-button-text" href="#">Read more</a>
+ <a class="uk-button uk-button-text" href="{{ post.get_absolute_url }}">Read more</a>

这样就可以点击Read more，跳转到详情页面了

添加markdown语法支持

当前的详情页博客内容只是纯文本，没有任何格式，不美观也无法添加格式
因此可以用markdown语法编写博客，再通过python的markdown将博客内容转换成HTML格式，将转换后的文本直接显示出来

首先安装markdown
pip3 install Markdown

再安装Pygments，用于代码语法高亮
pip3 install Pygments

生成语法高亮的样式表
pygmentize -S default -f html -a .codehilite > code.css

创建blog/static/blog/css/highlights/目录
将code.css放到blog/static/blog/css/highlights/code.css

markdown的详细用法可以查看Markdown官方文档

修改PostView，覆写get_object方法

import markdown
def get_object(self, queryset=None):
    #获取当前的post
    post = super(PostView, self).get_object(queryset)
    #创建markdown,extensions指定扩展，markdown.extensions.codehilite扩展是用来高亮代码的
    md = markdown.Markdown(extensions=[
        'markdown.extensions.extra',
        'markdown.extensions.codehilite',
    ])
    #将博客内容转换成html格式
    post.body = md.convert(post.body)
    return post

修改模板，主要是引入code.css文件，并且不对post.body进行转义，通过添加safe过滤器来完成

 {% extends 'blog/base.html' %}
+{% block title %}{{ post.title }}{% endblock %}
+{% block beforehead %}
+    {% load static %}
+    <link rel="stylesheet" type="text/css" href="{% static 'blog/css/highlights/code.css' %}" />
+{% endblock %}
 {% block body %}
     <div class="uk-container">
         <article class="uk-article">
             <h1 class="uk-article-title">{{ post.title }}</h1>
             <p class="uk-article-meta">Written by {{ post.author.username }}
-                on {{ post.created_time }}, {{ post.views }}views</p>
-            <p>{{ post.body }}</p>
+                on {{ post.created_time }}, {{ post.views }} views</p>
+            {{ post.body|safe }}
         </article>
     </div>
 {% endblock %}

可以在后台管理里添加一篇makedown语法的文章进行测试

# Intro
Go ahead, play around with the editor! Be sure to check out **bold** and *italic* styling, or even [links](https://google.com). You can type the Markdown syntax, use the toolbar, or use shortcuts like `cmd-b` or `ctrl-b`.

## Lists
Unordered lists can be started using the toolbar or by typing `* `, `- `, or `+ `. Ordered lists can be started by typing `1. `.

#### Unordered
* Lists are a piece of cake
* They even auto continue as you type
* A double enter will end them
* Tabs and shift-tabs work too

#### Ordered
1. Numbered lists...
2. ...work too!

## What about images?
![Yes](https://i.imgur.com/sZlktY7.png)

## What about code?
```python
def get_object(self, queryset=None):
    post = super(PostView, self).get_object(queryset)
    md = markdown.Markdown(extensions=[
    'markdown.extensions.extra',
    'markdown.extensions.codehilite',
    ])
    post.body = md.convert(post.body)
    return post
```

本文相关源码