[django项目] 静态页面抽取模板

最新推荐文章于 2022-07-19 21:36:44 发布

Makesths

最新推荐文章于 2022-07-19 21:36:44 发布

阅读量716

点赞数 1

分类专栏： django笔记文章标签： django

本文链接：https://blog.csdn.net/makesomethings/article/details/98384185

版权

django笔记专栏收录该内容

26 篇文章 14 订阅

订阅专栏

静态页面抽取模板

一、分析静态页面

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等文件夹用来存放静态文件。

[外链图片转存失败(img-klOzlcBJ-1564840637202)(静态页面抽取模板.assets/1562325786876.png)]

3.分析模板页面

观察提供静态模板页面，找出模板的公共部分，然后抽取作为基础模板。

[外链图片转存失败(img-BQz8wF6T-1564840637205)(静态页面抽取模板.assets/1562315355150.png)]

经过观察，发现提供的模板布局为，顶部导航，中间内容，右边侧栏，和底部页脚。其中除了中间内容的布局有所差异，其他三个部分的布局都没有改变，我们可以将这三个部分抽出来作为base模板。

二、模板抽取

首先提供的模板静态文件先复制进static文件下相应的文件夹

1.base模板抽取

根据上面的分析提取顶部导航，底部页脚，和侧栏，在base目录下创建base.html代码如下：

{% load static %}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
    
    <!-- title start -->
  <title>{% block title %}{% endblock title %}</title>
    <!-- title end -->
    
  <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">
    
    <!-- 页面css start -->
    {% block link %}
    {% endblock link %}
    <!-- 页面css end -->
    
</head>
<body>
<!-- header start -->
<header id="header">
  <div class="mw1200 header-contain clearfix">
      
    <!-- logo start -->
    <h1 class="logo">
      <a href="javascript:void(0);" class="logo-title">Python</a>
    </h1>
    <!-- logo end -->
      
    <!-- 导航卡 start -->
    <nav class="nav">...</nav>
    <!-- 导航卡 end -->
      
    <!-- 登陆/注册 start -->
      <div class="login-box">...</div>
    <!-- 登陆/注册 end -->
      
  </div>
</header>
<!-- header end -->

<!-- main start 模板 -->
{% block main_start %}
<main id="main">
  <div class="w1200 clearfix">
      
    <!-- main-contain start  -->
      {% block main_contain %}
      {% endblock main_contain %}
    <!-- main-contain end -->

    <!-- side start -->
        {% block side %}
      <aside class="side">
          <!-- 热门文章 start  -->
          <div class="side-activities">...</div>
          <!-- 热门文章 end  -->
          
          <!-- 关注作者 start  -->
          <div class="side-attention clearfix">...</div>
          <!-- 关注作者 end  -->
          
          {% block hot_recommend %}
              <!-- 热门推荐 start  -->
              <div class="side-hot-recommend">...</div>
              <!-- 热门推荐 end -->
          {% endblock hot_recommend %}

      </aside>
        {% endblock side %}
    <!-- side end -->
  </div>
</main>
{% endblock main_start %}
<!-- main 内容模板 end -->

<!-- footer start -->
<footer id="footer">...</footer>
<!-- footer end -->
    
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script src="{% static 'js/base/common.js' %}"></script>
<!-- 自定义js start -->
{% block script %}
{% endblock script %}
<!-- 自定义js end -->
</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

关于选项卡下标线

为了增加美观, 同时提升使用效率, 我们选择在每个选项卡的下标处添加一条线, 来表示当前所选中的页面, 如图

[外链图片转存失败(img-Ff1OPi8Q-1564840637206)()]

我们先去页面console中查看一下选项卡, 如图

[外链图片转存失败(img-TaOilG3v-1564840637206)()]

索引为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/

Makesths

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
[django项目] 静态页面抽取模板

静态页面抽取模板一、分析静态页面1.静态vs动态条目静态页面动态页面网站内容固定不变随访问时间，对象等不断变化访问速度更快，不需要脚本计算及读取后台数据库更慢改变内容不方便，需要修改页面文件然后上传简单，更新数据库即可安全性因为没有后台交互安全性更高有安全隐患，容易被攻击兼容性跨平台，跨服务器依赖网站开发语言环境(python...
复制链接

扫一扫

专栏目录