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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏企鹅号快讯

Brocade为何认为FC是NVMe over Fabric中最好的Fabric?

Brocade最近发表了对NVMe over Fabric理解和观点,认为FC Fabric相比以太网具有很多优势,并且FC聚焦数据中心数据传输和交换,具有更好...

28090
来自专栏嵌入式程序猿

博世小功率变频器拆解

变频器在工业生产中应用非常的广泛,橡胶行业的轮胎产线就有很多,而且轮胎产线环境恶劣,灰尘大,今天帮朋友修理一台力士乐的变频器,因为长期使用加上环境恶劣,变频器里...

53320
来自专栏腾讯社交用户体验设计

ISUX 2018 Calendar 获奖名单

8610
来自专栏知晓程序

海量高清二次元壁纸!快来把老婆抱回家吧

今天,知晓程序(微信号 zxcx0101)要给广大动漫迷们,推荐一款名叫「Soda 壁纸」小程序,导航用的是颜文字,图库里全是高清壁纸,十分带感。

11020
来自专栏IT派

关于微信和Python的点点滴滴

微信自上线以来,一直没有自动回复的功能,想必是有他们的理念。但是有些人群,确实对此功能有一定需求,我举两个栗子:

11600
来自专栏智能大石头

MF前传——探索者一号简介

    MF让我们这些C#程序员能够把手伸到嵌入式行业,大大增强我们在各种项目中的竞争能力。无奈国内研究MF的人少之又少,为了加速MF技术的研究,我们团队采用少...

22090
来自专栏贾老师の博客

【笔记】读 JeffDean 分布式系统

15930
来自专栏FreeBuf

如何做一个完全体的阿尔法狗

在去年3月份一场人机大战吸引了全世界的眼光,当镜头追随着 李世石、戴密斯甚至是跟这场比赛相关的每一个人时,一个人却尽可能地避开了所有的视线,尽可能把自己变成隐形...

39260
来自专栏数据小魔方

使用Python中的folium包创建热力密度图

最近探索出来一个在Python中创建热力图非常高效的方法,使用folium包来创建热力图,实际效果非常赞,过程简单,代码量少。

66920
来自专栏黑白安全

高清无码!比鬼片还刺激!且听“诡娃”远控的这首惊魂曲

近日,360云安全系统发现一款名为“诡娃”的远控木马,正通过钓鱼软件、网页挂马等多渠道扩散。“诡娃”除了能进行操控中招电脑等行为外,还会通过控制指令让中招机器弹...

12920

扫码关注云+社区

领取腾讯云代金券