目录：Django 2.1 从零开始搭建博客网站系列
服务器环境搭建（选学）
小试牛刀——简单的博客网站
庖丁解牛——多用户的博客网站之用户模块
- 三、Django2.1 搭建多用户的博客网站——登录
- 四、Django2.1 搭建多用户的博客网站——注册
- 五、Django2.1 搭建多用户的博客网站——修改密码
- 六、Django2.1 搭建多用户的博客网站——重置密码
- 七、Django2.1 搭建多用户的博客网站——维护个人详细信息
- 八、Django2.1 搭建多用户的博客网站——头像上传
- 九、Django2.1 搭建多用户的博客网站——用户模块小结
庖丁解牛——多用户的博客网站之文章模块
- 十、Django2.1 搭建多用户的博客网站——文章栏目
- 十一、Django2.1 搭建多用户的博客网站——简单的文章发布
- 十二、Django2.1 搭建多用户的博客网站——使用Markdown发布文章
- 十三、Django2.1 搭建多用户的博客网站——修改和删除文章
- 十四、Django2.1 搭建多用户的博客网站——向用户展示文章
- 十五、Django2.1 搭建多用户的博客网站——文章模块小结
华丽转身——多用户的博客网站之扩展功能
- 十六、Django2.1 搭建多用户的博客网站——文章点赞功能
- 十七、Django2.1 搭建多用户的博客网站——统计文章浏览次数
- 十八、Django2.1 搭建多用户的博客网站——文章评论功能
- 十九、Django2.1 搭建多用户的博客网站——使用自定义模板标签
- 二十、Django2.1 搭建多用户的博客网站——文章标签
- 二十一、Django2.1 搭建多用户的博客网站——美图模块
-
未完待续
项目源码下载：https://github.com/jt1024/lehehe
正文：
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("项目名称必须写，不能空。");
}
},
});
你可以发布一篇文章，验证一下是否页面自动跳转到了文章列表页。
网友评论