奇幻网站显示分页和支持markdown

最新推荐文章于 2024-06-16 15:08:50 发布

原创最新推荐文章于 2024-06-16 15:08:50 发布 · 501 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#markdown #paginate #python #django

项目同时被 2 个专栏收录

9 篇文章

订阅专栏

简单博客开发

8 篇文章

订阅专栏

本文介绍如何在Django博客中实现分页功能及Markdown文本的支持，包括使用Django内置的分页模块和Markdown模块，以及如何在视图和模板中进行配置。

奇幻网站开发过程

第七章显示分页功能

1 需求,每次将文章都全部显示,太多了.所以要增加分页功能,django有个pageinate模块提供了分页的实现.通用视图中已经包含了了分页功能,我们只需要简单设置一下就好了.

2 视图中增加分页功能blog/views.py

class IndexView(ListView):
    '''
        博客首页视图,获取文章列表.
    '''
    model =Post
    template_name = "blog/index.html"
    context_object_name = "post_list"
    #指定paginate_by属性后自动开启分页功能,其值代表每一页包含多少篇文章
    paginator_by = 5

3 修改模板blog/index.html

{% extends "base.html" %}

{% load staticfiles %}

$.ajaxSetup({
    data: {csrfmiddlewaretoken: '{{ csrf_token }}' },
});

{% block link %}
    <link rel="stylesheet" href="{% static 'blog/css/index.css' %}"/>
    

    <script>
        $(function(){
            //获取所有标题的a标签
             var $TitleA=$("#index_left a")
            //获取文章主题对象
            var $PostBody =$("#post_body")
            //获取显示文章标题对象
            var $PostTitle = $("#post_title")
            //为所有a标签绑定点击事件
            // console.log($TitleA)
            $TitleA.click(function(){
                //发送异步请求,
                // console.log($(this))
                //回调函数
                var $Durl = $(this).attr("href")
                var $Title =$(this).text()
                // console.log($Title)
                // console.log($(this).attr('href'))
                $.get(
                    $Durl,
                    null,
                    function(data){
                        // console.log(data)
                        $PostTitle.text($Title)
                        var $show_data=data.split(";")[1]
                        // console.log(show_data)
                        $PostBody.html($show_data)
                    }
                    )
                return false
            })
        })
    </script>
{% endblock link %}

{% block base_left %}
    <ul class="nav" id="index_left">
        <li><h5 class="text-center bg-col-FAD bd-rd">所有文章</h5></li>
    {% for post in object_list %}       
            <li><a href="{% url 'blog:detail' post.pk %}">{{ post.title }}</a></li>
        
        
    {% empty %}
        <li>暂时没有文章</li>
    {% endfor %}            
    </ul>
    <ul class="nav navbar-nav ul-border">
        
                {% if is_paginated %}
                    {% if page_obj.has_previous %}
                        <li  class="f-si bd-rd bg-col-gre "><a class="f-col-r" href="?page={{ page_obj.previous_page_number }}">上一页</a></li>
                    {% endif %}
                    <li><p class="f-col-b mar-gin" href="#" class="current">第{{ page_obj.number }}页/共{{ paginator.num_pages }}页</p></li>
                    {% if page_obj.has_next %}
                        <li  class="f-si bd-rd bg-col-gre"><a class="f-col-r" href="?page={{ page_obj.next_page_number }}">下一页</a></li>
                    {% endif %}
                {% endif %}
            
    </ul>

{% endblock base_left %}

{% block base_center %}
    {% for post in post_list %}
        {% if forloop.first %}
            
                    <h2 id="post_title" class="text-center">{{ post.title }} </h2>

                    <p id="post_body">{{ post.body|safe}} </p>
                
        {% endif %}

    {% endfor %}
{% endblock base_center %}




