1 知识点

将静态文件和模板文件整合到项目
模板的规划与设计

本次用到的前端HTML素材下载：前端素材

2 详细步骤：

2.1 将模板文件整合到项目中并测试

先将静态文件和模板文件放到对应的目录

Paste_Image.png

配置项目设置文件【settings.py】

INSTALLED_APPS = [
    'blog',  # 将新建的app注册到项目中
]

TEMPLATES = [
    {
        'DIRS': [
            os.path.join(BASE_DIR, 'templates'),  # 模板文件的路径设置
        ],
    },
]

STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'static'),  # 静态文件路径设置
)

视图函数views的设置【views.py】

def index(request):
    return render(request, 'index.html', locals())

路由urls的设置【urls.py】
这里顺便优化下路由的代码，将blog这个app相关的urls单独放在app的【urls.py】中


# django_blog的【urls.py】设置
from django.conf.urls import url, include
from django.contrib import admin

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'', include('blog.urls'))

]

# blog的【urls.py】设置
from django.conf.urls import url
from blog.views import index

urlpatterns = [
    url(r'^$', index, name='index'),

]

重新启动服务访问 http://127.0.0.1:8000/ 如果看到一下界面说明静态文件和模板文件的路径设置正常

没有加载样式的页面

2.2 引入css、js和img文件

静态文件路径修改【****.html】，包括link中的href、script中的src、img中的src

{% load staticfiles %}


![]({% static 'images/a1.jpg' %})

加载样式的页面

2.3 模板规划与设计

如规划设计图片显示的内容

将整个网站分成1和2大部分：第1部分是base模板中相对固定的部分，第2部分是经常需要变更的部分。
将第1部分再划分成ABCDEF：都是相对独立的部分，通过include方法引入

规划设计

2.3.1 将整个网站分成2大部分

# [base.html]
{% load staticfiles %}



    {% block custom_css %}{% endblock %}
    {% block custom_js %}{% endblock %}



    
        {% block left_content %}{% endblock %}
    



# [index.html]
{% extends 'base.html' %}
{% load staticfiles %}
{% block left_content %}
    ...（文章部分内容）
{% endblock %}

2.3.2 将第1部分再划分成ABCDEF

# [base.html]

        {% include 'baseblock/ads.html' %}


    
        {% block left_content %}{% endblock %}
    
    
        {% include 'baseblock/about.html' %}
        {% include 'baseblock/charts.html' %}
        {% include 'baseblock/tags.html' %}
        {% include 'baseblock/sorts.html' %}
        {% include 'baseblock/links.html' %}

将对应的代码放到对应的模板文件里面

tags.html

2.4 上下文全局变量

这里会定义一些全部页面都要加载的变量。例如：

base模板里面的一些标题、链接等，方便全局修改
分页类和分页的数据（后面讲解）

定义一个全局变量的函数，将函数中的变量返回【views.py】

from django.conf import settings


# 全局的settings文件的配置
def global_setting(request):
    # settings中站点基本信息的配置
    site_name = settings.SITE_NAME
    site_desc = settings.SITE_DESC
    weibo_sina = settings.WEIBO_SINA
    weibo_tencent = settings.WEIBO_TENCENT
    pro_rss = settings.PRO_RSS
    pro_mail = settings.PRO_EMAIL
    return locals()

将views中定义的函数加入到上下文到处理器中【settings.py】

TEMPLATES = [
    {
        '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.views.global_setting',  # 将全局变量加入到上下文处理器中
            ],
        },
    },
]

# 网站基本信息配置

SITE_NAME = u'Spareribs的个人博客'
SITE_DESC = u'梦虽虚幻，却是自己的梦想；位虽低微，却是自己的岗位；屋虽简陋，却是自己的家；志虽渺小，却是自己的追求。'
WEIBO_SINA = u'http://weibo.com/'
WEIBO_TENCENT = u'http://weibo.com/'
PRO_RSS = u'http://weibo.com/'
PRO_EMAIL = u'[email protected]'

在前端相当于一个变量来使用，前端会渲染成settings中配置的内容【**.html】

# base.html

    
        {{ site_name }}
        {{ site_desc }}
    
        {% include 'baseblock/ads.html' %}


# about.html

    关注我
    
        
            新浪微博
            腾讯微博
            RSS
            邮箱

完成小demo

Django 个人博客 - 静态文件和模板文件 - step2