分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 教程案例

Django之html-模板继承

发布时间:2023-09-06 01:38责任编辑:蔡小小关键词:暂无标签

在编程的过程中,我们经常会重复性的写了很多的代码,比如一个页面的框架部分,这样我又多少个页面就得写上多少次,这样既不好维护,也不够高效,所以我们引出了html的模板继承部分。

1、写好一个html文件。

2、下面有个新的html文件需要继承上面这个html。

  直接在这个新的html文件的最顶端,写上下面的内容

  

#这个manger.html就是母版的文件名称,告诉这个html去哪里继承。
{% extends ‘manger.html‘ %}

3、问题来了,我们既然是继承,总不能全部继承吧,我们肯定是需要写一些新的内容在新的html文件中展示,我们只是继承母版中的一部分,比如head之类的。

  比如我们要在html的一个位置更换新的内容。

  1、定义一个继承的块,叫index。

{% block index %}{% endblock %}

  2、继承者在自己的文件中需要更换新的内容,需要这么写。

  注意:只需要在继承的任意位置写上{% block index %}内容区{% endblock  %}

{% block index %} ???<div style="height: 45px;line-height: 45px;font-size: 15px;font-weight: bolder"> ???????<span>首页&nbsp;></span> ???????<span>资产管理</span> ???</div>{% endblock %}

4、问题由来了,如果我的html内容特别多,我看着特别乱,这样我可以把这些内容都写到一个新的html文件里面,然后在我的html文件中直接引用就OK。

例如:我单独写了一个test.html文件。

我想在html中引用直接写入地下的东西就OK了。

{% include "test.html" %}

 5、写自己的CSS和JS样式或操作。

  

<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title></title></head> ???<style> ???????body{ ???????????height: 38px; ???????????width: 300px; ???????} ???</style> ???{% block css %}{% endblock %}<body> ???<div> ???????????</div> ???<script src="jquery-x.x.x"></script> ???{% block js %}{% endblock %}</body></html>

   这样,我们就可以在自己的html文件中直接写自己的css样式或者js操作。

{% block css %} ???<style> ???</style>{% endblock %}{% block js %} ???<script> ???</script>{% endblock %}

Django之html-模板继承

原文地址:https://www.cnblogs.com/wu-chao/p/8328853.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved