实现模板页面准备

拿到前端写的Html

• 这里只是举个栗子
• 我这里只是一个简单的模板
• 假设我们拿到的前端模板。或者自己在网上扒了一份代码

链接:https://pan.baidu.com/s/1NkOcNdPCKU03L-Zk3u88Mw&shfl=sharepset 密码:5azj

静态HTML分析（分析如何干活）

拿静态模板页面之后，结合我们之前的项目需求分析知道，我们需要实现六个页面的展现。

• 网站首页、文章分类列表页、搜索列表页、标签列表页、文章内容展示页、单页面（联系我们）。

其中，文章分类列表页、搜索列表页、标签列表页这三个页面展示结构都一样我们只需要一个模板页面即可。

我们只需要实现四个页面即可，这四个页面分别对应前端给我们模板里的

• 首页(index.html)
• 列表页（list.html）
• 内容页(show.html)
• 单页(page.html)。

了解我们需要做的工作之后，我们开始做好准备工作。

开始干活

1. 我们把静态模板static目录里的所有文件夹和文件复制到项目目录下的static目录里，然后把index.html、list.html、show.html、page.html四个页面复制到项目下templates目录里（之前做测试时templates目录里的index.html删除掉）。
2. 这四个页面，通过观察我们发现，头部和尾部是相同的，只有中间主体部分不相同，所以我们把这些相同的页面代码提取出来，新建一个文件base.html，把代码放到base.html里，头部代码和尾部代码中间部分用下面代码替代：

{% block content %}
{% endblock %}

index.html、list.html、show.html、page.html四个页面，我们把头部和尾部相同的代码删除掉，然后把剩下的代码放到下面代码标志对中间：

{% block content %} 
#把头部和尾部相同的代码删除之后把剩余放到这里面来
{% endblock %}

每个页面的第一行加上代码

{% extends "base.html" %}  # 继承 base.html页面的代码。

• 其中list.html和show.html这两个页面的右侧部分和index.html右侧除“热门文章排行"部分之外，都一样，所以我们也把这部分单独提取出来，放到right.html页面里，原来我们用下代码替代：

{% include 'right.html' %}

right.html

base.htmlbase.html

{% load staticfiles %}

告诉模板引擎，我们要加载引入静态资源。

然后把头部的CSS样式文件修改成下面的样子：

templates/base.html

网站LOGO图片：

templates/base.html

尾部的JS文件：

templates/base.html

修改完成结果

URL 干的活

urls.py

myblog/urls.py
from blog import views
#导入blogAPP下的views
urlpatterns = [
    path('admin/', admin.site.urls),#管理后台
    path('', views.index, name='index'),#网站首页
    path('list-.html', views.list, name='list'),#列表页
    path('show-.html', views.show, name='show'),#内容页
    path('tag/', views.tag, name='tags'),#标签列表页
    path('s/', views.search, name='search'),#搜索列表页
    path('about/', views.about, name='about'),#联系我们单页
    path('ueditor/', include('DjangoUeditor.urls')),
    re_path('^media/(?P.*)$', serve, {'document_root': settings.MEDIA_ROOT}),
]

lidsid

blog/views.py

blog/views.py
#首页
def index(request):
    pass
#列表页
def list(request,lid):
    pass
#内容页
def show(request,sid):
    pass
#标签页
def tag(request, tag):
    pass
# 搜索页
def search(request):
    pass
# 关于我们
def about(request):
    pass

urls.py

各位小伙伴如果觉得还可以，请关注、点赞、收藏。感谢各位！