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語法

linux安裝cuda和cudnn

測試人員都是畫畫大神，讓我看看誰還不會用代碼圖？

Object.values()對象遍歷

Mellanox網卡開啓SR-IOV

我拍了拍Redis，被移出了羣聊···

網絡現代化通向雲原生應用的高速公路

面試官：說說你對序列化的理解

我宣佈，這是我找到的史上AI最全論文體系！

高性能MySQL（第3版）筆記 1.4多版本併發控制

python用mysql建表的UTF8MB3、UTF8MB4警告

Django個人博客搭建5-編寫文章詳情頁面並支持markdown語法

千峯Django ：DJango創建項目

Django個人博客搭建6-對文章進行增刪查改

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結