美文网首页django2.1 博客系统
二、Django2.1 搭建简单的博客网站扩展——自定义模板和静

二、Django2.1 搭建简单的博客网站扩展——自定义模板和静

作者: 27efec53a72d | 来源:发表于2019-01-23 23:16 被阅读44次

    目录:Django 2.1 从零开始搭建博客网站系列

    服务器环境搭建(选学)

    小试牛刀——简单的博客网站

    庖丁解牛——多用户的博客网站之用户模块

    庖丁解牛——多用户的博客网站之文章模块

    华丽转身——多用户的博客网站之扩展功能

    项目源码下载:https://github.com/jt1024/lehehe

    正文:

    1、自定义模板和静态文件位置

    当项目比较大的时候,往往会创建多个应用,这种情况下,模板、静态文件都要指定放在某个位置,比如把所有应用的模板都放在 ./templates中,把所有应用的静态文件都放在 ./static中。

    1.1 自定义模板位置

    修改 ./lehehe/settings.py中的 TEMPLATES

    TEMPLATES = [
        {
            'BACKEND': 'django.template.backends.django.DjangoTemplates',
            'DIRS': [os.path.join(BASE_DIR, 'templates'), ],  # 自定义模板位置
            'APP_DIRS': False,  # 自定义模板位置,不再允许按照默认方式寻找模板文件
            'OPTIONS': {
                'context_processors': [
                    'django.template.context_processors.debug',
                    'django.template.context_processors.request',
                    'django.contrib.auth.context_processors.auth',
                    'django.contrib.messages.context_processors.messages',
                ],
            },
        },
    ]
    

    注意:还要把 ./blog中的 templates 文件夹移动到最外层,即 ./blog/templates 变成了 ./templates

    1.2 自定义静态文件位置

    修改 ./lehehe/settings.py 在 STATIC_URL = '/static/' 下面增加三行代码

    STATICFILES_DIRS = (  # 自定义静态文件位置
        os.path.join(BASE_DIR, "static"),  # 注意不要丢掉这个逗号,因为这是个元祖
    )
    

    新建 ./static 文件夹,并添加以下子文件夹和文件


    static文件夹结构.png

    2、使用通用静态文件和基础模版

    2.1 通用 header.html

    创建 ./templates/header.html

    {% load staticfiles %}
    <div class="container">
        <nav class="navbar navbar-default" role="navigation">
            <div class="navbar-header">
                <a class="navbar-brand" href="http://www.taoge100.com"><img src="{% static '/images/logo.png' %}" width="100px"></a>
            </div>
            <div>
                <ul class="nav navbar-nav" role="navigation">
                    <li><a href="{% url 'blog:blog_list' %}">BLOG</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right" style="margin-right:20px">
                    <li><a href="#">LOGIN</a></li>
                </ul>
            </div>
        </nav>
    </div>
    

    2.2 通用 footer.html

    创建 ./templates/footer.html

    <div class="container">
        <hr>
        <p class="text-center">copy right www.taoge100.com</p>
    </div>
    

    2.3 完善 base.html

    修改 ./templates/base.html

    {% load staticfiles %}
    <!DOCTYPE html>
    <html lang="zh-cn">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=Edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>{% block title %}{% endblock %}</title>
        <link rel="stylesheet" href="{% static 'css/bootstrap.css' %}">
    </head>
    <body>
    {% include "header.html" %}
    <div class="container">
        {% block content %} {% endblock %}
    </div>
    {% include "footer.html" %}
    {% block javascript %} {% endblock %}
    </body>
    </html>
    

    3、效果展现

    此时的项目结构如图:


    最新的项目结构.png

    运行Django后,浏览器中输入 http://127.0.0.1:8000/blog/,页面如图:

    新的博客列表.png

    点击列表中的一条,页面如图:


    新的博客详情.png

    4、重置后台管理模板

    运行Django后,浏览器中输入 http://127.0.0.1:8000/admin/ 会报错如图:

    后台报错.png

    因为我们已经将默认的文件模板位置都指向了自定义模板的位置,所以需要把后台相关模板文件复制到自定义模板位置。
    把 django/contrib/admin/templates 目录下的 admin 和 registration 两个文件夹复制到 ./templates 里面

    此时,重新运行Django,再次打开 http://127.0.0.1:8000/admin/ 又一切正常了

    相关文章

      网友评论

        本文标题:二、Django2.1 搭建简单的博客网站扩展——自定义模板和静

        本文链接:https://www.haomeiwen.com/subject/knosjqtx.html