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 %}
<link href="{% static 'css/index.css' %}" rel="stylesheet">
<script type="text/javascript" src="{% static 'js/jquery.min.js' %}"></script>
加载样式的页面
2.3 模板规划与设计
如规划设计图片显示的内容
- 将整个网站分成1和2大部分：第1部分是base模板中相对固定的部分，第2部分是经常需要变更的部分。
- 将第1部分再划分成ABCDEF：都是相对独立的部分，通过include方法引入
规划设计
2.3.1 将整个网站分成2大部分
# [base.html]
{% load staticfiles %}
<!doctype html>
<html>
<head>
{% block custom_css %}{% endblock %}
{% block custom_js %}{% endblock %}
</head>
<body>
<article>
<div class="l_box f_l">
{% block left_content %}{% endblock %}
</div>
</article>
</body>
# [index.html]
{% extends 'base.html' %}
{% load staticfiles %}
{% block left_content %}
...（文章部分内容）
{% endblock %}
2.3.2 将第1部分再划分成ABCDEF
# [base.html]
<header>
{% include 'baseblock/ads.html' %}
</header>
<article>
<div class="l_box f_l">
{% block left_content %}{% endblock %}
</div>
<div class="r_box f_r">
{% include 'baseblock/about.html' %}
{% include 'baseblock/charts.html' %}
{% include 'baseblock/tags.html' %}
{% include 'baseblock/sorts.html' %}
{% include 'baseblock/links.html' %}
</div>
</article>
将对应的代码放到对应的模板文件里面
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'370835062@qq.com'
在前端相当于一个变量来使用，前端会渲染成settings中配置的内容【**.html】
# base.html
<header>
<div class="logo">
<h1>{{ site_name }}</h1>
<p>{{ site_desc }}</p>
</div>
{% include 'baseblock/ads.html' %}
</header>
# about.html
<div class="tit01">
<h3>关注我</h3>
<div class="gzwm">
<ul>
<li><a class="xlwb" href="{{ weibo_sina }}" target="_blank">新浪微博</a></li>
<li><a class="txwb" href="{{ weibo_tencent }}" target="_blank">腾讯微博</a></li>
<li><a class="rss" href="{{ pro_rss }}" target="_blank">RSS</a></li>
<li><a class="wx" href="mailto:{{ pro_mail }}">邮箱</a></li>
</ul>
</div>
</div>
完成小demo
相关下载
欢迎留言，博文会持续更新~~
