目录：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 搭建多用户的博客网站——文章标签
- 未完待续
项目源码下载：https://github.com/jt1024/lehehe
正文：
1、展示前台文章列表
1.1 创建 ./article/list_views.py
from django.shortcuts import render
from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger
from .models import ArticlePost
def article_titles(request):
articles_title = ArticlePost.objects.all()
paginator = Paginator(articles_title, 2)
page = request.GET.get('page')
try:
current_page = paginator.page(page)
articles = current_page.object_list
except PageNotAnInteger:
current_page = paginator.page(1)
articles = current_page.object_list
except EmptyPage:
current_page = paginator.page(paginator.num_pages)
articles = current_page.object_list
return render(request, "article/list/article_titles.html", {"articles": articles, "page": current_page})
实际上，可以把上述方法写在 ./article/views.py 中，此处这么些主要是让大家理解：视图函数的文件不一定都是 views.py
1.2 创建 ./templates/article/list/article_titles.html
{% extends "base.html" %}
{% block title %} articles {% endblock %}
{% block content %}
<div class="row text-center vertical-middle-sm">
<h1>阅读，丰富头脑，善化行为</h1>
</div>
<div class="container">
{% for article in articles %}
<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">{{article.title}}</h4>
</a>
<p class="list-group-item-text">作者:{{article.author.username}}</p>
<p class="list-group-item-text">概要:{{article.body|slice:'70'| linebreaks}}</p>
</div>
{% endfor %}
{% include "paginator.html" %}
</div>
{% endblock %}
1.3 增加路由
在 ./article/urls.py 中添加新的路由
path('list-article-titles/', list_views.article_titles, name="article_titles"),
1.4 测试效果
访问 http://127.0.0.1:8000/article/list-article-titles/
前台文章列表
2、展示前台文章内容
2.1 修改视图函数
在 ./article/list_views.py 中新增 方法
from django.shortcuts import get_object_or_404
def article_detail(request, id, slug):
article = get_object_or_404(ArticlePost, id=id, slug=slug)
return render(request, "article/list/article_content.html", {"article": article})
2.2 修改model
在 ./article/models.py 的ArticlePost内部新增以下代码
def get_url_path(self):
return reverse("article:article_content", args=[self.id, self.slug])
本来 get_absolute_url 就可以取到文章的url地址，这里我们却新增了
get_url_path 来获取文章的url地址，为什么呢？
我们来看看get_absolute_url方法：
def get_absolute_url(self):
return reverse("article:article_detail", args=[self.id, self.slug])
这里面会执行 ./article/views.py 中的 article_detail 方法，这个方法代码如下：
@login_required(login_url='/account/login')
@require_POST
@csrf_exempt
def del_article(request):
article_id = request.POST['article_id']
try:
article = ArticlePost.objects.get(id=article_id)
article.delete()
return HttpResponse("1")
except:
return HttpResponse("2")
可以看出，执行这个方法时需要先登录，而我们想把前台文章展示给所有用户，包括游客，所以我们需要重新定义一个不需要登录就能查看文章内容的方法。因此定义了这个get_url_path方法。
2.3 创建 ./templates/article/list/article_content.html
{% extends "base.html" %}
{% load staticfiles %}
{% block title %}articles list{% endblock %}
{% block content %}
<div class="container">
<div class="col-md-9">
<header>
<h1>{{ article.title }}</h1>
<p>{{ article.author.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>
</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 %}
2.4 增加路由
在 ./article/urls.py 中添加新的路由
path('article-content/<int:id>/<slug:slug>/', list_views.article_detail, name="article_content"),
2.5 测试效果
访问 http://127.0.0.1:8000/article/list-article-titles/ 点击某一篇文章的标题，会打开如下页面
前台文章内容
网友评论