「入行全栈 Django3.x 个人主页网站全记录」4.博客应用开发

青旅半醒 2022-09-10 01:14 46阅读 0赞

项目汇总：[「入行全栈 Django3.x 个人主页网站全记录」项目总览介绍][Django3.x]

### 文章目录 ###

*  内容介绍
 *  内容展示
 *  应用创建&配置
 *  应用 models.py
 *  管理 adminx.py
 *  视图 Views.py
 *  配置 url.py
 *  前端渲染模板

# 内容介绍 #

Blog 后台功能开发和配置。其中文章的后台输入形式为markdown。

其中项目中数据迁移部分不做说明，执行CMD命令。令。

python manage.py makemigrations  # 迁移到我们数据库
    python manage.py migrate # 同步到数据库

# 内容展示 #

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBATXLmlbDmja7mnag_size_20_color_FFFFFF_t_70_g_se_x_16]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBATXLmlbDmja7mnag_size_20_color_FFFFFF_t_70_g_se_x_16 1]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBATXLmlbDmja7mnag_size_20_color_FFFFFF_t_70_g_se_x_16 2]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBATXLmlbDmja7mnag_size_20_color_FFFFFF_t_70_g_se_x_16 3]

# 应用创建&配置 #

**1.创建应用**  
进入文件根目录执行CMD命令创建新闻资讯应用，并将创建好的应用文件夹移动到目录的apps下即可。

cd MyHome
    python manage.py startapp Blog

将创建好的应用文件夹移动到目录的apps下即可

**2.配置应用模块**

在settings.py文件中修改

