Django文章内容页优化

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/chengqiuming/article/details/85390854

一 代码

1 前端代码mysite/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(){
    // 解析markdown为HTML
    editormd.markdownToHTML("editormd-view", {
        htmlDecode      : "style,script,iframe",  // you can filter tags decode
        emoji           : true,
        taskList        : true,
        tex             : true,  // 默认不解析
        flowChart       : true,  // 默认不解析
        sequenceDiagram : true,  // 默认不解析
    });
});
</script>
{% endblock %}

2 发布文章后页面的跳转，修改mysite/templates/article/column/article_post.html

<script type="text/javascript">
function publish_article(){
    var title = $("#id_title").val();
    var column_id = $("#which_column").val();
    var body = $("#id_body").val();
    $.ajax({
        url: "{% url 'article:article_post' %}",
        type: "POST",
        data: {"title":title, "body":body, "column_id":column_id},
        success: function(e){
            if(e=="1"){
            layer.msg("发布成功！");
            //发布成功后的页面跳转
            location.href = "{% url 'article:article_list' %}";
            }else if(e=="2"){
            layer.msg("发布失败！") ;
            }else{
            layer.msg("是不是有没有填写的项目？都必须写，不能空。");
            }
        },
    });
}
</script>

二 运行结果

1 发布文章

跳转到页面

2 文章内容页