×

Django网页模板的继承include与复用extends

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 >留言区-暂时为空</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

人已赞赏
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
今日签到
有新消息 消息中心
有新私信 私信列表
搜索