INSTALLED_APPS = [
    	...
    	# 添加文章应用
        'apps.Blog',

**3.不需要修改该的文件**

1.  **admin.py** 这个我们使用xadmin代替的原有版本的admin，因此这个文件不需要修改该
2.  **apps.py** 应用的配置文件，不需要动
3.  **test.py** 测试执行脚本，不需要动

# 应用 models.py #

# coding:utf-8
    from django.db import models
    from django.utils import timezone
    from django.contrib.auth import get_user_model
    from mdeditor.fields import MDTextField
    import datetime
    from django.urls import reverse
    
    User = get_user_model()
    
    
    # 设置默认时间戳转换Str生成文章Slug
    def default_time():
        return datetime.datetime.now().strftime("%Y%m%d%X").replace(":", "")
    
    
    # Create your models here.
    
    # 文章类别模型
    class ArticleCategory(models.Model):
        category_name = models.CharField(
            max_length=30,
            verbose_name='文章类别', help_text="最多使用30个字符"
        )
    
        class Meta:
            verbose_name = '文章类别管理'
            verbose_name_plural = verbose_name
    
        def __str__(self):
            return self.category_name
    
    
    # 文章栏目模型
    class ArticleItem(models.Model):
        item_category = models.ForeignKey(
            ArticleCategory,
            on_delete=models.CASCADE,
            verbose_name="文章类别名称", help_text="选择栏目所属类别，若没有请在文章类别管理中创建"
        )
        item_name = models.CharField(
            max_length=30,
            verbose_name="文章栏目", help_text="最多使用30个字符"
        )
    
        class Meta:
            verbose_name = '文章栏目管理'
            verbose_name_plural = verbose_name
    
        def __str__(self):
            return self.item_name
    
    
    # 文章标签模型
    class ArticleTag(models.Model):
        tag_name = models.CharField(
            max_length=50,
            verbose_name='标签名称', help_text="最多使用20个字符"
        )
        tag_slug = models.SlugField(
            max_length=100, unique=True,
            verbose_name="标签slug", help_text='填写英文、字母、下划线、数字，不可重复,用于标签快速查找'
        )
    
        class Meta:
            verbose_name = '文章标签管理'
            verbose_name_plural = verbose_name
    
        def __str__(self):
            return self.tag_name
    
    
    # 文章基本信息模型
    class ArticleInfo(models.Model):
        article_author = models.ForeignKey(
            User,
            related_name='AInfoAuthor', on_delete=models.CASCADE,
            verbose_name='数据录入用户', help_text="数据录入用户名称"
        )
        created_date = models.DateTimeField(
            default=timezone.now,
            verbose_name='数据创建时间', help_text='使用默认的系统时间'
        )
        article_title = models.CharField(
            max_length=100, default="",
            verbose_name='标题', help_text="最多使用100个字符"
        )
        article_item = models.ForeignKey(
            ArticleItem,
            related_name='ArticleInfoItem', on_delete=models.CASCADE,
            verbose_name="所属栏目", help_text="选择文章所属栏目，若没有请在文章栏目管理中创建"
        )
        article_summary = models.CharField(
            max_length=100, default="",
            verbose_name='摘要', help_text="最多使用100个字符，可以为空",
            blank=True
        )
        article_key_words = models.CharField(
            max_length=100, default='Mr数据杨,知识科普',
            verbose_name='关键词', help_text="填写格式：['关键词1','关键词2'],最多使用100个字符",
        )
        article_slug = models.SlugField(
            default=default_time,
            verbose_name='文章slug', help_text='填写英文、字母、下划线、数字，不可重复,用于标签快速查找',
            primary_key=True
        )
        article_tags = models.ManyToManyField(
            ArticleTag, related_name='ArticleInfoTags',
            verbose_name='标签', help_text="若没有请在文章标签管理中创建",
        )
        article_cover = models.ImageField(
            upload_to='ArticleCover/%Y/%m', default='ArticleCover/default.png',
            verbose_name='自定义封面', help_text="若没有选择封面，则使用默认封面",
            null=True, blank=True
        )
        share_num = models.IntegerField(
            default=0,
            verbose_name='转发数', help_text="用户转发数"
        )
        read_num = models.IntegerField(
            default=0,
            verbose_name='浏览数', help_text="用户浏览数"
        )
        fav_num = models.IntegerField(
            default=0,
            verbose_name='收藏数', help_text="用户收藏数"
        )
        article_index = models.IntegerField(
            default=0,
            verbose_name='文章栏目首页', help_text="文章栏目首页"
        )
    
        class Meta:
            verbose_name = '文章基础信息'
            verbose_name_plural = verbose_name
    
        def __str__(self):
            return self.article_title
    
    # 文章详情信息模型
    class ArticleDetail(models.Model):
        detail_slug = models.SlugField(
            default=default_time,
            verbose_name='文章slug', help_text='填写英文、字母、下划线、数字，不可重复,用于标签快速查找',
            primary_key=True
        )
        detail_content = MDTextField(
            verbose_name='文章详情',
        )
    
        class Meta:
            verbose_name = '文章详情信息'
            verbose_name_plural = verbose_name
    
        def __str__(self):
            return self.detail_slug
    
    
    
    
    # 拼接内容基本信息和详情模型（用于整体后台编辑）
    class Articles(ArticleInfo, ArticleDetail):
        class Meta:
            verbose_name = '博客编辑内容'
            verbose_name_plural = verbose_name
    
        def __str__(self):
            return self.article_title

# 管理 adminx.py #

# coding:utf-8
    import xadmin
    from app.Blog.models import *
    from xadmin.layout import Fieldset
    
    
    # 文章类别管理
    class ArticleCategoryAdmin(object):
        list_display = ['category_name', 'item_count']
        show_bookmarks = False
    
        # 统计每个Category下的Item数
        def item_count(self, obj):
            return ArticleItem.objects.filter(item_category=obj).count()
    
        # 定义统计列的字段名称
        item_count.short_description = "栏目数量"
    
    
    # 文章栏目管理
    class ArticleItemAdmin(object):
        list_display = ['item_category', 'item_name', "article_count"]
        show_bookmarks = False
    
        # 统计每个Item下的文章数量
        def article_count(self, obj):
            return ArticleInfo.objects.filter(article_item_id=obj).count()
    
        # 定义统计列的字段名称
        article_count.short_description = "文章数量"
    
    
    # 文章标签管理
    class ArticleTagAdmin(object):
        list_display = ['tag_name', 'tag_slug']
        show_bookmarks = False
    
    
    # 文章内容编辑管理
    class ArticlesAdmin(object):
        list_display = ['article_item', 'article_title', 'article_author']
        show_bookmarks = False
        list_per_page = 30
        readonly_fields = ["article_slug", "detail_slug", "share_num", "read_num", "fav_num", 'created_date']
    
        # 实现自定义表单显示功能
        def instance_forms(self):
            super().instance_forms()
            self.form_obj.initial['article_author'] = self.request.user.id
            self.form_layout = (
                Fieldset(None,
                         'article_author', 'detail_slug', 'link_slug',
                         **{ "style": "display:None"}),)
    
    
    xadmin.site.register(ArticleCategory, ArticleCategoryAdmin)
    xadmin.site.register(ArticleItem, ArticleItemAdmin)
    xadmin.site.register(ArticleTag, ArticleTagAdmin)
    xadmin.site.register(Articles, ArticlesAdmin)

# 视图 Views.py #

# coding:utf-8
    from django.shortcuts import render
    from django.views.generic.base import View  # 基于类实现需要继承的view
    from apps.MyHomePage.models import *
    from django.http import HttpResponse
    from apps.StatisticalData.views import *
    from apps.MyHomePage.models import *
    from apps.Comment.models import *
    from apps.Comment.Forms import *
    from .models import *
    import markdown
    
    
    class MyBlogIndex(View):
        def get(self, request):
            # 记录访问信息
            visit_info(request, "访问博客主页")
            item_list = ArticleItem.objects.all()
            my_project = MyProjectList.objects.all()
            return render(request, 'Blog/index.html', { 'item_list': item_list, 'my_project': my_project})
    
    
    class MyBlogDetail(View):
        def get(self, request):
            type_id = request.GET.get("type_id")
            article_slug = request.GET.get("article_slug")
    
            if type_id:
                blog_info = ArticleInfo.objects.get(article_item_id=type_id, article_index=1)  # 查询该类型文章置顶
            elif article_slug:
                blog_info = ArticleInfo.objects.get(article_slug=article_slug)
    
            # 获取文章评论
            comments = Comment.objects.filter(article_slug=article_slug)
            # 在评论中外键关联用户头像数据
            for data in comments:
                data.user_image = UserProfile.objects.get(username=data.user).user_image
    
            # 为评论引入表单
            comment_form = CommentForm()
    
            # 文章阅读数+1
            blog_info.read_num += 1
            blog_info.save()
    
            blog_detail = ArticleDetail.objects.get(detail_slug=blog_info.article_slug)
            blog_detail_dict = { }
            blog_detail.detail_content = markdown.markdown(blog_detail.detail_content, extensions=[
                'markdown.extensions.extra',
                'markdown.extensions.codehilite',  # 语法高亮拓展
                'markdown.extensions.toc'  # 自动生成目录
            ])  # 修改blog.content内容为html
            blog_detail_dict['blog_detail'] = blog_detail
    
            blog_list = ArticleInfo.objects.filter(article_item_id=type_id)
    
            category_list = ArticleCategory.objects.all()
            item_list = ArticleItem.objects.all()
            blog_info_all = ArticleInfo.objects.all()
            return render(request, 'Blog/single.html', { 
                'blog_info': blog_info,
                'blog_detail': blog_detail_dict,
                'blog_list': blog_list,
                'category_list': category_list,
                'item_list': item_list,
                'blog_info_all': blog_info_all,
                'comments': comments,
                'comment_form': comment_form
            })

# 配置 url.py #

from django.urls import path,re_path
    from .views import *
    
    app_name = 'Blog'
    
    urlpatterns = [
        # 文章应用主页
        path('MyBlog', MyBlogIndex.as_view(), name='MyBlog'),
        # 博客内容详情页
        path('MyBlogDetail', MyBlogDetail.as_view(), name='MyBlogDetail'),
    ]

# 前端渲染模板 #

**index.html**

<!DOCTYPE html>
    <html lang="cn">
    <head>
        {% load static %}
        {% load staticfiles %}
        <title>Mr数据杨的博客文章</title>
        <meta name="description" content="">
        <meta name="author" content="">
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <link rel="stylesheet" href="{% static 'Blog/css/bootstrap.min.css' %}">
        <link rel="stylesheet" href="{% static 'Blog/css/animate.css' %}">
        <link rel="stylesheet" href="{% static 'Blog/css/font-awesome.min.css' %}">
        <link rel="stylesheet" href="{% static 'Blog/css/owl.theme.css' %}">
        <link rel="stylesheet" href="{% static 'Blog/css/owl.carousel.css' %}">
        <link rel="stylesheet" href="{% static 'Blog/css/style.css' %}">
        <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,300,600' rel='stylesheet' type='text/css'>
        <link href='https://fonts.googleapis.com/css?family=Lora:700italic' rel='stylesheet' type='text/css'>
    </head>
    <body data-spy="scroll" data-target=".navbar-collapse" data-offset="50">
    <div class="adcenter">
        <script src="http://www.cssmoban.com/include/new/ggad2_728x90.js"></script>
    </div>
    {### 加载选项 ###}
    <div class="preloader">
        <div class="sk-spinner sk-spinner-pulse"></div>
    </div>
    
    <div class="navbar navbar-default navbar-fixed-top sticky-navigation" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon icon-bar"></span>
                    <span class="icon icon-bar"></span>
                    <span class="icon icon-bar"></span>
                </button>
                <a href="#" class="navbar-brand">技术文章汇总</a>
            </div>
            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav navbar-right main-navigation">
                    <li><a href="#home" class="smoothScroll">博客主页</a></li>
                    <li><a href="#trainer" class="smoothScroll">我的项目</a></li>
                    <li><a href="#blog" class="smoothScroll">我的学习</a></li>
                </ul>
            </div>
        </div>
    </div>
    
    {### 博客主页 ###}
    <section id="home" class="parallax-section">
        <div class="container">
            <div class="row">
                <div class="col-md-offset-1 col-md-10 col-sm-12">
                    <h3 class="wow bounceIn" data-wow-delay="0.9s">欢迎访问</h3>
                    <h1 class="wow fadeInUp" data-wow-delay="1.6s"></h1>
                    <a href="#overview" class="wow fadeInUp smoothScroll btn btn-default" data-wow-delay="2s">了解更多</a>
                </div>
            </div>
        </div>
    </section>
    
    
    <section id="trainer" class="parallax-section">
        <div class="container">
            <div class="row">
                <div class="wow fadeInUp col-md-12 col-sm-12" data-wow-delay="1.3s">
                    <h2>我的项目目录</h2>
                    <p>项目成套文章内容</p>
                </div>
                {% for project in my_project %}
                    <div class="wow fadeInUp col-md-4 col-sm-6" data-wow-delay="1.9s">
                        <div class="trainer-thumb">
                            <img src="{ { MEDIA_URL }}{ { project.img }}" class="img-responsive" alt="Trainer">
                            <div class="trainer-overlay">
                                <div class="trainer-des">
                                    <h2>{
       { project.project_name }}</h2>
                                    <h3>{
       { project.type }}</h3>
                                    <ul class="social-icon">
                                        <li><a href="{ { project.url }}" class="fa fa-mail-forward wow fadeInUp" data-wow-delay="1s"></a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <p>项目类型：{
       { project.type_name }}</p>
                    </div>
                {% endfor %}
            </div>
        </div>
    </section>
    
    <section id="blog" class="parallax-section">
        <div class="container">
            <div class="row">
                <div class="col-md-12 col-sm-12 text-center">
                    <h2>专项学习博客</h2>
                    <p>选择对应的专栏学习</p>
                </div>
                {% for item in item_list %}
                    <div class="wow fadeInUp col-md-6 col-sm-12" data-wow-delay="0.9s">
                        <div class="blog-thumb">
                            <span class="blog-date"></span>
                            <h3 class="blog-title">
                                <a href="{% url 'Blog:MyBlogDetail' %}?type_id={ { item.id }}">{
       { item.item_name }}</a>
                            </h3>
                            <h5 id="blog-author">by Mr数据杨</h5>
                        </div>
                    </div>
                {% endfor %}
            </div>
        </div>
    </section>
    
    <footer>
        <div class="container">
            <div class="row">
    
                <div class="wow fadeInUp col-md-4 col-sm-4" data-wow-delay="0.6s">
                    <a href="{% url 'MyHomePage:MyHomeIndex' %}"><h2>关于我</h2></a>
                </div>
    
                <div class="wow fadeInUp col-md-5 col-sm-4" data-wow-delay="0.9s">
                    <h2>工作时间</h2>
                    <div>
                        <h5>上午</h5>
                        <h4>9:00 AM - 11:30 PM</h4>
                    </div>
                    <div>
                        <h5>下午</h5>
                        <h4>13:30 PM - 17:00 PM</h4>
                    </div>
                </div>
    
                <div class="wow fadeInUp col-md-3 col-sm-4" data-wow-delay="1s">
                    <h2>联系方式</h2>
                    <ul class="social-icon">
                        <li><a href="#" class="fa fa-qq wow fadeIn" data-wow-delay="1s"></a></li>
                        <li><a href="#" class="fa fa-wechat wow fadeInUp" data-wow-delay="1.3s"></a></li>
                        <li><a href="#" class="fa fa-mail-forward wow fadeIn" data-wow-delay="1.6s"></a></li>
                    </ul>
                </div>
                <div class="clearfix"></div>
            </div>
        </div>
    </footer>
    
    
    <script src="{% static 'Blog/js/jquery.js' %}"></script>
    <script src="{% static 'Blog/js/bootstrap.min.js' %}"></script>
    <script src="{% static 'Blog/js/jquery.parallax.js' %}"></script>
    <script src="{% static 'Blog/js/jquery.nav.js' %}"></script>
    <script src="{% static 'Blog/js/jquery.backstretch.min.js' %}"></script>
    <script src="{% static 'Blog/js/owl.carousel.min.js' %}"></script>
    <script src="{% static 'Blog/js/smoothscroll.js' %}"></script>
    <script src="{% static 'Blog/js/wow.min.js' %}"></script>
    <script src="{% static 'Blog/js/custom.js' %}"></script>
    </body>
    </html>

**single.html**

<!DOCTYPE html>
    <html lang="en">
    <head>
        {% load static %}
        <title>{
       { blog_info.article_title }}</title>
        <meta name="description" content="">
        <meta name="author" content="">
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=Edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <link rel="stylesheet" href="{% static 'Blog/css/bootstrap.min.css' %}">
        <link rel="stylesheet" href="{% static 'Blog/css/animate.css' %}">
        <link rel="stylesheet" href="{% static 'Blog/css/font-awesome.min.css' %}">
        <link rel="stylesheet" href="{% static 'Blog/css/style.css' %}">
        <link rel="stylesheet" href="{% static 'Blog/code.css' %}">
        <link rel="stylesheet" href="{% static 'Blog/bootstrap-grid.css' %}">
        <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,300,600' rel='stylesheet' type='text/css'>
        <link href='https://fonts.googleapis.com/css?family=Lora:700italic' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="{% static 'Blog/prism.css' %}">
        <script src="{% static 'Blog/prism_patched.min.js' %}"></script>
    </head>
    <body>
    
    <div class="preloader">
        <div class="sk-spinner sk-spinner-pulse"></div>
    </div>
    
    <div class="navbar navbar-default navbar-static-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon icon-bar"></span>
                    <span class="icon icon-bar"></span>
                    <span class="icon icon-bar"></span>
                </button>
                <a href="#" class="navbar-brand">技术文章汇总</a>
            </div>
            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="{% url 'MyHomePage:MyHomeIndex' %}" class="smoothScroll">个人主页</a></li>
                    <li><a href="{% url 'Blog:MyBlog' %}" class="smoothScroll">博客主页</a></li>
                </ul>
            </div>
        </div>
    </div>
    
    <section id="blog-header" class="parallax-section" style="background: url('{ { MEDIA_URL }}{ { blog_info.article_cover }}') 50% 0 repeat-y fixed">
        <div class="container">
            <div class="row">
                <div class="col-md-offset-2 col-md-8 col-sm-12">
                    <h1 class="wow fadeInUp" data-wow-delay="1.6s">每天写一点新东西</h1>
                </div>
            </div>
        </div>
    </section>
    
    <section id="blog" class="parallax-section">
        <div class="container">
            <div class="row">
                <div class="col-md-8 col-sm-7">
                    <div class="blog-content wow fadeInUp" data-wow-delay="1s">
                        <h3>{
       { blog_info.article_title }}</h3>
                        <span class="meta-date">{
       { blog_info.created_date }}</span>
                        <span class="meta-comments">浏览数：{
       { blog_info.read_num }}</span>
                        <span class="meta-author">关键词：{
       { blog_info.article_key_words }}</span>
                        <div class="blog-clear"></div>
                    </div>
                    <div class="content_detail">
                        {
       { blog_detail.blog_detail.detail_content|safe }}
                    </div>
                    {### 评论功能 ###}
                    <div class="blog-comment wow fadeInUp" data-wow-delay="1s">
                        {% load mptt_tags %}
                        <h4>评论区</h4>
                        {% if comments.count != 0 %}
                            <h6>评论区共有 {
       { comments.count }} 条评论</h6>
                            {% recursetree comments %}
                                {% with comment=node %}
                                    <div class="{% if comment.parent %} offset-1 col-11 {% else %} col-12 {% endif %}">
                                        <div class="media-object pull-left">
                                            <img src="{ { MEDIA_URL }}{ { comment.user_image }}" class="img-responsive img-circle" alt="{ { comments.user_id }}">
                                        </div>
                                        <div class="media-body">
                                            <h4 class="media-heading" style="display: inline">
                                                {
       { comment.user }}
                                            </h4>
                                            <h5 style="display: inline">{
       { comment.created|date:"Y-m-d H:i"}}</h5>
                                            
                                            {% if user.is_authenticated %}
                                                <button type="button" style="color: #fff;border-color:#357ebd;background-color:#428bca;" onclick="new_comment({ { blog_info.article_slug }}, { { comment.id }})">
                                                    回复
                                                </button>
                                            {% else %}
                                                <a class="btn btn-light btn-sm text-muted" href="{% url 'UserLogin' %}">
                                                    登录后方可回复
                                                </a>
                                            {% endif %}
                                            <h5>{
       { comment.comment_message|safe }}</h5>
                                        </div>
                                        <div class="modal fade" id="comment_{ { comment.id }}" tabindex="-1" role="dialog" aria-labelledby="CommentModalCenter" aria-hidden="true">
                                            <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
                                                <div class="modal-content" style="height: 400px">
                                                    <div class="modal-header">
                                                        <h5 class="modal-title" id="exampleModalCenterTitle">
                                                            回复 {
       { comment.user }}：</h5>
                                                    </div>
                                                    <div class="modal-body" id="modal_body_{ { comment.id }}"></div>
                                                </div>
                                            </div>
                                        </div>
                                        {% if not comment.is_leaf_node %}
                                            <div class="children">
                                                {
       { children }}
                                            </div>
                                        {% endif %}
                                    </div>
                                {% endwith %}
                            {% endrecursetree %}
                        {% else %}
                            <h6>暂无评论，快来发表你的观点吧</h6>
                        {% endif %}
                    </div>
                    <div class="blog-comment-form wow fadeInUp" data-wow-delay="1s">
                        <h4>发表一下感受吧！</h4>
                        {% if user.is_authenticated %}
                            <form action="{% url 'comment:post_comment' %}?article_slug={ { blog_info.article_slug }}" method="POST">
                                {% csrf_token %}
                                <div class="col-md-12 col-sm-12">
                                    {
       { comment_form.comment_message }}
                                </div>
                                <div class="col-md-3 col-sm-3">
                                    <input name="submit" type="submit" class="form-control" id="submit" value="提交评论">
                                </div>
                            </form>
                        {% else %}
                            <br>
                            <h5 class="row justify-content-center">
                                请<a href="{% url 'UserLogin' %}">登录</a>后回复
                            </h5>
                            <br>
                        {% endif %}
                    </div>
                </div>
    
                <div class="col-md-4 col-sm-5 wow fadeInUp" data-wow-delay="1.3s">
                    <div class="blog-categories">
                        <h3>专栏下文章列表</h3>
                        {% for info in blog_info_all %}
                            {% if blog_info.article_item.id == info.article_item.id %}
                                <li>
                                    <a href="{% url 'Blog:MyBlogDetail' %}?article_slug={ { info.article_slug }}">{
       { info }}</a>
                                </li>
                            {% endif %}
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
    </section>
    
    <footer>
        <div class="container">
            <div class="row">
                <div class="wow fadeInUp col-md-4 col-sm-4" data-wow-delay="0.6s">
                    <a href="{% url 'MyHomePage:MyHomeIndex' %}"><h2>关于我</h2></a>
                </div>
                <div class="wow fadeInUp col-md-5 col-sm-4" data-wow-delay="0.9s">
                    <h2>工作时间</h2>
                    <div>
                        <h5>上午</h5>
                        <h4>9:00 AM - 11:30 PM</h4>
                    </div>
                    <div>
                        <h5>下午</h5>
                        <h4>13:30 PM - 17:00 PM</h4>
                    </div>
                </div>
                <div class="wow fadeInUp col-md-3 col-sm-4" data-wow-delay="1s">
                    <h2>联系方式</h2>
                    <ul class="social-icon">
                        <li><a href="#" class="fa fa-qq wow fadeIn" data-wow-delay="1s"></a></li>
                        <li><a href="#" class="fa fa-wechat wow fadeInUp" data-wow-delay="1.3s"></a></li>
                        <li><a href="#" class="fa fa-mail-forward wow fadeIn" data-wow-delay="1.6s"></a></li>
                    </ul>
                </div>
                <div class="clearfix"></div>
            </div>
        </div>
    </footer>
    
    <script src="{% static 'Blog/js/jquery.js' %}"></script>
    <script src="{% static 'Blog/js/bootstrap.min.js' %}"></script>
    <script src="{% static 'Blog/js/jquery.parallax.js' %}"></script>
    <script src="{% static 'Blog/js/wow.min.js' %}"></script>
    <script src="{% static 'Blog/js/custom.js' %}"></script>
    <script src="{% static 'ckeditor/ckeditor-init.js' %}"></script>
    <script src="{% static 'ckeditor/ckeditor/ckeditor.js' %}"></script>
    
    <script> // 加载 modal function new_comment(article_slug, comment_id) { // 加载编辑器 if ($(modal_body).children().length === 0) { let content = '<iframe src="{% url 'comment:post_comment' %}?article_slug=' + article_slug + '&parent_comment_id=' + comment_id + '" frameborder="0" style="width: 100%; height: 100%;"></iframe>'; $(modal_body).append(content); } ; $(modal_id).modal('show'); } </script>
    </body>
    </html>

[Django3.x]: https://blog.csdn.net/qq_20288327/article/details/120060658
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBATXLmlbDmja7mnag_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/01e07b0ddb2c408b8312dde8e0bce0f2.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBATXLmlbDmja7mnag_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220829/3c11cb6cf1c846bdbfec7ec315368f7e.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBATXLmlbDmja7mnag_size_20_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220829/3d13ced00c9f45128d743a21290ec3d3.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBATXLmlbDmja7mnag_size_20_color_FFFFFF_t_70_g_se_x_16 3]: /images/20220829/1be172105440452dbc7735eb9777f55f.png