写Django之规划下模板

作者:Master易
时间:于 2020年7月27日 22:16 创建, 2020年8月11日 21:09 最后一次的修改
浏览:55

总有一些东西是会一直出现在页面上的,

所以先把这些写好,然后加入主页面,方便功能模块来继承


我的博客主页面不变的有这样几个部分:

  • 导航栏

  • 侧边栏

  • 注脚

在根目录下新建templates这样一个文件夹,它的构成是这样

templates

├─header.html # 导航栏
├─side.html # 侧边栏
├─footer.html # 注脚
└─base.html # 用于被继承的主体

三个组成部分写样式,

一个主体写html 的那一套东西,然后加上需要引入的

各种jscss,之类的东西

这类小玩意儿如果是cdn引用那就直接一个网址就OK,

但有的还是需要引用本地文件,

先在根目录建立一个static的文件夹,

这是我在上一章指定的静态文件存放目录,

以后就可以在模板中在加入 {% load staticfiles %}的情况下,

使用{% static '文件路径' %} 的形式引用静态文件了。

header.html

<div class="container">
    <nav class="navbar navbar-expand-sm navbar-dark bg-secondary rounded shadow-lg">
        <div class="container">
            <!-- 这里我用来放网页的名字,也可以点击这里方便的回到主页 -->
            <a href="/" class="navbar-brand">主标题</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#menu">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div id="menu" class="collapse navbar-collapse">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item">
                        <!-- 以后写的每个应用我都放在这里一个链接方便跳转 -->
                        <a class="nav-link" href="#">应用1</a>
                    </li>
                </ul>
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
                            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            用户名
                        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <!-- 想安排的功能 -->
                            <a class="dropdown-item" href="#">写文章</a>
                            <a class="dropdown-item" href="#">后台管理</a>
                            <a class="dropdown-item" href='#'>个人信息</a>
                            <a class="dropdown-item" href='#'>退出登录</a>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</div>

footer.html:

<!-- 一般网页都有这个注脚的玩意,写一哈,有备案应该要往这边写 -->
<div class="container ">
    <footer class="pt-4 my-md-4 pt-md-4 border-top ">
        <div class="container">
            <p class="mb-0 text-center">CopyRight &copy; 2020 优雅易伢呦</p>
        </div>
    </footer>
</div>

side.html:

<!-- 一个学杜佬的方块样式,放各种通知之类的 -->
<div class="card mb-4 mt-4 hvr-glow no-underline rounded shadow-lg" style="display: flex">
    <div class="card-body">
        <p class="card-title text-muted">
            <i class="fas fa-bell" style="color: lightskyblue;"></i> 易大师的动态</p>
        <p>&nbsp&nbsp&nbsp暂时没什么想写的模块了<br />&nbsp&nbsp&nbsp咸鱼趴地</p>
        <p class="cark-text text-muted mb-0 text-right" id="notification_created">2020/06/27</p>
    </div>
</div>

base.html:

{% load staticfiles %}

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="utf-8">
    <!-- 网站标题 -->
    <title>{% block title %}{% endblock %}</title>
    <!-- 引入bootstrap的css文件,图标和jq -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.8.2/css/all.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>
</head>

<body>
    <!-- 引入导航栏 -->
    {% include 'header.html' %}
    <div id="wrapper">
        <div class="container ">
            <div class="row">
                <div class="col-12 col-lg-9">
                    <!-- 预留的内容位置 -->
                    {% block content %} {% endblock content %}
                </div>
                <div class="col-lg-3 d-none d-lg-block">
                    <!-- 引入侧边栏 -->
                    {% include 'side.html' %}
                </div>
            </div>
        </div>
        <div id="push"></div>
    </div>
    <!-- 引入注脚 -->
    {% include 'footer.html' %}
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.15.0/dist/umd/popper.min.js"></script>
    <!-- 引入bootstrap的js文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js"></script>
    <!-- 引入layer.js不知道哪个地方用到的 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/layer/3.1.1/layer.js"></script>

    <style>
        html,
        body {
            height: 100%;
            margin: 0;
        }

        #wrapper {
            min-height: 100%;
            margin-bottom: -40px;
        }

        #footer,
        #push {
            height: 60px;
        }
    </style>

</body>

</html>

写好这些以后,有了一个含有自己导航,侧边,页脚的base.html,

以后想写的每个页面都可以直接继承它,

只需要填充标题和需要的内容就可以了。

模板这样就规划好了,如果想检验下成果,

templates新建一个含有helloworld的home.html,

然后在我的博客文件夹下的urls.py,加上两行:

from django.views.generic import TemplateView
···
path('', TemplateView.as_view(template_name='home.html')),

启动项目,打开127.0.0.1:8000,

如果看到一个带有导航,页脚,侧边栏的helloworld,就OK了。




登录后回复

共有4条评论


Jacky

博主不打算搞个系列教程之类的吗

2020-08-04 12:18 回复

Jacky Jacky

这样的博客对别人起不到帮助呀

2020-08-04 12:19 回复

Master易 Jacky

这不就是系列吗?对我很有帮助啊

2020-08-04 16:32 回复

jackyfzh Master易

这....易大师建站是自己玩玩的吗?

2020-08-11 21:11 回复

布丁

易将木剑交给了师父,两人盘腿坐在大树下,师父从怀里摸出一块铁片,在木剑上刻着字。

“无什么……什么什么……易大什么?”易抓着脑袋,念着师父刻的字。

“这些字读,「无极剑派第三百六十九位传人,易大师」。叫你好好读书,连这些字都不认识。”师父敲着易的脑袋说。

“明明是你字太烂……弯弯曲曲的像蚯蚓一样。”易撅着嘴,摸着脑袋,委屈的说。

“是吗,哈哈……”师父摸着脑袋,尴尬的笑着。

“师父,为什么要刻个易大师呢?易就可以了啊。”

“因为带有大师的人,都是很厉害的人。为师希望你以后能将无极剑派的思想发扬光大,所以才刻上大师两个字,这是为师对你的期望。”

“徒儿绝不会辜负师父的期望!”