Django builds personal blog platform 6-front-end templates template index page

Article Directory

Django builds personal blog platform 6-front-end templates template index page

Django template template rendering official document: official document

You can go to the template website to find your favorite website, refer to its style and layout, or refer to mine, don’t be afraid, the Internet is an open source platform, and you can learn from each other to improve.

base page

The overall layout of the page. For template inheritance, we first write a basic page and reserve the block hook. In the future, other pages can inherit this page, and perform secondary layout according to the reserved hooks.

The overall layout of the base.html page, reserve the title meta css js navigation content aside footer hook, and expand when one side of the page inherits.

Refer to bootstrap style for page layout

Suggested directory structure for static files

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 home

index.html inherits base.html, the blog homepage.

image-20210518204137880

Custom navigation navigation bar inclusion_tag

Introduction to custom labels and controller methods

自定义过滤器
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 %}

The templatetags folder created in the app application folder must have this name;

Create a custom_tag.py file in the templatetags folder. The name can be anything you want.

Defined in the custom_tag.py file

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, }

Create a new navigation.html in the templates folder. The rendered data is the data passed by def navigation, which is the column and classification data to be displayed.

<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>

Use it in index.html, so where you need to add a navigation bar, just put it directly

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

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

index.html

Because there are too many styles, only the data rendering from the background render will be taught here.

I wrote the footer footer directly in the base, because this will not be changed after one configuration. If you want to rewrite this hook, you can encapsulate it like a jade navigation bar page. It is recommended to do it yourself.

{% 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 %}

Afterword

My blog is currently running normally. This is the record and summary of my own blog website. If you follow my tutorial, there will generally be no problems, but there will always be bugs. If you encounter problems, welcome to communicate with me.

Finally, if you think this article is useful to you, welcome one-click three-link , as appropriate , thank you!