您现在的位置是：网站首页>>编程开发编程开发

概述

将一个页面拆分成几分部分，利用继承来重复使用相同的部分，利用插入来灵活组成不同的页面布局。

1、页面拆分如图



说明：

如图所示，将页面拆分成了8个部分，将8个部分单独做成模块。其中，1和8会在各个页面固定重复出现，可插入到一个基础模板中，其它六个部分作为功能模块，可任意组合成固定结构的模板或页面。

2、页面设计思路图




按照页面拆分成8个部分，设计了8个独立模块。另外，为了减少页面重复，定义了base.html基础模板，首页继承于base.html模板，而其它页面又是另一类布局，因此在继承base.html基础上稍作调整，定义了subbase.html基础模板。

页面主要可分为首页、文章列表页、文章详情页、标签文章列表页这四个页面，文章列表页、文章详情页和标签文章列表页根据传入的参数不同，显示不同的内容及效果。

3、静态展示页面设计

Github 下载v0.0.1

sh# git clone --branch ‘v0.0.1’ https://github.com/xdao07/xdsite.git

项目文件结构如图：



注意：templates和static目录

4、设置url

（1）添加应用的url文件blog/urls.py

from django.conf.urls import url
from django.views.generic import TemplateView   # 通用视图，可直接将静态映射为视图函数

urlpatterns = [
    url(r'^$', TemplateView.as_view(template_name='blog/index.html'), name='home'),
    url(r'^aboutme/$', TemplateView.as_view(template_name='blog/aboutme.html'), name='aboutme'),
    url(r'^messageme/$', TemplateView.as_view(template_name='blog/messageme.html'), name='messageme'),
    url(r'^article_list/$', TemplateView.as_view(template_name='blog/articlelist.html'), name='article_list'),
    url(r'^article/$', TemplateView.as_view(template_name='blog/article.html'), name='article'),
]

（2）将应用的url添加到项目url中xdsite/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', namespace='blog', app_name='blog')),
]

5、浏览器中测试静态页面效果




代码查看：https://github.com/xdao07/xdsite/tree/v0.0.1

代码下载：git clone --branch v0.0.1 https://github.com/xdao07/xdsite.git