Django搭建个人博客平台6---前端templates模板index页

2023-10-02 18:55:04

文章目录

Django搭建个人博客平台6---前端templates模板index页

Django搭建个人博客平台6—前端templates模板index页

Django的template模板渲染官方文档：官方文档

大家可以去模板网站上找一下自己喜欢网站，参照它的样式布局，也可以参照我的，不要怕，互联网本就是个开源平台，互相借鉴才能提高。

base页面

页面总体布局。模板继承，我们先写一个基础页面，预留好block钩子。以后其他页面均可以继承此页面，根据预留的钩子进行二次布局。

base.html页面整体布局，预留title meta css js navigation content aside footer钩子,一边页面继承时扩展。

引用bootstrap样式进行页面布局

静态文件建议目录结构

static----------------
	js----------------存放js
	css---------------存放css
	images------------存放图片
	plugins-----------使用的插件

base.html

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link type="text/plain" rel="author" href="{% static 'human.txt' %}"/>

    <title>
        {% block title %}
    		大聪明的个人博客
        {% endblock %}
    </title>

    {% block meta %}
        <meta name="description" content="大聪明博客平台，主要学习django,java,Spring,python">
        <meta name="keywords" content="大聪明博客平台，django,java,Spring,python">
    {% endblock %}


    {% block css %}

    {% endblock %}


</head>

<body>
{% block Navigation %}
    <!--导航条-start-->

    <!--导航条-end-->
{% endblock %}



<!--主内容-start--->
<main role="main">

    <!--上小半部分start--->
    <div style="position:relative;">

    </div>
    <!--上小半部分end--->


    {% block content %}
        <!--主内容-start--->

        <!--左边内容区-start-->
        <p>内容</p>
        <!--左边内容区-end-->

        <!--分页栏-start-->
        <!--分页栏-end-->
    {% endblock %}


    {% block aside %}

        <!--侧边栏-start-->

        <!--侧边栏-end-->
    {% endblock %}


    <!--主内容-end--->


</main>

<footer>
    
    {% block footer %}
    {% endblock %}
    
</footer>
    
    {% block js %}
    {% endblock %}
    
</body>

</html>

index首页

index.html继承base.html，博客首页。

自定义Navigation导航栏inclusion_tag

自定义标签和控制器方法介绍

自定义过滤器
1. app应用文文件夹中创建templatetags文件夹，必须是这个名字；
2. templatetags文件夹中创建一个xx.py文件，名字可以随便起。
3. 创建自定义过滤器
	from django import template

    register = template.Library()  # register固定的名字

    @register.filter
    def test(v1, v2):
        # 带参数
        s = v1 + v2
        return s

    @register.filter
    def xxoo(v1):
        # 不带参数
        s = v1 + 'xxoo'
        return s
4. 使用 html文件中的 {%  load 文件名  %}
    {% load te %}
    {#不带参数#}
    {{ s1|xxoo  }}
    {#带参数#}
    {{ s1|test:'幸福的生活在一起！' }}
5. 注意：参数最多两个。
        
自定义标签
1. app应用文文件夹中创建templatetags文件夹，必须是这个名字；
2. templatetags文件夹中创建一个xx.py文件，名字可以随便起。    
3. 创建自定义过滤器
	from django import template

    register = template.Library()  # register固定的名字
    @register.simple_tag
    def mytag(v1):
        s = v1 + '男枪'
        return s

    @register.simple_tag
    def mytag2(v1, v2, v3):
        s = v1 + v2 + v3
        return s
4. 使用 html文件中的 {%  load 文件名  %}
    {% load te %}
    <h>
        {% mytag s1 %}
        {% mytag2 s1 '寒冰' '卡特' %}
    </h> 
5. 注意：参数可以有多个。

inclusion_tag

xx.py
from django import template

register = template.Library()  # register固定的名字
@register.inclusion_tag('includetag.html')
def func():
    return {'data':['人马','提莫','龙龟']}
test.html
<ul>
    {% for d in data %}
      <li>{{ d }}</li>
    {% endfor %}
</ul>
作为一个组件在xxoo.html中使用
{% load te %}
{% func %}

导航栏inclusion_tag

app应用文文件夹中创建templatetags文件夹，必须是这个名字；
templatetags文件夹中创建一个custom_tag.py文件，名字可以随便起。

在 custom_tag.py文件中定义

from django import template

register = template.Library()


@register.inclusion_tag('navigation.html')
def navigation(categories, cur_user_name, columns):
    return {'categories': categories, 'cur_user_name': cur_user_name, 'columns': columns, }

在templates文件夹中新建一个navigation.html，渲染的数据就是def navigation传来的数据，就是要展示的专栏和分类数据。

<header>
    <nav class="navbar fixed-top navbar-expand-xl navbar-light t-navigation">
            <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
                {% for column in columns %}
                    {% if column.is_tree %}
                       	xxx
                                {% for category in categories %}
                                    {% if category.column.id == column.id %}
                                        xxx
                                    {% endif %}
                                {% endfor %}                           
                    {% else %}
                        {% if column.is_site %}
                          xxx
                            {% else %}
                       			xxx
                            {% endif %}
                    {% endif %}
                {% endfor %}
            </ul>
        {% if cur_user_name %}
            <a class="btn btn-outline-success my-2 my-sm-0 ml-lg-2" type="button" href="{% url 'logout' %}">登出</a>
        {% else %}
            <a class="btn btn-outline-success my-2 my-sm-0 ml-lg-2" type="button" href="{% url 'login' %}">登陆</a>
        {% endif %}
    </nav>
</header>

index.html中使用，这样在哪里要加导航栏直接把它放在那就行啦

{% extends 'base.html' %}
{% load static %}
{% load custom_tag %}

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

index.html

由于样式太多，这里只教学后台render过来的数据渲染。

footer脚注我是直接写在了base里面，因为这个一次配置后不会在改。如果你们想和重写这个钩子，可以类似玉导航栏页封装一下。建议自己动手实现一下。

{% extends 'base.html' %}
{% load static %}
{% load custom_tag %}

{% block title %}
    {{ admin_obj.username }}的个人博客
{% endblock %}

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

{## 导航条使用：1.加载自定义标签；2.使用block；3.views.py传入#}
{% block Navigation %}
    {% navigation categories cur_user_name columns %}
{% endblock %}


{% block content %}
    <!--主内容-start--->

    <!--左边内容区-start-->
        <p>对render来的文章对象的queryset用for遍历渲染</p>
    <!--左边内容区-end-->

    <!--分页栏-start-->
		可以先不考虑分页，封装的分页组件渲染，下一节会讲。
		{{ page_html }}
    <!--分页栏-end-->
{% endblock %}


{% block aside %}

    <!--侧边栏-start-->
		侧边栏数据的渲染和样式
    <!--侧边栏-end-->
{% endblock %}

后话

我的博客目前正常运行，这是我自己建立博客网站的记录和总结。如果你按照我的教程去做，一般是不会出现问题，但是，总会有bug发生。如果你遇到了问题，欢迎与我交流沟通。

最后，如果你觉得这篇文章对你有用的话，欢迎一键三连，酌情打赏，谢谢！

码农公寓