[django项目] 静态页面抽取模板
静态页面抽取模板
一、分析静态页面
1.静态vs动态
| 条目 | 静态页面 | 动态页面 |
|---|---|---|
| 网站内容 | 固定不变 | 随访问时间，对象等不断变化 |
| 访问速度 | 更快，不需要脚本计算及读取后台数据库 | 更慢 |
| 改变内容 | 不方便，需要修改页面文件然后上传 | 简单，更新数据库即可 |
| 安全性 | 因为没有后台交互安全性更高 | 有安全隐患，容易被攻击 |
| 兼容性 | 跨平台，跨服务器 | 依赖网站开发语言环境(python开发只能用python) |
| 开发语言 | html | python，java，php |
拿吃饭打个比方, 静态页面就像是做好的一份份盒饭, 用户消费的时候就直接拿取; 而动态页面就像是去吃炒菜, 每个人吃的口味菜品都不相同. 同时这个比喻也满足上述不同的条目情况
2.本次项目页面分析
本项目由5个模块组成分别是：news、course、doc、user、admin，按照django的风格，在前面创建的模板文件夹templates下，分别创建以app名命名的文件夹news，course，doc，user，admin，用于存放每个应用的模板文件。在前面创建的静态文件夹statc下，也分别创建js，css，images，font等文件夹用来存放静态文件。
![[django项目] 静态页面抽取模板_第1张图片](http://img.e-com-net.com/image/info8/89bb6ac7f5fd4aa0bce7bad197344fc1.jpg)
3.分析模板页面
观察提供静态模板页面，找出模板的公共部分，然后抽取作为基础模板。
![[django项目] 静态页面抽取模板_第2张图片](http://img.e-com-net.com/image/info8/06ded0bce0814e0da30464d34fb3456d.jpg)
经过观察，发现提供的模板布局为，顶部导航，中间内容，右边侧栏，和底部页脚。其中除了中间内容的布局有所差异，其他三个部分的布局都没有改变，我们可以将这三个部分抽出来作为base模板。
二、模板抽取
首先提供的模板静态文件先复制进static文件下相应的文件夹
1.base模板抽取
根据上面的分析提取顶部导航，底部页脚，和侧栏，在base目录下创建base.html代码如下：
{% load static %}
<html>
<head>
<meta charset="utf-8">
<title>{% block title %}{% endblock title %}title>
<link rel="stylesheet" href="{% static 'css/base/reset.css' %}">
<link rel="stylesheet" href="{% static 'css/base/common.css' %}">
<link rel="stylesheet" href="{% static 'css/base/side.css' %}">
<link rel="stylesheet" href="http://at.alicdn.com/t/font_684044_un7umbuwwfp.css">
{% block link %}
{% endblock link %}
head>
<body>
<header id="header">
<div class="mw1200 header-contain clearfix">
<h1 class="logo">
<a href="javascript:void(0);" class="logo-title">Pythona>
h1>
<nav class="nav">...nav>
<div class="login-box">...div>
div>
header>
{% block main_start %}
<main id="main">
<div class="w1200 clearfix">
{% block main_contain %}
{% endblock main_contain %}
{% block side %}
<aside class="side">
<div class="side-activities">...div>
<div class="side-attention clearfix">...div>
{% block hot_recommend %}
<div class="side-hot-recommend">...div>
{% endblock hot_recommend %}
aside>
{% endblock side %}
div>
main>
{% endblock main_start %}
<footer id="footer">...footer>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js">script>
<script src="{% static 'js/base/common.js' %}">script>
{% block script %}
{% endblock script %}
body>
html>
注意静态文件的引用。可以使用ctrl+R打开pycharm的正则替换:Pycharm小技巧–使用正则进行查找和批量替换
2.news模块index页面
news/index.html代码：
{% extends 'base/base.html' %}
{% load static %}
{% block title %}首页{% endblock title %}
{% block link %}
<link rel="stylesheet" href="{% static 'css/news/index.css' %}">
{% endblock link %}
{% block main_contain %}
<div class="main-contain">...div>
{% endblock main_contain %}
{% block script %}
<script src="{% static 'js/news/index.js' %}">script>
{% endblock script %}
news/views.py代码
from django.shortcuts import render
def index(request):
return render(request, 'news/index.html')
news/urls.py代码
from django.urls import path
from . import views
# url的命名空间
app_name = 'news'
urlpatterns = [
path('', views.index, name='index'), # 将这条路由命名为index
]
全局urls.py代码
from django.urls import path, include
urlpatterns = [
path('', include('news.urls'))
]
其他页面的模板抽取与news大同小异, 这里省略, 欲了解详情请移步码云:https://gitee.com/hao4875/newssite/tree/master/templates
关于选项卡下标线
为了增加美观, 同时提升使用效率, 我们选择在每个选项卡的下标处添加一条线, 来表示当前所选中的页面, 如图
![[django项目] 静态页面抽取模板_第3张图片](http://img.e-com-net.com/image/info8/0e7aa1ac6984449aa3c0f435ee71b5f4.jpg)
我们先去页面console中查看一下选项卡, 如图
![[django项目] 静态页面抽取模板_第4张图片](http://img.e-com-net.com/image/info8/36d9ec5429bf4a4db27afcc8b601416d.jpg)
索引为3的选项卡被active, 即搜索页面被选中, 由此我们获得了信息:
- 被选中的选项卡拥有class属性
active - 每个选项卡对应的索引为0~3
要实现我们想要的功能, 需要在base主模板的common.js页面渲染文件中添加一句JQuery语句
/*=== navMenuStart ===*/
$(()=>{
$('ul.menu').children('li').eq(iMenuIndex).addClass('active');
// 全局变量iMenuIndex,表示当前的选项卡索引
});
/*=== navMenuEnd ===*/
在base文件引用的文件做更改, 可以使所用继承base的页面模板都具有该功能
写完js, 再去相应的选项卡页面模板中给全局变量iMenuIndex负赋值, 因为我们已经知道了每个页面对应的索引, 所以直接使用0~3赋值即可
{# '首页' 的模板 #}
{% block link %}
<link rel="stylesheet" href="{% static 'css/news/index.css' %}">
<script>
{# 首页页面的索引 #}
iMenuIndex = 0
script>
{% endblock %}
码云源码:https://gitee.com/hao4875/newssite/