基于Django开发的SkyNet博客二——base Template

最新推荐文章于 2022-07-15 15:07:46 发布

溪语流沙

最新推荐文章于 2022-07-15 15:07:46 发布

阅读量268

点赞数 1

分类专栏： Django 文章标签： django 博客

本文链接：https://blog.csdn.net/ntnmywyx/article/details/76864595

版权

Django 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

Django使用的是MTV框架模式，上一篇博客中已经介绍了Django中的model，这一篇博客主要讲解Template和View，

Template

Template是为了方便动态的生成html，Template中不仅有静态的部分，还有动态生成的部分。Django创建后端的Template语言，也叫Django template language(DTL)，可以看一下jinja2
首先设计一下base.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>
        {% block title %}{% endblock %}
    </title>
    {% load static %}
    <link rel="stylesheet" type="text/css" href="{% static 'blog/css/semantic.min.css' %}">
    <script type="text/javascript" src="{% static 'blog/js/jquery-3.2.1.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'blog/js/semantic.min.js' %}"></script>
</head>
<body>
{% block header %}
    {% load static %}
    <link rel="stylesheet" href="{% static 'blog/css/base/banner.css' %}" type="text/css">
    <script type="text/javascript" src="{% static 'blog/js/base.js' %}"></script>
    <div class="ui secondary fixed menu">
        <a class="ui header labeled item" href="{% url 'blog:index' %}">SkyNet</a>
        <div class="item">
            <div class="ui basic buttons">
                <button class="ui basic button">发现</button>
                <button class="ui basic button">关注</button>
                <button class="ui basic button">消息</button>
            </div>
        </div>
        <div class="item">
            <div class="ui icon input">
                <input type="text" placeholder="搜索...">
                <div class="ui blue submit button">搜索</div>
            </div>
        </div>
        <div class="right menu">
            <div class="right item">
                <div class="ui buttons" {% if request.user.is_authenticated %}style="display: none"{% endif %}>
                    <a class="ui positive button" href="{% url 'blog:login' %}">
                        登录
                    </a>
                    <div class="or"></div>
                    <a class="ui button" href="{% url 'blog:register' %}">
                        注册
                    </a>
                </div>

            </div>
            <div class="ui simple dropdown item" {% if not request.user.is_authenticated %}style="display: none"{% endif %}>
                <span class="text">{{ request.user.username }}</span>
                <i class="dropdown icon"></i>
                <div class="menu">
                    <a class="item" href="#">我的主页</a>
                    <a class="item" href="#">我的评论</a>
                    <a class="item" href="{% url 'blog:logout' %}">登出</a>
                </div>
            </div>
            <div class="item">
                <a href="{% url 'blog:edit' %}">写文章</a>
            </div>
        </div>
    </div>
{% endblock %}
{% block content %}
{% endblock %}
<footer>
    {% block footer %}
    {% endblock %}
</footer>

</body>
</html>

首先先给个图吧

使用了block块，可以让继承base.html的Template自定义各块的内容。
定义了block header，是继承了base.html的都包含该header，如若不需要则只需重写即可
load static可以导入静态文件，需要在settings设置静态文件的导入路径。

STATIC_URL = '/static/'

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "static"),
]

如果需要将静态文件放入自己的app中，只需创建如下目录

blog
    static
        blog
            ...

而我这里是创建了image，css，js等文件夹，方便导入。
需要导入css和js如下格式

{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'blog/css/semantic.min.css' %}">
<script type="text/javascript" src="{% static 'blog/js/jquery-3.2.1.min.js' %}"></script>
<script type="text/javascript" src="{% static 'blog/js/semantic.min.js' %}"></script>

注意我这里导入了三个文件，两个是semantic库的，另外一个是jquery的，并且两个js的顺序不能颠倒哦，因为semantic的js是依赖jquery的。

#这些用法在jinja2中都有所介绍，不懂的可以去看一下
{% 语句 %}
#{% load static %}用来导入static tags，方便后续的使用
#{% static 'path' %}导入路径为path的静态文件
#{% url 'namespace:name' %} 指向对应的url
{{ 变量 }}