登录        注册
本站基于Django开发,源码 Github 欢迎 Fork、Star。由于站点升级导致评论区留言信息丢失,欢迎前来发表新的评论

Django个人博客开发十一 | 博客首页开发三

Django stormsha 1756浏览 210喜欢 0评论
本渣渣不专注技术,只专注使用技术,不是一个资深的coder,是一个不折不扣的copier

Django个人博客开发九 | 整理项目结构 结构梳理章节已经分析过了,分类页面、归档页面、标签页面都是都是一样的,只是路由不一样而已

所以这里以 生活笔记、关于自己为例讲解这一类页面

1、渲染分类页面数据

首先制作一个四区模板,也即文章列表模块

在 blog -> templates 中新建文件 content.html

生活笔记分类

blog -> templates -> content.html

{%extends 'base_right.html'%}

{% block description %}
    <meta name="description" content="{% get_title category as c %}{{ c.description }}"/>
{% endblock description %}
{% block keywords %}
    <meta name="keywords" content="{% get_title category as c %}{{ c.keywords }}"/>
{% endblock keywords %}
{% block title %}{% get_title category as c %}静觅丨{{ c.name }}{% endblock title %}

{% block body %}
    <div class="content-wrap">
        <div class="content">
            <header class="archive-header">
                <h1><i class="fa fa-folder-open"></i>  &nbsp;分类:{{ category }}
                    <a title="订阅福利专区" target="_blank" href="{% url 'blog:category' resources '' %}"><i class="rss fa fa-rss"></i></a>
                </h1>
            </header>
            {% for article in page_obj %}
            <article class="excerpt">
                <header>
                    <a class="label label-important" href="/category/{{ article.category.bigcategory.name }}/{{ article.category.name|lower }}">{{ article.category.name }}<i class="label-arrow"></i></a>
                    <h2><a target="_blank" href="/article/{{ article.slug }}" title="{{ article.title }}">{{ article.title }} </a></h2>
                </header>
                <div class="focus"><a target="_blank" href="/article/{{ article.slug }}">
                    <img class="thumb" width="200" height="123" src="{{ article.img_link }}" alt="{{ article.title }}" /></a>
                </div>
                <span class="note"> {{ article.summary }}</span>
                <p class="auth-span">
                    <span class="muted"><i class="fa fa-user"></i> <a href="/author/{{ article.author }}">{{ article.author }}</a></span>
                    <span class="muted"><i class="fa fa-clock-o"></i> {{ article.create_date|date:'Y-m-d'}}</span>
                    <span class="muted"><i class="fa fa-eye"></i> {{ article.views }}浏览</span>
                    <span class="muted"><i class="fa fa-comments-o"></i>
                        <a target="_blank" href="/article/{{ article.slug }}#comments">评论</a></span>
                    <span class="muted"><a href="javascript:;" data-action="ding" data-id="455" id="Addlike" class="action">
                        <i class="fa fa-heart-o"></i><span class="count">{{ article.love }}</span>喜欢</a>
                    </span>
                </p>
            </article>
        {% empty %}
                <div class="no-post">当前分类下还没有发布的文章!</div>
        {% endfor %}
{% if is_paginated %}
            <div class="pagination">
                <ul>
                    {% if first %}
                        <li><a href="?page=1">1</a></li>
                    {% endif %}
                    {% if left %}
                        {% if left_has_more %}
                            <li><span>...</span></li>
                        {% endif %}
                        {% for i in left %}
                            <li class="prev-page"><a href="?page={{ i }}">{{ i }}</a></li>
                        {% endfor %}
                    {% endif %}
                    <li class="active"><a href="?page={{ page_obj.number }}">{{ page_obj.number }}</a></li>
                    {% if right %}
                        {% for i in right %}
                            <li class="next-page"><a href="?page={{ i }}">{{ i }}</a></li>
                        {% endfor %}
                        {% if right_has_more %}
                            <li><span>...</span></li>
                        {% endif %}
                    {% endif %}
                    {% if last %}
                        <li><a href="?page={{ paginator.num_pages }}">{{ paginator.num_pages }}</a></li>
                    {% endif %}
                </ul>
            </div>
        {% endif %}
        </div>
    </div>
{%endblock body%}

自定义模板标签

blog -> templatetags -> blog_tags.py

@register.simple_tag
def get_title(category):
    a = BigCategory.objects.filter(slug=category)
    if a:
        return a[0]

