Python Django个人网站搭建5-编写文章详情页面并支持markdown语法

作者： zifanwang  发布于2020-05-09

1. 编写视图函数

打开article/views.py增加文章详情页函数article_detail():

代码语言：javascript复制

# 文章详情
def article_detail(request, id):
   article = ArticlePost.objects.get(id=id)
   context = {'article': article}
   # 载入模板，并返回context对象
   return render(request, 'article/detail.html', context) 

2. 编写article/urls.py,配置路由地址:

代码语言：javascript复制

# 引入path
from django.urls import path
from . import views
# 正在部署的应用的名称
app_name = 'article'
urlpatterns = [
    # path函数将url映射到视图
    path('list/', views.article_list, name='article_list'),
    path('article-detail/<int:id>/', views.article_detail, name='article_detail'),
]

3.编写模板article/detail.html

在templates/article 文件夹里新建detail.html，并输入：

代码语言：javascript复制

{% extends "base.html" %}
{% load static %}
{% block title %}
    article
{% endblock title %}
{% block content %}
<div class="container">
    <div class="row">
        <h2 class="col-12 mt-4 mb-4">{{ article.title }}</h2>
        <div class="col-12 alert alert-success">author: {{ article.author }}</div>
        <div class="col-12">
            <p>{{ article.body }}</p>
        </div>
    </div>
</div>
{% endblock content %}

然后运行服务器(python manage.py runserver)，在浏览器中输入 http://127.0.0.1:8000/article/article-detail/1/ 查看第一篇文章了：

4.优化网页入口

改写header.html，让用户可通过导航栏右侧的Article链接返回首页：

代码语言：javascript复制

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container">
    <a class="navbar-brand" href="#">My Site</a>
    <div>
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="{% url 'article:article_list' %}">Article</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

这样点击Article链接就能直接返回首页 同样修改read的按钮链接templates/article/list.html：

代码语言：javascript复制

{% extends "base.html" %}
{% load static %}
{% block title %}
    Article
{% endblock title %}
{% block content %}
<div class="container">
    <div class="row mt-2">
        {% for article in articles %}
        <div class="col-4 mb-4">
            <div class="card h-100">
                <h4 class="card-header">{{ article.title }}</h4>
                <div class="card-body">
                    <p class="card-text">{{ article.body|slice:'100' }}...</p>
                </div>
                <div class="card-footer">
                    <a href="{% url 'article:article_detail' article.id %}" class="btn btn-primary">read</a>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
</div>
{% endblock content %}

这样点击read就能直接进入文章详情页了。

5.令其支持markdown语法

首先安装markdown：

代码语言：javascript复制

pip install markdown

然后修改article/views.py的article_detail()：

代码语言：javascript复制

import markdown

. . .

# 文章详情
def article_detail(request, id):
    article = ArticlePost.objects.get(id=id)
    article.body = markdown.markdown(article.body,
                                     extensions=[
                                         'markdown.extensions.extra',
                                         # 语法高亮扩展
                                         'markdown.extensions.codehilite',
                                     ])
    context = {'article': article}
    return render(request, 'article/detail.html', context)

修改templates/article/detail.html：

代码语言：javascript复制

{% extends "base.html" %}
{% load static %}
{% block title %}
    article
{% endblock title %}
{% block content %}
    <div class="container">
        <div class="row">
            <h1 class="col-12 mt-4">{{ article.title }}</h1>
            <div class="col-12 alert alert-success">author: {{ article.author }}</div>
            <div class="col-12">
                <p>{{ article.body|safe }}</p>
            </div>
        </div>
    </div>
{% endblock content %}

Django出于安全的考虑，会将输出的HTML代码进行转义， 这使得article.body中渲染的HTML文本无法正常显示。 管道符|是Django中过滤器的写法，而**|safe就类似给article.body贴了一个标签， 表示这一段字符不需要进行转义了。 修改完成后,在admin后台添加markdown语法的文章：

6.代码高亮设置

在static目录中新建一个目录md_css/,用于放置代码高亮的样式文件 打开命令行:安装Pygments

代码语言：javascript复制

pip install Pygments

进入static/md_css目录中输入Pygments指令：

代码语言：javascript复制

pygmentize -S monokai -f html -a .codehilite > monokai.css

如果后面的代码高亮无效，很可能是这里出了问题。 完成后可以看见文件夹中多出来一个css文件

之后我们修改base.html文件

代码语言：javascript复制

{% load static %}
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title>{% block title %}{% endblock %}</title>
    <link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.min.css' %}">
    <link rel="stylesheet" href="{% static 'md_css/monokai.css' %}">
</head>
<body>
    {% include 'header.html' %}
    {% block content %}{% endblock content %}
    {% include 'footer.html' %}
    <script src="{% static 'jquery/jquery-3.3.1.js' %}"></script>
    <script src="{% static 'popper/popper-1.14.4.js' %}"></script>
    <script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
</body>
</html>

保存后我们查看文章详情:

可以看见支持markdown语法并且代码已经高亮显示

markdown python 腾讯云开发者社区 django html

0 人点赞