1 知識點
- 將靜態(tài)文件和模板文件整合到項目
- 模板的規(guī)劃與設(shè)計
本次用到的前端HTML素材下載： 前端素材
2 詳細(xì)步驟：
2.1 將模板文件整合到項目中并測試
先將靜態(tài)文件和模板文件放到對應(yīng)的目錄
Paste_Image.png
配置項目設(shè)置文件【settings.py】
INSTALLED_APPS = [
'blog', # 將新建的app注冊到項目中
]
TEMPLATES = [
{
'DIRS': [
os.path.join(BASE_DIR, 'templates'), # 模板文件的路徑設(shè)置
],
},
]
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static'), # 靜態(tài)文件路徑設(shè)置
)
視圖函數(shù)views的設(shè)置【views.py】
def index(request):
return render(request, 'index.html', locals())
路由urls的設(shè)置【urls.py】
這里順便優(yōu)化下路由的代碼尸变，將blog這個app相關(guān)的urls單獨放在app的【urls.py】中
# django_blog的【urls.py】設(shè)置
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】設(shè)置
from django.conf.urls import url
from blog.views import index
urlpatterns = [
url(r'^$', index, name='index'),
]
重新啟動服務(wù)訪問 http://127.0.0.1:8000/ 如果看到一下界面說明靜態(tài)文件和模板文件的路徑設(shè)置正常
沒有加載樣式的頁面
2.2 引入css丐箩、js和img文件
靜態(tài)文件路徑修改【****.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 模板規(guī)劃與設(shè)計
如規(guī)劃設(shè)計圖片顯示的內(nèi)容
- 將整個網(wǎng)站分成1和2大部分：第1部分是base模板中相對固定的部分，第2部分是經(jīng)常需要變更的部分兢哭。
- 將第1部分再劃分成ABCDEF：都是相對獨立的部分领舰，通過include方法引入
規(guī)劃設(shè)計
2.3.1 將整個網(wǎng)站分成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 %}
...（文章部分內(nèi)容）
{% 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>
將對應(yīng)的代碼放到對應(yīng)的模板文件里面
tags.html
2.4 上下文全局變量
這里會定義一些全部頁面都要加載的變量。例如：
- base模板里面的一些標(biāo)題迟螺、鏈接等冲秽，方便全局修改
- 分頁類和分頁的數(shù)據(jù)（后面講解）
定義一個全局變量的函數(shù)，將函數(shù)中的變量返回【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中定義的函數(shù)加入到上下文到處理器中【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', # 將全局變量加入到上下文處理器中
],
},
},
]
# 網(wǎng)站基本信息配置
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'
在前端相當(dāng)于一個變量來使用辙诞，前端會渲染成settings中配置的內(nèi)容【**.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>關(guān)注我</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
相關(guān)下載
歡迎留言，博文會持續(xù)更新~~
