Django个人博客搭建1-创建Django项目和第一个App
Django个人博客搭建2-编写文章Model模型,View视图
Django个人博客搭建3-创建superuser并向数据库中添加数据并改写视图
Django个人博客搭建4-配置使用 Bootstrap 4 改写模板文件
Django个人博客搭建5-编写文章详情页面并支持markdown语法
Django个人博客搭建6-对文章进行增删查改
Django个人博客搭建7-对用户登陆注册等需求的实现
Django个人博客搭建8-优化文章模块
Django个人博客搭建9-增加文章评论模块
1. 编写视图函数
打开article/views.py增加文章详情页函数article_detail():
# 文章详情
def article_detail(request, id):
article = ArticlePost.objects.get(id=id)
context = {'article': article}
# 载入模板,并返回context对象
return render(request, 'article/detail.html', context)
2. 编写article/urls.py,配置路由地址:
# 引入path
from django.urls import path
from . import views
# 正在部署的应用的名称
app_name = 'article'
urlpatterns = [
# path函数将url映射到视图
path('article-list/', views.article_list, name='article_list'),
# 新增函数
path('article-detail/<int:id>/', views.article_detail, name='article_detail'),
]
3.编写模板article/detail.html
<!-- extends表明此页面继承自 base.html 文件 -->
{% extends "base.html" %}
{% load staticfiles %}
<!-- 写入 base.html 中定义的 title -->
{% block title %}
文章详情
{% endblock title %}
<!-- 写入 base.html 中定义的 content -->
{% block content %}
<!-- 文章详情 -->
<div class="container">
<div class="row">
<!-- 标题及作者 -->
<h1 class="col-12 mt-4 mb-4">{{ article.title }}</h1>
<div class="col-12 alert alert-success">作者:{{ article.author }}</div>
<!-- 文章正文 -->
<div class="col-12">
<p>{{ article.body }}</p>
</div>
</div>
</div>
{% endblock content %}
然后我们就可以在浏览器中输入 http://127.0.0.1:8000/article/article-detail/1/ 查看第一篇文章了
4.优化网页入口
改写header.html,让用户可通过导航栏右侧的文章链接返回首页:
<!-- 定义导航栏 -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<!-- 导航栏商标 -->
<a class="navbar-brand" href="#">我的博客</a>
<!-- 导航入口 -->
<div>
<ul class="navbar-nav">
<!-- 条目 -->
<li class="nav-item">
<!-- 修改这里 -->
<a class="nav-link" href="{% url 'article:article_list' %}">文章</a>
</li>
</ul>
</div>
</div>
</nav>
这样点击文章链接就能直接返回首页
同样修改阅读本文的按钮链接:
<!-- extends表明此页面继承自 base.html 文件 -->
{% extends "base.html" %}
{% load staticfiles %}
<!-- 写入 base.html 中定义的 title -->
{% block title %}
首页
{% endblock title %}
<!-- 写入 base.html 中定义的 content -->
{% block content %}
<!-- 定义放置文章标题的div容器 -->
<div class="container">
<div class="row mt-2">
{% for article in articles %}
<!-- 文章内容 -->
<div class="col-4 mb-4">
<!-- 卡片容器 -->
<div class="card h-100">
<!-- 标题 -->
<h4 class="card-header">{{ article.title }}</h4>
<!-- 摘要 -->
<div class="card-body">
<p class="card-text">{{ article.body|slice:'100' }}...</p>
</div>
<!-- 注脚 -->
<div class="card-footer">
<!-- 修改这里 -->
<a href="{% url 'article:article_detail' article.id %}" class="btn btn-primary">阅读本文</a>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
{% endblock content %}
这样点击阅读本文就能直接进入文章详情页了
5.令其支持markdown语法
首先安装markdown:
pip install markdown
然后修改article/views.py的article_detail():
# 文章详情
def article_detail(request, id):
article = ArticlePost.objects.get(id=id)
article.body = markdown.markdown(article.body,
extensions=[
# 包含 缩写、表格等常用扩展
'markdown.extensions.extra',
# 语法高亮扩展
'markdown.extensions.codehilite',
])
context = {'article': article}
# 载入模板,并返回context对象
return render(request, 'article/detail.html', context)
修改templates/article/detail.html:
<!-- extends表明此页面继承自 base.html 文件 -->
{% extends "base.html" %}
{% load staticfiles %}
<!-- 写入 base.html 中定义的 title -->
{% block title %}
文章详情
{% endblock title %}
<!-- 写入 base.html 中定义的 content -->
{% block content %}
<!-- 文章详情 -->
<div class="container">
<div class="row">
<h1 class="col-12 mt-4">{{ article.title }}</h1>
<div class="col-12 alert alert-success">作者: {{ article.author }}</div>
<div class="col-12">
<!-- 修改这个部分 -->
<p>{{ article.body|safe }}</p>
<!-- 修改这个部分 -->
</div>
</div>
</div>
{% endblock content %}
Django出于安全的考虑,会将输出的HTML代码进行转义,这使得article.body中渲染的HTML文本无法正常显示。管道符|是Django中过滤器的写法,而**|safe就类似给article.body贴了一个标签,表示这一段字符不需要进行转义**了。
修改完成后,在admin后台添加markdown语法的文章
#题目
if __name__ == "__main__":
print("markdown语法测试")
代码高亮设置
在static目录中新建一个目录md_css/,用于放置代码高亮的样式文件
打开命令行:安装Pygments
pip install Pygments
进入杠杆船舰的md_css目录中输入Pygments指令:
pygmentize -S monokai -f html -a .codehilite > monokai.css
生成命令中的 -a 参数需要与真实页面中的 CSS Selector 相对应,即**.codehilite这个字段在有些版本中应写为.highlight**。如果后面的代码高亮无效,很可能是这里出了问题。
完成后可以看见文件夹中多出来一个css文件
之后我们修改base.html 文件
<!-- 载入静态文件 -->
{% load staticfiles %}
<!DOCTYPE html>
<!-- 网站主语言 -->
<html lang="zh-cn">
<head>
<!-- 网站采用的字符编码 -->
<meta charset="utf-8">
<!-- 预留网站标题的位置 -->
<title>{% block title %}{% endblock %}</title>
<!-- 引入bootstrap的css文件 -->
<link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.min.css' %}">
<!-- 修改这里 -->
<link rel="stylesheet" href="{% static 'md_css/monokai.css' %}">
<!-- 修改这里 -->
</head>
<body>
<!-- 引入导航栏 -->
{% include 'header.html' %}
<!-- 预留具体页面的位置 -->
{% block content %}{% endblock content %}
<!-- 引入注脚 -->
{% include 'footer.html' %}
<!-- bootstrap.js 依赖 jquery.js 和popper.js,因此在这里引入 -->
<script src="{% static 'jquery/jquery-3.3.1.js' %}"></script>
<script src="{% static 'popper/popper-1.14.4.js' %}"></script>
<!-- 引入bootstrap的js文件 -->
<script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
</body>
</html>
保存后我们查看文章详情:
可以看见支持markdown语法并且代码已经高亮显示
Django个人博客搭建1-创建Django项目和第一个App
Django个人博客搭建2-编写文章Model模型,View视图
Django个人博客搭建3-创建superuser并向数据库中添加数据并改写视图
Django个人博客搭建4-配置使用 Bootstrap 4 改写模板文件
Django个人博客搭建5-编写文章详情页面并支持markdown语法
Django个人博客搭建6-对文章进行增删查改
Django个人博客搭建7-对用户登陆注册等需求的实现
Django个人博客搭建8-优化文章模块
Django个人博客搭建9-增加文章评论模块