一、 分頁展示
當你的博客擁有的文章很多時候,對文章進行分頁就很有必要了。這裏我們使用Django自帶的分頁模塊進行分頁處理。
1. views視圖函數
website/blog/views.py 直接註釋了…
from blog.models import Categorys,Tags,Article
from django.core.paginator import Paginator,PageNotAnInteger,EmptyPage
from django.shortcuts import render
def index(request):
article_list = Article.objects.all()
paginator = Paginator(article_list, 1) # arg1-要分頁的數據, arg2-每頁最大容量, arg3-最後一頁少於n條時合併入上一頁
try:
# GET請求方式,get()獲取指定Key值所對應的value值
# 獲取page的值,如果沒有,則設置使用默認值1
num = request.GET.get('page','1')
# 獲取第幾頁
article_list = paginator.page(num)
except PageNotAnInteger:
# 如果輸入的頁碼數不是整數,那麼顯示第一頁數據
article_list = paginator.page(1)
except EmptyPage:
# 輸入的是大於最大分頁數的整數,則返回最後一頁
article_list = paginator.page(paginator.num_pages)
# 獲取當前頁前後3頁的頁碼。
total = paginator.num_pages
current_page = article_list.number
if total-current_page >=3:
right = current_page + 3
else:
right = total
if current_page - 1 >=3:
left = current_page -3
else:
left = 1
page_range = range(left,right)
return render(request, 'index.html', {'article_list': article_list,'page_range':page_range})
2. index模板的 {% block content %}塊增加以下內容
website/templates/index.html:
<nav style="text-align: center">
<ul class="pagination ">
{% if article_list.has_previous %}
<li><a href="/blog/?page={{ article_list.previous_page_number }}">上一頁</a></li>
{% else %}
<li class="disabled"><a href="#">上一頁</a></li>
{% endif %}
{% for page in page_range %}
{% if page != article_list.number %}
<li><a href="/blog/?page={{ page }}">{{ page }}</a></li>
{% else %}
<li class="disabled"><a href="/blog/?page={{ page }}">{{ page }}</a></li>
{% endif %}
{% endfor %}
{% if article_list.has_next%}
<li><a href="/blog/?page={{ article_list.next_page_number }}">下一頁</a></li>
{% else %}
<li class="disabled"><a href="#">下一頁</a></li>
{% endif %}
</ul>
</nav>
二、 詳情頁展示
1. 首先配置博客詳情頁
配置blog應用的urls, website/blog/urls:
urlpatterns = [
url(r'^$', views.index, name='index'),
url(r'^(?P<blog_id>[0-9]+)$', views.article, name='article'), # 新增博客詳情頁的url配置
]
配置對應的詳情頁的視圖函數, website/blog/views.py:
def article(request, blog_id):
article = Article.objects.get(id=blog_id)
article.page_view = article.page_view + 1 # 每次訪問博客文章時候,博客訪問量+1
article.save() # 博客文章的訪問量發生了改變,記得講改變後的結果寫入數據庫
return render(request,'article.html',{'article': article})
修改article.html來展示文章詳情頁模板,website/templates/article.html:
{% extends 'base.html' %}
{% block title %}博客詳情頁{% endblock %}
{% block content %}
<h3>博客ID爲{{ article.id }}的博客題目: {{ article.title }}</h3>
{% endblock %}
現在啓動項目,輸入文章的URL就可以查看對應文章了,結果:
2. 在首頁中利用反向解析來訪問博客文章詳情頁
先來理解下什麼是反向解析,反向解析可以這麼理解:給你的url路由起一個別名,然後在使用對應的url時候就可以用這個別名來代替它對應的url,它典型的作用就是當你的網站有太多的url路由時候,使用反向解析可以避免因爲正則匹配不正確導致的路由分發錯誤。
要使用反向解析,首先需要在django項目中給應用註冊命名空間。例如你想使用blog應用的文章詳情頁article的url,你可以在模板中正向拼接,href = “/blog/{{article.id}}”, 也可以使用反向解析href="{% url “blog:article” article.id %}’"
先給我們的blog應用註冊命名空間,你可以在項目級的urls中配置,或者你可以在應用級別的ursl中配置:
website/website/urls.py:
url(r'^blog/', include('blog.urls', namespace='blog') ), # include路由轉發
或者website/blog/urls.py中給app_name命名:
app_name = 'blog'
接着找到我們index.html模板中文章標題的href鏈接,之前我們設置爲了#,現在我們調整一下,利用反向解析來跳轉訪問博客文章的詳情頁。
website/templates/index.html:
<h3>文章標題: <a href="{% url "blog:article" article.id %}">{{ article.title }}</a></h3>
現在啓動應用就可以在博客首頁中點擊文章題目實現跳轉了。
3. 完善博客詳情頁展示
博客文章應該展示所有內容,重新修改article模板,
website/templates/article.html:
{% extends 'base.html' %}
{% block title %}博客文章{% endblock %}
{% block content %}
<div class="container">
<div class="row">
<div class="col-md-9">
<h1>{{ article.title }}</h1>
<p>
<strong>分類:
{% for category in article.categorys.all %}
{{ category.category_name }}
{% endfor %}
<br/>標籤:
{% for tag in article.tags.all %}
{{ tag.tag_name }}
{% endfor %}
<br/>作者: {{ article.auth }}
創建時間: {{ article.created_time|date:'Y年m月d日' }}
瀏覽量:
{{ article.page_view }}
</strong>
</p>
{% if article.img %}
<div><img src="{{ article.img.url }}" alt="博客配圖" width="50%"/></div>
{% endif %}
<hr />
<p>
{{ article.body|safe }}
</p>
</div>
</div>
</div>
{% endblock %}
結果:
三、 博客正文利用markdown編輯及預覽
上面可以看到博客正文的內容很亂,沒有排版,現在我們修改代碼讓其前端頁面展示的效果變爲markdown語法格式(markdown就是一種排版的語法格式,csdn寫文章的一種格式就是markdown)
1. 讓前端正文顯示爲markdown格式.
首先需要給環境安裝包,我這裏安裝的是django-markdownx,
>>>pip install django-markdownx # 它會自動爲你安裝markdown
接着需要給Article添加一個方法,這個方法將我們admin後臺管理輸入的博客正文修改爲markdown的格式,然後傳給前端頁面。
website/blog/models.py:
from markdownx.utils import markdownify # 先導入包
class Article(models.Model):
....
def text_markdownify(self): # 在Article中加入該方法,markdownify可以將純文本修改爲markdown格式
return markdownify(self.body) # 把博客文章的純文本用markdownx處理
....
website/templates/article.html:
{# {{ article.body}} #} # 替換爲下述代碼,
{{ article.text_markdownify | safe }} # 這邊一定要記得加上safe過濾器,不加顯示的都是html格式的文本
2. admin 編輯頁面即時顯示markdown
https://github.com/neutronX/django-markdownx 官方教程
首先website/website/settings.py:
INSTALLED_APPS = [
'''
'markdownx',
]
給配置路由 website/website/urls.py:
url(r'^markdownx/', include('markdownx.urls')),
修改模型website/blog/models.py:
from markdownx.models import MarkdownxField
class Article(models.Model):
'''
# body = models.TextField(verbose_name='正文')
body = MarkdownxField(verbose_name='正文')
'''
admin進行註冊 website/blog/admin.py:
from markdownx.admin import MarkdownxModelAdmin
class ArticleAdmin(MarkdownxModelAdmin): # MarkdownxModelAdmin繼承自admin.ModelAdmin
list_display = ['title','auth','created_time','update_time','abstract']
admin.site.register(Article, ArticleAdmin)
admin博客文章效果:
追加: 插件django-mdeditor使用以後發現更方便。
https://www.cnblogs.com/crime/p/11022714.html