MAC

十二、Django2.1 搭建多用户的博客网站——使用Markd

2019-02-16  本文已影响136人  27efec53a72d

目录：Django 2.1 从零开始搭建博客网站系列

服务器环境搭建（选学）

小试牛刀——简单的博客网站

庖丁解牛——多用户的博客网站之用户模块

庖丁解牛——多用户的博客网站之文章模块

华丽转身——多用户的博客网站之扩展功能

正文：

1、引入markdown插件

下载 Markdown 文件包
下载成功后，把文件包内的所有文件复制到 ./static/editor 目录中

2、修改模板

修改 ./templates/article/column/article_post.html
增加以下代码引入相关css文件

<link rel="stylesheet" href="{% static 'editor/css/style.css' %}">
<link rel="stylesheet" href="{% static 'editor/css/editormd.css' %}">

将这句代码

<div class="col-md-10 text-left">{{article_post_form.body}}</div>

替换成以下代码

<div id="editormd" class="col-md-10 text-left">
    <textarea style="display:none;" id="id_body"></textarea>
</div>

最后增加以下代码引入js相关文件

<script type="text/javascript" src='{% static "editor/editormd.min.js" %}'></script>
<script type="text/javascript">
    $(function() {
        var editor = editormd("editormd", {
            width : "100%",
            height : 640,
            syncScrolling : "single",
            path : "{% static 'editor/lib/' %}"
        });
    });
</script>

重新运行Django，效果如图：


使用Markdown作为编辑器1 使用Markdown作为编辑器2

3、显示文章标题列表

在 ./article/views.py 中新增 article_list 方法

@login_required(login_url='/account/login')
def article_list(request):
    articles = ArticlePost.objects.filter(author=request.user)
    return render(request, "article/column/article_list.html", {"articles": articles})

创建 ./templates/article/column/article_list.html

{% extends "article/base.html" %}
{% load staticfiles %}
{% block title %}articles list{% endblock %}
{% block content %}
<div>
    <table class="table table-hover">
        <tr>
            <td>序号</td>
            <td>标题</td>
            <td>栏目</td>
            <td>操作</td>
        </tr>
        {% for article in articles %}
        <tr id={{ article.id }}>
            <td>{{ forloop.counter }}</td>
            <td>{{ article.title }}</td>
            <td>{{ article.column }}</td>
            <td>--</td>
        </tr>
        {% endfor %}
    </table>
</div>
{% endblock %}

修改 ./article/urls.py 新增如下路径

path('article-list/', views.article_list, name="article_list"),

修改 ./templates/article/leftslider.html 新增如下代码

<p><a href="{% url 'article:article_list'%}">文章列表</a></p>

访问 http://127.0.0.1:8000/article/article-list/ 页面如下：

文章列表

注意：在 ./article/models.py 中 class ArticlePost 中有一行代码是 ordering = ("-updated",) 表示文章列表按照发布时间倒序排列

4、查看文章

修改 ./article/urls.py 新增如下路径

from django.urls import re_path

re_path('article-detail/(?P<id>\d+)/(?P<slug>[-\w]+)/$', views.article_detail, name="article_detail"),

在 ./article/views.py 中新增 article_detail方法

from django.shortcuts import  get_object_or_404

@login_required(login_url='/account/login')
def article_detail(request, id, slug):
    article = get_object_or_404(ArticlePost, id=id, slug=slug)
    return render(request, "article/column/article_detail.html", {"article": article})

修改 ./templates/article/column/article_list.html 把下面这行代码

<td>{{ article.title }}</td>

修改为

<td><a href="{{ article.get_absolute_url }}">{{ article.title }}</a></td>

创建 ./templates/article/column/article_detail.html

{% extends "article/base.html" %}
{% load staticfiles %}
{% block title %}articles list{% endblock %}
{% block content %}
<div>
    <header>
        <h1>{{ article.title }}</h1>
        <p>{{ user.username }}</p>
    </header>

    <div id='editormd-view'>
        {{ article.body }}
    </div>
</div>
{% endblock %}

访问 http://127.0.0.1:8000/article/article-list/ 页面如下：

带有超链接的文章列表

点击某篇文章的标题，页面如下：


文章详情

以上只是简单的展示了文章内容，并没有按照Markdown的排版格式显示，下面我们就来修改 ./templates/article/column/article_detail.html 按照排版格式来显示文章内容

{% extends "article/base.html" %}
{% load staticfiles %}
{% block title %}articles list{% endblock %}
{% block content %}
<div>
    <header>
        <h1>{{ article.title }}</h1>
        <p>{{ user.username }}</p>
    </header>

    <link rel="stylesheet" href="{% static 'editor/css/editormd.preview.css' %}"/>
    <div id='editormd-view'>
        <textarea id="append-test" style="display:none;">
{{ article.body }}
        </textarea>
    </div>
</div>
<script src='{% static "js/jquery.js" %}'></script>
<script src='{% static "editor/lib/marked.min.js" %}'></script>
<script src='{% static "editor/lib/prettify.min.js" %}'></script>
<script src='{% static "editor/lib/raphael.min.js" %}'></script>
<script src='{% static "editor/lib/underscore.min.js" %}'></script>
<script src='{% static "editor/lib/sequence-diagram.min.js" %}'></script>
<script src='{% static "editor/lib/flowchart.min.js" %}'></script>
<script src='{% static "editor/lib/jquery.flowchart.min.js" %}'></script>
<script src='{% static "editor/editormd.js" %}'></script>
<script type="text/javascript">
$(function(){
    editormd.markdownToHTML("editormd-view", {
        htmlDecode: "style, script, iframe",
        emoji: true,
        taskList:true,
        tex:true,
        flowChart:true,
        sequenceDiagram : true,
    });
});

</script>
{% endblock %}

特别注意：{{ article.body }}前面不能有缩进，否则无法正常显示。

此时再点击某篇文章的标题，页面如下：


新排版格式的文章详情

补充一个细节，当文章发布完，需要让页面自动跳转到文章列表页，因此需要修改./templates/article/column/article_post.html 中的一段js代码

$.ajax({
        url: "{% url 'article:article_post' %}",
        type: "POST",
        data: {"title":title, "body":body, "column_id":column_id, "tags":JSON.stringify(article_tags)},
        success: function(e){
            if(e=="1"){
                //layer.msg("successful");
                location.href = "{% url 'article:article_list' %}";//修改后：文章发布成功后跳转到文章列表
            }else if(e=="2"){
                layer.msg("sorry.") ;
            }else{
                layer.msg("项目名称必须写，不能空。");
            }
        },
    });

你可以发布一篇文章，验证一下是否页面自动跳转到了文章列表页。

上一篇下一篇

猜你喜欢

热点阅读