Django搭建个人博客平台6---前端templates模板index页
Posted 大聪明Smart
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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发生。如果你遇到了问题，欢迎与我交流沟通。
最后，如果你觉得这篇文章对你有用的话，欢迎一键三连，酌情打赏，谢谢！
以上是关于Django搭建个人博客平台6---前端templates模板index页的主要内容，如果未能解决你的问题，请参考以下文章
Django搭建个人博客平台1---效果展示环境准备和需要掌握的技术栈
Django搭建个人博客平台1---效果展示环境准备和需要掌握的技术栈
Django搭建个人博客平台2---创建一个Django项目和项目梳理
Django搭建个人博客平台2---创建一个Django项目和项目梳理