头部引入

{% load blog_tags %}

首页 大分类跳转地址

<a href="{% url 'blog:category' big.slug '' %}">{{ big.name }}</a>

首页大分类下拉菜单小分类地址

<a href="{% url 'blog:category'  big.slug   c.slug  %}">{{ c.name }}</a>

配置路由

# 分类页面
url(r'^category/(?P<bigslug>.*?)/(?P<slug>.*?)', IndexView.as_view(template_name='content.html'), name='category'),

运行查看效果

20341

简单理解路由,这里都是我的个人理解可能不会有官方文档解释的科学,如果读完还有疑惑不要纠结,问题不大,刚开始接触不需要理解的太深入。

    {% url 'blog:category' big.slug '' %}

big.slug:是从 bigcategory 表取出的数据,是导航菜单,大分类字段

Django 的路由其实就是使用正则表达式匹配前端 http 请求的路径

http 请求可以理解为,前台的点击事件,比如用户点击 生活笔记 或者 个人随笔

就是告诉服务器我想看这些内容,那么怎么告诉,就是发送 http 请求,这里 {% url 'blog:category' big.slug '' %} 就是 Django 模板定义请求路径的方式

blog:主路由 url('', include('storm.urls', namespace='blog')), 定义应用空间名 namespace 为 blog,这样后台修改应用 storm 名不会影响前台渲染数据,和配置静态路径一样的道理

category:是storm应用路由 url(r'^category/(?P.?)/(?P.?)', IndexView.as_view(template_name='content.html'), name='category') 中的开始匹配位置

比如 这里用户点击生活笔记,那么他的请求路经是

浏览器解析

{% url 'blog:category' big.slug '' %}

后路径即为

http://stormsha.com/category/diary

则 Django 首先去 项目容器 blog -> blog -> urls.py 中匹配这个路径,匹配的规则是首先精准匹配这个路径,就是拿 category 去对比 路由的第一个参数

发现没有 category,如果未匹配到,则进行模糊匹配,就是直接走路由第一个参数为空的路由,那么就进到了

url('', include('storm.urls', namespace='blog')) 这里,include 的第一个参数指向的是子路由位置,

通过这里进入 blog -> storm -> urls.py 继续拿 category 匹配路径,在这里匹配到了

url(r'^category/(?P<bigslug>.*?)/(?P<slug>.*?)', IndexView.as_view(template_name='content.html'), name='category')

好了第一个http请求已经找到归宿

{% url 'blog:category' big.slug '' %}

big.slug:第一个参数 就是 diary,通过 正则匹配到 diary

'':第二个参数为空,因为这里请求的是大分类,但是大分类和小分类这里使用的是同一个路由,所以要置空

如果 用户点击个人随笔,那么请求的路经是 http://stormsha.com/category/diary/life

{% url 'blog:category'  big.slug   c.slug  %}

big.slug:第一个参数,是从数据库中取出的大分类,即为 diary

c.slug:第二个参数是从 category表取出的文章分类字段,即为 life

关于自己

关于自己(about)、给我留言((message)、赞助作者(donate)、技术交流(exchange)、提问交流(question)、项目合作(project)、属于同一类页面,都是静态展示页面 所以要单独创建页面

blog -> templates -> about.html

这里是静态页面,直接拷贝Github 项目中对应页面代码即可

配置路由

    url(r'^category/about/$', AboutView, name='about'),

创建视图

    def AboutView(request):
        return render(request, 'about.html', {'category': 'about'})

运行查看效果

20342

2、总结方法

生活笔记、技术杂谈、福利专区、生活笔记下拉菜单、技术杂谈下拉菜单、标签云、归档、都属于同一类,模仿实现即可

对比项目源码Github,理解视图和 Templatetags 的用法套路

关于自己、给我留言、赞助作者、技术交流、提问交流、项目合作属于同一类模仿实现即可

【友情提示】——如果发现有表达错误,或者知识点错误,或者搞不懂的地方,请及时留言,可以在评论区互相帮助,让后来者少走弯路是我的初衷。我也是一步步摸着石头走过来的,深知网络上只言片语的图文教程,给初学者带来的深深困扰。

【建议】——在对项目结构不太熟悉时,参照完整源码少走弯路

转载请注明: StormSha » Django个人博客开发十一 | 博客首页开发三

发表我的评论

表情
(0)个小伙伴在吐槽|0条评论
暂时没有评论,欢迎来尬聊!