极墨笔记

 找回密码
 立即注册
搜索
热搜: UG 建模 discuz
查看: 669|回复: 0

[分享] 网页模板规划

[复制链接]

565

主题

731

帖子

7477

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
7477

活跃会员推广达人突出贡献优秀版主荣誉管理论坛元老

发表于 2018-11-28 22:15:00 | 显示全部楼层 |阅读模式
为了减小代码的重复率,然代码看起来更简洁,我们需要规划一下代码结构。
1.对于大部分页面中需要用到的前端代码部分,可以创建一个基础模板,比如“base.html”模板,比如在前面提供的模板中,直接把“index.html”文件中的非公用代码删除,用块代替就可以用做基础模板“base.html”了,需要被代替的部分用下面的代码来填写。
  1. {% block 块名称 %}{% endblock %}
复制代码
2.那么首页的模块需要继承基础模板,并且填写非公用部分的代码,继承公用模板的代码段。
  1. {% extends 'base.html' %}
复制代码
这段代码中的‘base.html’就是模板文件名,必须放在第一行。
3.非公用部分代码需要填写在下面这个位置:
  1. {% block 块名称 %}非公用代码部分{% endblock %}
复制代码
这里的{% block 块名称 %}{% endblock %}和上面的“base”模板中的需要对应,因为这些代码中可能还会用到很多静态文件,所以需要带加载静态文件,加载的代码还是下面这段:
  1. {% load static %}
复制代码
所以某个页面的代码结构可以大致如下:
  1. {% extends 'base.html' %}
  2. {% load static %}
  3. {% block 块名称 %}
  4. 非公用部分代码
  5. {% endblock %}
复制代码
4.对于某一块部分的代码也可以单独做出HTML文件用于多个页面的引用,单独的页面同样需要先用{% load static %}加载静态页面。
在其他页面需要引用这一部分代码时用下面这段代码引入到相应的位置就可以了:
  1. {% include '某一块的代码文件名' %}
复制代码

所以模板的整理规划用到下面这些代码:
extends:继承一个基础模板,得放代码第一行
Include:引入另一个HTML文件的代码
block:结束的地方用endblock,中间放自己的代码,在基础模板中也需要有同样的块名称一段代码,块所在位置决定代码放的位置
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|论坛版权|极墨笔记 ( 浙ICP备17036881号-1 )

GMT+8, 2019-12-9 01:47 , Processed in 0.049891 second(s), 19 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表