{% load blog_tags %}
{% block base_right %}
    {% get_category as cate_list %}
    {% get_mark as mark_list %}
    <ul class="nav" >
        <li ><h5 class="text-center bg-col-FAD bd-rd">文章分类</h5></li>
        {% for cate_obj in cate_list %}
            <li><a href="#">{{ cate_obj.name }}({{ cate_obj.post_set.count }} 篇)</a></li>
        {% empty %}
        <li>暂时没有分类</li>
        {% endfor %}
    </ul>

    <ul class="nav">

        <li ><h5 class=" text-center bg-col-FAD bd-rd">文章标签</h5></li>
        {% for mark_obj in mark_list %}
            <li><a href="#">{{ mark_obj.name }} ({{ mark_obj.num_post }}篇) </a></li>
        {% empty %}
            <li>暂时没有标签</li>
        {% endfor %}
    </ul>
{% endblock base_right %}

第八章支持markdown

1 安装markdown模块和pygments模块.,下载一个样式包到blog/css中,支持高亮.(我的git中有一个,)

pip install markdown

pip install Pygments

2 将markdown文本渲染成标准的html文本,在视图中编写.blog/biews.py

from django.shortcuts import render
from django.http import JsonResponse
from django.core.paginator import Paginator
from django.views.generic import ListView,DetailView
from .models import Post

import markdown

# Create your views here.
'''
使用通用视图
'''
class IndexView(ListView):
    '''
        博客首页视图,获取文章列表.
    '''
    model =Post
    template_name = "blog/index.html"
    context_object_name = "post_list"
    #指定paginate_by属性后自动开启分页功能,其值代表每一页包含多少篇文章
    paginate_by = 5
    
class PostDetailView(DetailView):
    '''
        返回每一个文章的具体内容
    '''
    model = Post
    template_name="blog/detail.html"
    context_object_name="post"

    def get_object(self,queryset=None):
        #重写get_object方法,是因为要对post的body进行渲染
        post =super(PostDetailView,self).get_object(queryset=None)
        #通过markdown对post.body进行渲染
        post.body = markdown.markdown(post.body,
                                extensions=[
                                    'markdown.extensions.extra',
                                    'markdown.extensions.codehilite',
                                    'markdown.extensions.toc',
                                ])
        return post

3 将模板标记为安全模式,因为django自动为模板转义blog/detail.html

$.ajaxSetup({
    data: {csrfmiddlewaretoken: '{{ csrf_token }}' },
});
{{ post.body |safe}}

4 现在有个问题,因为我们默认打开每一页的第一篇文章,他是在首页视图中处理的,没有经过markdown渲染,因此跟尴尬,每一次打开和翻页的时候,他都没有渲染.所以为了渲染,每次打开新的网页或者新的一页我们就立马用js请求文章内容.

所以修改index.html中的js代码

<script>
        $(function(){
            //获取所有标题的a标签
             var $TitleA=$("#index_left a")
            //获取文章主题对象
            var $PostBody =$("#post_body")
            //获取显示文章标题对象
            var $PostTitle = $("#post_title")
            //为所有a标签绑定点击事件
            // console.log($TitleA[0])
            
            $TitleA.click(function(){
                //发送异步请求,
                // console.log($(this))
                //回调函数
                var $Durl = $(this).attr("href")
                var $Title =$(this).text()
                // console.log($Title)
                // console.log($(this).attr('href'))
                $.get(
                    $Durl,
                    null,
                    function(data){
                        // console.log(data)
                        $PostTitle.text($Title)
                        var $show_data=data.split(";")[1]
                        // console.log(show_data)
                        $PostBody.html($show_data)
                    }
                    )
                return false
            })

            var $first=$("#index_left a:eq(0)")
            console.log($first.attr('href'))
            $.get(
                    $first.attr('href'),
                    null,                   
                    function(data){
                        console.log(data)
                        $PostTitle.text($first.text())
                        var $show_data=data.split(";")[1]
                        // // console.log(show_data)
                        $PostBody.html($show_data)
                    }
                )
        })
    </script>