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

Django个人博客搭建1-创建Django项目和第一个App
Django个人博客搭建2-编写文章Model模型,View视图
 Django个人博客搭建3-创建superuser并向数据库中添加数据并改写视图
 Django个人博客搭建4-配置使用 Bootstrap 4 改写模板文件
 Django个人博客搭建5-编写文章详情页面并支持markdown语法
 Django个人博客搭建6-对文章进行增删查改
 Django个人博客搭建7-对用户登陆注册等需求的实现
 Django个人博客搭建8-优化文章模块
 Django个人博客搭建9-增加文章评论模块
1. 编写视图函数
打开article/views.py增加文章详情页函数article_detail():

# 文章详情
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,配置路由地址:

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

3.编写模板article/detail.html

<!-- extends表明此页面继承自 base.html 文件 -->
{% extends "base.html" %}
{% load staticfiles %}
<!-- 写入 base.html 中定义的 title -->
{% block title %}
    文章详情
{% endblock title %}
<!-- 写入 base.html 中定义的 content -->
{% block content %}
<!-- 文章详情 -->
<div class="container">
    <div class="row">
        <!-- 标题及作者 -->
        <h1 class="col-12 mt-4 mb-4">{{ article.title }}</h1>
        <div class="col-12 alert alert-success">作者：{{ article.author }}</div>
        <!-- 文章正文 -->
        <div class="col-12">
            <p>{{ article.body }}</p>
        </div>
    </div>
</div>
{% endblock content %}

然后我们就可以在浏览器中输入 http://127.0.0.1:8000/article/article-detail/1/ 查看第一篇文章了
在这里插入图片描述
4.优化网页入口
改写header.html，让用户可通过导航栏右侧的文章链接返回首页：

<!-- 定义导航栏 -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container">
    <!-- 导航栏商标 -->
    <a class="navbar-brand" href="#">我的博客</a>
    <!-- 导航入口 -->
    <div>
      <ul class="navbar-nav">
        <!-- 条目 -->
        <li class="nav-item">
         <!-- 修改这里 -->
          <a class="nav-link" href="{% url 'article:article_list' %}">文章</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

这样点击文章链接就能直接返回首页
同样修改阅读本文的按钮链接:

<!-- extends表明此页面继承自 base.html 文件 -->
{% extends "base.html" %}
{% load staticfiles %}
<!-- 写入 base.html 中定义的 title -->
{% block title %}
    首页
{% endblock title %}
<!-- 写入 base.html 中定义的 content -->
{% block content %}
<!-- 定义放置文章标题的div容器 -->
<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">阅读本文</a>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
</div>
{% endblock content %}

这样点击阅读本文就能直接进入文章详情页了
在这里插入图片描述
5.令其支持markdown语法
首先安装markdown：

pip install markdown

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

# 文章详情
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}
    # 载入模板，并返回context对象
    return render(request, 'article/detail.html', context)

修改templates/article/detail.html:

<!-- extends表明此页面继承自 base.html 文件 -->
{% extends "base.html" %}
{% load staticfiles %}
<!-- 写入 base.html 中定义的 title -->
{% block title %}
    文章详情
{% endblock title %}
<!-- 写入 base.html 中定义的 content -->
{% block content %}
<!-- 文章详情 -->
    <div class="container">
        <div class="row">
            <h1 class="col-12 mt-4">{{ article.title }}</h1>
            <div class="col-12 alert alert-success">作者： {{ 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语法的文章
#题目

if __name__ == "__main__":
    print("markdown语法测试")

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

pip install Pygments

进入杠杆船舰的md_css目录中输入Pygments指令:

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

生成命令中的 -a 参数需要与真实页面中的 CSS Selector 相对应，即**.codehilite这个字段在有些版本中应写为.highlight**。如果后面的代码高亮无效，很可能是这里出了问题。
完成后可以看见文件夹中多出来一个css文件
在这里插入图片描述
之后我们修改base.html 文件

<!-- 载入静态文件 -->
{% load staticfiles %}
<!DOCTYPE html>
<!-- 网站主语言 -->
<html lang="zh-cn">
<head>
    <!-- 网站采用的字符编码 -->
    <meta charset="utf-8">
    <!-- 预留网站标题的位置 -->
    <title>{% block title %}{% endblock %}</title>
    <!-- 引入bootstrap的css文件 -->
    <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' %}
    <!-- bootstrap.js 依赖 jquery.js 和popper.js，因此在这里引入 -->
    <script src="{% static 'jquery/jquery-3.3.1.js' %}"></script>
    <script src="{% static 'popper/popper-1.14.4.js' %}"></script>
    <!-- 引入bootstrap的js文件 -->
    <script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
</body>
</html>

保存后我们查看文章详情:
在这里插入图片描述
可以看见支持markdown语法并且代码已经高亮显示

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

猜你喜欢