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

2019-01-23 本文已影响44人 27efec53a72d

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

服务器环境搭建（选学）

在阿里云服务器从零开始上线Django项目：Ubuntu18.04+Python3+Django2，并通过公网IP访问

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

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

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

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

项目源码下载：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/ 又一切正常了