html代码复用 extends,Django网页模板的继承include与复用extends

复用 extends,Django网页模板的继承include与复用extends"/>

html代码复用 extends,Django网页模板的继承include与复用extends

Django使用网页模板的方式分为两种, 一是建立代码块, 在新的页面导入代码块, 关键词为include 二是建立模板,新的页面在模板基础上扩充, 关键词为extends

导入代码块 include

导入的代码块相当于一个完整的组件, 可以包含html标签, css样式, js语法

如果你想在网页上乱入一块广告, include是非常乐意效劳的

定义一个代码块

#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;

}

大扎好，我系轱天乐，我四渣渣辉，
探挽懒月，介四里没有挽过的船新版本，
挤需体验三番钟，里造会干我一样，爱象节款游戏

(用港普来阅读以上内容)

关闭X

document.getElementById("close").onclick = function(){

document.getElementById("ad").style.display = "none";

}

导入一个代码块

{% include './_ad.html'%}

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;

}

Lemon | 电视剧《非自然死亡》主题曲

夢ならばどれほどよかったでしょう

如果这一切都是梦境该有多好

未だにあなたのことを夢にみる

至今仍能与你在梦中相遇

忘れた物を取りに帰るように

如同取回遗忘之物一般

古びた思い出の埃を払う

细细拂去将回忆覆盖的尘埃

戻らない幸せがあることを

最终是你让我懂得了

最後にあなたが教えてくれた

这世间亦有无法挽回的幸福

言えずに隠してた昏い過去も

那些未对他人提及过的黑暗往事

あなたがいなきゃ永遠に昏いまま

如果不曾有你的话 它们将永远沉睡在黑暗中

きっともうこれ以上 傷つくことなど

我知道这世上一定没有

ありはしないとわかっている

比这更令人难过的事情了

あの日の悲しみさえ

那日的悲伤

あの日の苦しみさえ

与那日的痛苦

そのすべてを愛してた あなたとともに

连同深爱着这一切的你

胸に残り離れない

化作了深深烙印在我心中的

苦いレモンの匂い

苦涩柠檬的香气

雨が降り止むまでは帰れない

在雨过天晴前都无法归去

今でもあなたはわたしの光

时至今日 你仍是我的光芒

暗闇であなたの背をなぞった

在黑暗中追寻着你的身影

その輪郭を鮮明に覚えている

那轮廓至今仍鲜明地刻印于心

受け止めきれないものと出会うたび

每当遇到无法承受的苦痛时

溢れてやまないのは涙だけ

总是不禁泪如泉涌

何をしていたの

你都经历过什么

何を見ていたの

又目睹过什么呢

わたしの知らない横顔で

脸上浮现着我不曾见过的神情

どこかであなたが今

如果你正在什么地方

わたしと同じ様な

与我一样

涙にくれ 淋しさの中にいるなら

わたしのことなどどうか 忘れてください

就请你将我的一切全部遗忘吧

そんなことを心から願うほどに

这是我发自内深处唯一的祈愿

今でもあなたはわたしの光

时至今日 你仍是我的光芒

自分が思うより 恋をしていたあなたに

我深深地恋慕着你 甚至超出了我自己的想象

あれから思うように 息ができない

自此每当想起你 都如同窒息般痛苦

あんなに側にいたのにまるで嘘みたい

你曾亲密伴我身旁 如今却如烟云般消散

とても忘れられないそれだけが確か

唯一能确定的是 我永远都不会将你遗忘

あの日の悲しみさえ

那日的悲伤

あの日の苦しみさえ

与那日的痛苦

その全てを愛してたあなたと共に

连同深爱着这一切的你

胸に残り離れない

化作了深深烙印在我心中的

苦いレモンの匂い

苦涩柠檬的香气

雨が降り止むまでは帰れない

在雨过天晴前都无法归去

切り分けた果実の片方の様に

如同被切开的半个柠檬一般

今でもあなたはわたしの光

时至今日 你仍是我的光芒

扩充模板定义网页 extends

定义一个模板

将进酒

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;

}

{% block poem_title %}诗歌-标题{% endblock poem_title %}

{% block poem_author%}

诗歌-作者

{% endblock poem_author %}

{% block poem_content%}

诗歌-内容

{% endblock poem_content %}

{% block message_board %}

留言区-暂时为空

{% endblock %}

导入模板填入内容生成网页

{% extends "./_tem.html" %}

{% block poem_title %}将进酒{% endblock poem_title %}

{% block poem_author %}

李白

{% endblock poem_author %}

{% block poem_content %}

君不见，黄河之水天上来，奔流到海不复回。

君不见，高堂明镜悲白发，朝如青丝暮成雪！

人生得意须尽欢，莫使金樽空对月。

天生我材必有用，千金散尽还复来。

烹羊宰牛且为乐，会须一饮三百杯。

岑夫子，丹丘生，将进酒，杯莫停。

与君歌一曲，请君为我倾耳听。

钟鼓馔玉不足贵，但愿长醉不复醒。

古来圣贤皆寂寞，惟有饮者留其名。

陈王昔时宴平乐，斗酒十千恣欢谑。

主人何为言少钱，径须沽取对君酌。

五花马、千金裘，呼儿将出换美酒，与尔同销万古愁！

{% endblock poem_content %}

小结:

django适合承担比较大的项目, 如果一个项目中需要生成大量网页, 那模板继与复用就是不可或缺的,

使用模板的好处有很多, 最基本的好处是能简化代码, 此外, django会根据模板生成完整的静态网页, 这种默认后端渲染的做法,非常利于seo, 提升了网站内容被搜索引擎抓取的概率

include和extends可以解决大多数模板继承与复用的问题, 而且二者是支持混用的, 为了将模板代码块与普通的html文件区分开, 推荐的做法是模板文件以下划线开头,如广告的模板文件可以命名为_ad.html