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
网友评论