新手學習——用django搭建個人博客_day4

一、 分頁展示

當你的博客擁有的文章很多時候,對文章進行分頁就很有必要了。這裏我們使用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>文章標題:&nbsp;&nbsp;<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>分類:&nbsp;&nbsp;
                    {% for category in article.categorys.all %}
                        {{ category.category_name }}&nbsp;&nbsp;
                    {% endfor %}

                    <br/>標籤:&nbsp;&nbsp;
                    {% for tag in article.tags.all %}
                        {{ tag.tag_name }}&nbsp;&nbsp;
                    {% endfor %}

                    <br/>作者:&nbsp;&nbsp;{{ article.auth }}&nbsp;&nbsp;&nbsp;&nbsp;
                    創建時間:&nbsp;&nbsp;{{ article.created_time|date:'Y年m月d日' }}
                    &nbsp;&nbsp;&nbsp;&nbsp;瀏覽量:
                        &nbsp;&nbsp;{{ 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

發佈了12 篇原創文章 · 獲贊 7 · 訪問量 1萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章