Django 使用网页模板的方式分为两种, 一是建立代码块, 在新的页面导入代码块, 关键词为 include 二是建立模板, 新的页面在模板基础上扩充, 关键词为 extends
导入代码块 include
导入的代码块相当于一个完整的组件, 可以包含 html 标签, CSS 样式, js 语法
如果你想在网页上乱入一块广告, include 是非常乐意效劳的
定义一个代码块
- <style>
- #ad{
- background-color: #FCF6E5;
- border-radius: 10px;
- margin: 0 auto;
- text-align: center;
- padding: 30px;
- font-size: 20px;
- position: relative;
- box-sizing: border-box;
- }
- #close {
- font-size: 10px;
- background-color: #AB3319;
- position: absolute;
- top: 10px;
- right: 10px;
- cursor:pointer;
- color: #ffffff;
- padding: 6px;
- }
- </style>
- <div id='ad'>
- 大扎好, 我系轱天乐, 我四渣渣辉,<br > 探挽懒月, 介四里没有挽过的船新版本,<br > 挤需体验三番钟, 里造会干我一样, 爱象节款游戏 < br>
- (用港普来阅读以上内容)
- <span id="close"> 关闭 X</span>
- </div>
- <script>
- document.getElementById("close").onclick = function(){
- document.getElementById("ad").style.display = "none";
- }
- </script>
导入一个代码块
- {% include './_ad.html'%}
- <style>
- body {
- margin: 0;
- padding: 0;
- }
- .content {
- height: 300px;
- background-color: #FAFAFA;
- overflow: auto;
- border: 2px solid #FCF6E5;
- padding-left: 500px;
- box-sizing: border-box;
- }
- .title {
- color: #413F43;
- font-size: 30px;
- color: #AB3319;
- }
- </style>
- <div class="content">
- <div class="title"><b>Lemon</b> | 电视剧非自然死亡主题曲 </div>
<br > 夢
<br > 如果这一切都是梦境该有多好
<br > 未夢
<br > 至今仍能与你在梦中相遇
<br > 忘物取帰
<br > 如同取回遗忘之物一般
<br > 古思出埃払
<br > 细细拂去将回忆覆盖的尘埃
<br > 戻幸
<br > 最终是你让我懂得了
<br > 最後教
<br > 这世间亦有无法挽回的幸福
<br > 言隠昏過去
<br > 那些未对他人提及过的黑暗往事
<br > 永遠昏
<br > 如果不曾有你的话 它们将永远沉睡在黑暗中
<br > 以上 傷
<br > 我知道这世上一定没有
<br >
<br > 比这更令人难过的事情了
<br > 日悲
<br > 那日的悲伤
<br > 日苦
<br > 与那日的痛苦
<br > 愛
<br > 连同深爱着这一切的你
<br > 胸残離
<br > 化作了深深烙印在我心中的
<br > 苦匂
<br > 苦涩柠檬的香气
<br > 雨降止帰
<br > 在雨过天晴前都无法归去
<br > 今光
<br > 时至今日 你仍是我的光芒
<br > 暗闇背
<br > 在黑暗中追寻着你的身影
<br > 輪郭鮮明覚
<br > 那轮廓至今仍鲜明地刻印于心
<br > 受止出会
<br > 每当遇到无法承受的苦痛时
<br > 溢涙
<br > 总是不禁泪如泉涌
<br > 何
<br > 你都经历过什么
<br > 何見
<br > 又目睹过什么呢
<br > 知横顔
<br > 脸上浮现着我不曾见过的神情
<br > 今
<br > 如果你正在什么地方
<br > 同様
<br > 与我一样
<br > 涙 淋中
<br > 忘
<br > 就请你将我的一切全部遗忘吧
<br > 心願
<br > 这是我发自内深处唯一的祈愿
<br > 今光
<br > 时至今日 你仍是我的光芒
<br > 自分思 恋
<br > 我深深地恋慕着你 甚至超出了我自己的想象
<br > 思 息
<br > 自此每当想起你 都如同窒息般痛苦
<br > 側嘘
<br > 你曾亲密伴我身旁 如今却如烟云般消散
<br > 忘確
<br > 唯一能确定的是 我永远都不会将你遗忘
<br > 日悲
<br > 那日的悲伤
<br > 日苦
<br > 与那日的痛苦
<br > 全愛共
<br > 连同深爱着这一切的你
<br > 胸残離
<br > 化作了深深烙印在我心中的
<br > 苦匂
<br > 苦涩柠檬的香气
<br > 雨降止帰
<br > 在雨过天晴前都无法归去
<br > 切分果実片方様
<br > 如同被切开的半个柠檬一般
<br > 今光
<br > 时至今日 你仍是我的光芒
</div>
扩充模板定义网页 extends
定义一个模板
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title > 将进酒 </title>
- </head>
- <style>
- body {
- margin: 0;
- padding-left: 100px;
- padding-right: 100px;
- }
- .poem-title {
- color: #AB3319;
- font-size: 50px;
- padding-top: 50px;
- }
- .poem-author {
- font-size: 30px;
- color: #5EA1F3;
- padding-top: 20px;
- font-weight: bold;
- }
- .poem-content {
- color: #444444;
- font-size: 20px;
- line-height: 36px;
- padding-top: 50px;
- padding-bottom: 50px;
- }
- .message-board {
- color: #62868D;
- }
- </style>
- <body>
- <div class="poem-title">
- {% block poem_title %} 诗歌 - 标题 {% endblock poem_title %}
- </div>
- <div class="poem-author">
- {% block poem_author%}
- 诗歌 - 作者
- {% endblock poem_author %}
- </div>
- <div class="poem-content">
- {% block poem_content%}
- 诗歌 - 内容
- {% endblock poem_content %}
- </div>
- <div class="message-board">
- {% block message_board %}
- <div style="height: 300px; line-height: 300px; text-align: center; color: #BDBDBD; border: 1px solid #BDBDBD; border-radius: 6px;"> 留言区 - 暂时为空 </div>
- {% endblock %}
- </div>
- </body>
- </html>
导入模板填入内容生成网页
{% extends "./_tem.html" %}
{% block poem_title %} 将进酒 {% endblock poem_title %}
{% block poem_author %}
李白
- {% endblock poem_author %}
- {% block poem_content %}
君不见, 黄河之水天上来, 奔流到海不复回.<br>
君不见, 高堂明镜悲白发, 朝如青丝暮成雪!<br>
人生得意须尽欢, 莫使金樽空对月.<br>
天生我材必有用, 千金散尽还复来.<br>
烹羊宰牛且为乐, 会须一饮三百杯.<br>
岑夫子, 丹丘生, 将进酒, 杯莫停.<br>
与君歌一曲, 请君为我倾耳听.<br>
钟鼓馔玉不足贵, 但愿长醉不复醒.<br>
古来圣贤皆寂寞, 惟有饮者留其名.<br>
陈王昔时宴平乐, 斗酒十千恣欢谑.<br>
主人何为言少钱, 径须沽取对君酌.<br>
五花马, 千金裘, 呼儿将出换美酒, 与尔同销万古愁!<br>
{% endblock poem_content %}
小结:
django 适合承担比较大的项目, 如果一个项目中需要生成大量网页, 那模板继与复用就是不可或缺的,
使用模板的好处有很多, 最基本的好处是能简化代码, 此外, django 会根据模板生成完整的静态网页, 这种默认后端渲染的做法, 非常利于 seo, 提升了网站内容被搜索引擎抓取的概率
include 和 extends 可以解决大多数模板继承与复用的问题, 而且二者是支持混用的, 为了将模板代码块与普通的 html 文件区分开, 推荐的做法是模板文件以下划线开头, 如广告的模板文件可以命名为_ad.html
来源: http://www.jianshu.com/p/4a12baf38983