正文

django搭建个人博客平台6---前端templates模板index页(代码片段)

大聪明Smart  大聪明Smart  2022-12-05  610

关键词：

文章目录

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搭建个人博客平台2---创建一个django项目和项目梳理(代码片段)

文章目录Django搭建个人博客平台2---创建一个Django项目和项目梳理MVC和MTV框架MVCMTV创建Django项目目录结构作用运行简单走一下流程基于Django实现一个简单的示例get请求获取数据post请求获取数据写项目项目初步整合结构静态文件配... 查看详情

django搭建个人博客平台5---首页对应视图函数相关逻辑(代码片段)

文章目录Django搭建个人博客平台5---首页对应视图函数相关逻辑视图函数CBV和FBV加装饰器url配置url无名分组和有名分组无名分组有名分组urls.pyindex视图类实现逻辑后话最后附上代码Django搭建个人博客平台5—首页对应视图函数相关... 查看详情

django搭建个人博客平台3---博客表结构设计和markdown编辑器(代码片段)

文章目录Django搭建个人博客平台3---博客表结构设计和markdown编辑器表关系主要表之间的逻辑结构Markdown编辑器安装注册配置使用数据库迁移Admin添加数据后话Django搭建个人博客平台3—博客表结构设计和markdown编辑器表关系我们需... 查看详情

django搭建个人博客平台4---后台admin优化simpleui和导入导出(代码片段)

文章目录Django搭建个人博客平台4---后台admin优化、simpleui和导入导出Admin优化展示字段设置添加过滤器添加点击链接可编辑字段simpleui基本使用进阶重写simple-ui的模板html文件左侧边栏自定义添加项其他小配置导入导出插件安装使... 查看详情

django搭建个人博客平台7---自定义基于bootstrap的分页组件(代码片段)

Django搭建个人博客平台7—自定义基于Bootstrap的分页组件MyBlog-----------------项目名 blog---------------应用名 utils----------工具 page_html.py---分页组件 migrations-----数据库迁移文件 admin.py-------后台管理 models.py------模型文件（表查看详情

django测试平台开发开发博客(代码片段)

Django测试平台开发（二）开发博客 1、加载博客HTML页面1、在templates目录下新建index.html文件 1<!doctypehtml>2<html>3<head>4<metacharset="utf-8">5<title>首页_杨青个人博客-一个站在web前端设计之路的女技术员... 查看详情

django+sqlite搭建轻量级个人博客前端页面敏感词替换

前端页面keyword替换实现机制是：使用django模板filter，但是需要通过自定义filter方式实现。步骤和效果见下述内容。1、使用@register.filter()和@register.simple_tag()实现页面敏感词替换2、templatetags文件夹是pythonPackage类型，且名字必须是t... 查看详情

django+bootstrap+mysql搭建个人博客(代码片段)

6.1.comments插件（1）安装pipinstalldjango-contrib-comments（02）settingsINSTALLED_APPS=[‘django.contrib.sites‘,‘django_comments‘,]SITE_ID=1 （3）website/urlurl(r‘^comments/‘,include(‘django_comments. 查看详情

django+bootstrap+mysql搭建个人博客(代码片段)

我的开源项目——搭建个人blog(代码片段)

一直想创建个独立的blog，业余时间基于Python-Django、JQuery、Bootstrap实现了一个简单的blog平台，包括文章发布管理后台和博客前端两部分，欢迎一起交流学习。github源码地址：https://github.com/827992983/blog管理端相关功能：支持富文本... 查看详情

django搭建个人博客系列：环境准备及简单的博客系统搭建(代码片段)

之前的Linux环境准备工作，可以参考我之前的博客在Win10下利用VMware安装Ubuntu20.04教程。下面开始构建虚拟环境，以后写多个项目防止污染其他项目环境。1.创建虚拟环境#安装Pythonvenv库sudoapt-getinstallpython3-venv#创建虚拟环境mkdirenvcd... 查看详情

github搭建hexo纯静态化个人博客平台(代码片段)

以前一直想搭建一个属于自己的博客平台，有余种种原因一直未能实现，最近闲来无事，参照网上的教程，搭建了属于自己的博客。自己的博客网站，样式自由，不需要受限于各大平台。本篇为从零开始的基础篇，本篇所包含的... 查看详情

一python+django+selenium搭建简易自动化测试平台

python+django+selenium搭建简易自动化测试平台1.如何使用django搭建简单平台2.如何使用selenium做webUI自动化3.python接口自动化。该平台会集成UI自动化及api自动化，里面也会涉及到一些简单的HTML等前端，当然都是很基础的东西。在以后... 查看详情

django+sqlite搭建轻量级个人博客基本配置(代码片段)

一、Django的工作模式在Django里，由于C层由框架自行处理，而Django里更关注的是模型（Model）、模板(Template)和视图（Views），所以Django也被称为MTV框架。在MTV开发模式中：1、models，数据模型：这是一个抽象层，用来构建和操作你... 查看详情

django从零搭建个人博客|使用allauth插件管理用户登录与注册(代码片段)

原文博客地址：http://www.eosones.com/django-allauth是最受欢迎的管理用户登录与注册的第三方Django安装包，可以大大简化我们用户注册，登录及账户管理，其核心功能包括用户注册、忘记密码、登录(微信，微博等第三方登录；邮箱验... 查看详情

django+sqlite搭建轻量级个人博客queryset的exists()方法检查是否有数据

QuerySet执行if语句时，条件成立时，会获取所有记录并放入cache，可以使用exists()方法检查是否有数据，即使满足条件，数据也不会被加载到cache。（一举两得。。。），下图主要使用exists()方法检查是否有数据存在做判断条件。查看详情

阿里云开发零基础免费搭建个人hexo博客

云开发零基础搭建个人Hexo博客摘要云开发平台搭建个人Hexo博客的优势环境准备操作步骤写在最后摘要Hexo是一款基于Node.js的博客框架，可以将Markdown格式的文本渲染为HTML代码。所以，博客基本就是纯静态，维护相对方便。但是... 查看详情

mac下使用hexo搭建个人博客

...FQ的话，可能下载的速度会慢些，个人使用smartHost无压力搭建或者百度使用查看详情