Django項目: 2.模板抽取
爲何要抽模板,由於這樣可以複用代碼,減小代碼量,須要原代碼時就不須要修改,也不須要添加; 若是不一樣,就只須要單獨修改不同的地方就行 : 多挖坑,少代碼,這就是抽模板的精髓,挖坑就是({% block xxx %}須要改變的代碼{% endblock %})
靜態頁面抽取模板
1、分析靜態頁面
1.靜態vs動態
2.本次項目頁面分析
本項目由5個模塊組成分別是：news、course、doc、user、admin，按照django的風格，在前面建立的模板文件夾templates下，分別建立以app名命名的文件夾news，course，doc，user，admin，用於存放每一個應用的模板文件。在前面建立的靜態文件夾statc下，也分別建立js，css，images，font等文件夾用來存放靜態文件。javascript
3.分析模板頁面
觀察提供靜態模板頁面，找出模板的公共部分，而後抽取做爲基礎模板。css
通過觀察，發現提供的模板佈局爲，頂部導航，中間內容，右邊側欄，和底部頁腳。其中除了中間內容的佈局有所差別，其餘三個部分的佈局都沒有改變，咱們能夠將這三個部分抽出來做爲base模板。html
2、模板抽取
首先提供的模板靜態文件先複製進static文件下相應的文件夾java
1.base模板抽取
根據上面的分析提取頂部導航，底部頁腳，和側欄，在base目錄下建立base.html代碼以下：python
{% load static %} <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- title 模板 -->
<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 模板 --> {% 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 -->
<!-- nav start -->
<nav class="nav">
<ul class="menu">
<li class="active"><a href="base.html">首頁</a></li>
<li><a href="../course/course.html">在線課堂</a></li>
<li><a href="../doc/docDownload.html">下載文檔</a></li>
<li><a href="search.html">搜索</a></li>
</ul>
</nav>
<!-- nav end -->
<!-- login start -->
<div class="login-box">
<div>
<i class="PyWhich py-user"></i>
<span>
<a href="../users/login.html" class="login">登陸</a> / <a href="../users/register.html"
class="reg">註冊</a>
</span>
</div>
<div class="author hide">
<i class="PyWhich py-user"></i>
<span>qwertyui</span>
<ul class="author-menu">
<li><a href="javascript:void(0);">後臺管理</a></li>
<li><a href="javascript:void(0);">退出登陸</a></li>
</ul>
</div>
</div>
<!-- login end -->
</div>
</header>
<!-- header end -->
<!-- main start 模板 --> {% block main_start %} <main id="main">
<div class="w1200 clearfix">
<!-- main-contain 模板 --> {% block main_contain %} {% endblock main_contain %} <!-- main-contain end -->
<!-- side start 模板 --> {% block side %} <aside class="side">
<div class="side-activities">
<h3 class="activities-title">在線課堂<a href="javascript:void(0)">更多</a></h3>
<div class="activities-img">
<a href="javascript:void(0);" target="_blank">
<img src="{% static 'images/english.jpg' %}" alt="title">
</a>
<p class="activities-tips">對話國外小姐姐</p>
</div>
<ul class="activities-list">
<li>
<a href="javascript:void(0);" target="_blank">
<span class="active-status active-start">報名中</span>
<span class="active-title"><a href="https://www.shiguangkey.com/course/2432"> Django 項目班</a></span>
</a>
</li>
<li>
<a href="javascript:void(0);" target="_blank">
<span class="active-status active-end">已結束</span>
<span class="active-title"><a href="https://www.shiguangkey.com/course/2321">Python入門基礎班</a></span>
</a>
</li>
</ul>
</div>
<div class="side-attention clearfix">
<h3 class="attention-title">關注我</h3>
<ul class="side-attention-address">
<li>
<a href="javascript:void(0);" target="_blank"><i class="PyWhich py-GitHub"></i>XinLan</a>
</li>
<li>
<a href="javascript:void(0);" target="_blank"><i class="PyWhich py-zhihu" style="color:rgb(0, 108, 226);"></i>XinLan</a>
</li>
<li>
<a href="javascript:void(0);" target="_blank"><i class="PyWhich py-weibo" style="color:rgb(245,92,110);"></i>XinLan</a>
</li>
</ul>
<div class="side-attention-qr">
<p>掃碼關注</p>
</div>
</div>
<!-- 熱門推薦 模板 --> {% block hot_recommend %} <div class="side-hot-recommend">
<h3 class="hot-recommend">熱門推薦</h3>
<ul class="hot-news-list">
<li>
<a href="javascript:void(0)" class="hot-news-contain clearfix">
<div class="hot-news-thumbnail">
<img src="{% static 'images/python_web.jpg' %}" alt="">
</div>
<div class="hot-news-content">
<p class="hot-news-title">Django調試工具django-debug-toolbar安裝使用教程</p>
<div class="hot-news-other clearfix">
<span class="news-type">python框架</span>
<!-- 自帶的 -->
<time class="news-pub-time">11月11日</time>
<span class="news-author">python</span>
</div>
</div>
</a>
</li>
</ul>
</div> {% endblock hot_recommend %} <!-- 熱門推薦 模板 end -->
</aside> {% endblock side %} <!-- side end -->
</div>
</main> {% endblock main_start %} <!-- main 內容模板 end -->
<!-- footer start -->
<footer id="footer">
<div class="footer-box">
<div class="footer-content">
<p class="top-content">
<span class="link">
<a href="javascript:void(0)">關於Python</a> |
<a href="javascript:void(0)">我就是我</a> |
<a href="javascript:void(0)">人生苦短</a> |
<a href="javascript:void(0)">我用Python</a>
</span>
<span class="about-me">關於我: <i class="PyWhich py-wechat"></i> XinLan</span>
</p>
<p class="bottom-content">
<span>地址： xxxx</span>
<span>聯繫方式: <a href="tel:400-1567-315">400-1567-315</a> (24小時在線)</span>
</p>
</div>
<p class="copyright-desc"> Copyright © 2008 - 2018 xxx有限公司. All Rights Reserved </p>
</div>
</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模板 --> {% block script %} {% endblock script %} <!-- 自定義js模板 end -->
</body>
</html>
注意靜態文件的引用。mysql
2.news模塊index頁面
news/index.html代碼：jquery
{% 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">
<!-- banner start -->
<div class="banner">
<ul class="pic">
<!--淡入淡出banner-->
<li><a href="javascript:void(0);"><img src="{% static 'images/linux.jpg' %}" alt="test"></a></li>
<li><a href="javascript:void(0);"><img src="{% static 'images/python_gui.jpg' %}" alt="test"></a></li>
<li><a href="javascript:void(0);"><img src="{% static 'images/python_function.jpg' %}" alt="test"></a></li>
<li><a href="javascript:void(0);"><img src="{% static 'images/python_advanced.jpg' %}" alt="test"></a></li>
<li><a href="javascript:void(0);"><img src="{% static 'images/jichujiaochen.jpeg' %}" alt="test"></a></li>
<li><a href="javascript:void(0);"><img src="{% static 'images/python_web.jpg' %}" alt="test"></a></li>
</ul>
<a href="javascript:void(0);" class="btn prev">
<i class="PyWhich py-arrow-left"></i></a>
<a href="javascript:void(0);" class="btn next">
<i class="PyWhich py-arrow-right"></i></a>
<ul class="tab">
<!-- 按鈕數量必須和圖片一致 -->
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<!-- banner end -->
<!-- content start -->
<div class="content">
<!-- recommend-news start -->
<ul class="recommend-news">
<li>
<a href="https://www.shiguangkey.com/course/2432" target="_blank">
<div class="recommend-thumbnail">
<img src="{% static 'images/python_gui.jpg' %}" alt="title">
</div>
<p class="info">Python GUI 教程 25行代碼寫一個小鬧鐘</p>
</a>
</li>
<li>
<a href="https://www.shiguangkey.com/course/2432" target="_blank">
<div class="recommend-thumbnail">
<img src="{% static 'images/python_advanced.jpg' %}" alt="title">
</div>
<p class="info">python高性能編程方法一</p>
</a>
</li>
<li>
<a href="https://www.shiguangkey.com/course/2432" target="_blank">
<div class="recommend-thumbnail">
<img src="{% static 'images/jichujiaochen.jpeg' %}" alt="title">
</div>
<p class="info">python基礎 split 和 join函數比較</p>
</a>
</li>
</ul>
<!-- recommend-news end -->
<!-- news-nav start-->
<nav class="news-nav">
<ul class="clearfix">
<li class="active"><a href="javascript:void(0)">最新資訊</a></li>
<li><a href="javascript:void(0)" data-id="1">python框架</a>
</li>
<li><a href="javascript:void(0)" data-id="2">Python基礎</a>
</li>
<li><a href="javascript:void(0)" data-id="3">Python高級</a>
</li>
<li><a href="javascript:void(0)" data-id="4">Python函數</a>
</li>
<li><a href="javascript:void(0)" data-id="5">PythonGUI</a>
</li>
<li><a href="javascript:void(0)" data-id="6">Linux教程</a>
</li>
</ul>
</nav>
<!-- news-nav end -->
<!-- news-contain start -->
<div class="news-contain">
<ul class="news-list">
<li class="news-item">
<a href="https://www.shiguangkey.com/course/2432" class="news-thumbnail" target="_blank">
<img src="{% static 'images/linux.jpg' %}" alt="linux查找文件或目錄命令" title="linux查找文件或目錄命令">
</a>
<div class="news-content">
<h4 class="news-title"><a href="#">linux查找文件或目錄命令</a>
</h4>
<p class="news-details">linux查找文件或目錄命令，前提：知道文件或者目錄的具體名字，例如：sphinx.conffind 查找find / -name dirname 查找目錄find -name...</p>
<div class="news-other">
<span class="news-type">Linux教程</span>
<span class="news-time">11/11 18:24</span>
<span class="news-author">python</span>
</div>
</div>
</li>
<li class="news-item">
<a href="https://www.shiguangkey.com/course/2432" class="news-thumbnail" target="_blank">
<img src="{% static 'images/linux.jpg' %}" alt="linux下svn命令的使用" title="linux下svn命令的使用">
</a>
<div class="news-content">
<h4 class="news-title"><a href="https://www.shiguangkey.com/course/2432/887">linux下svn命令的使用</a>
</h4>
<p class="news-details">1、將文件checkout到本地目錄svn checkout path（path是服務器上的目錄） 例如：svn checkout svn://192.168.1.1/pro/domain 簡寫：svn co二、往版本庫中添加新的文件 svn addfile 例如：svn add te...</p>
<div class="news-other">
<span class="news-type">Linux教程</span>
<span class="news-time">11/11 18:24</span>
<span class="news-author">python</span>
</div>
</div>
</li>
<li class="news-item">
<a href="https://www.shiguangkey.com/course/2432" class="news-thumbnail" target="_blank">
<img src="{% static 'images/linux.jpg' %}" alt="實現linux和windows文件傳輸" title="實現linux和windows文件傳輸">
</a>
<div class="news-content">
<h4 class="news-title"><a href="https://www.shiguangkey.com/course/2432/886">實現linux和windows文件傳輸</a>
</h4>
<p class="news-details"> 其實這個題目有點大，這裏介紹的只是linux和windows文件傳輸中的一種，可是這種方法卻很是實用，那就是：ZModem協議具體是linux命令是：rz...</p>
<div class="news-other">
<span class="news-type">Linux教程</span>
<span class="news-time">11/11 18:24</span>
<span class="news-author">python</span>
</div>
</div>
</li>
<li class="news-item">
<a href="https://www.shiguangkey.com/course/2432" class="news-thumbnail" target="_blank">
<img src="{% static 'images/linux.jpg' %}" alt=".htaccess配置詳解" title=".htaccess配置詳解">
</a>
<div class="news-content">
<h4 class="news-title"><a href="https://www.shiguangkey.com/course/2432">.htaccess配置詳解</a>
</h4>
<p class="news-details"> .htaccess文件設置基礎教程 若是你設置好了好比經常使用的404頁面 301重定向 頁面還有500頁面等會設置了 無非對你的seo技術有很大幫助那麼 .htaccess文件到底怎麼設置呢 - .htaccess 文件(或者"分佈式...</p>
<div class="news-other">
<span class="news-type">Linux教程</span>
<span class="news-time">11/11 18:24</span>
<span class="news-author">python</span>
</div>
</div>
</li>
<li class="news-item">
<a href="https://www.shiguangkey.com/course/2432" class="news-thumbnail" target="_blank">
<img src="{% static 'images/linux.jpg' %}" alt="使用nohup命令讓linux程序後臺運行" title="使用nohup命令讓linux程序後臺運行">
</a>
<div class="news-content">
<h4 class="news-title"><a href="https://www.shiguangkey.com/course/2432">使用nohup命令讓linux程序後臺運行</a>
</h4>
<p class="news-details">使用nohup讓程序永遠後臺運行Unix/Linux下通常好比想讓某個程序在後臺運行，不少都是使用 & 在程序結尾來讓程序自動運行。好比咱們要運行mysql在後臺：/usr/local/mysql/bin/mysqld_safe --user=mysql &可是...</p>
<div class="news-other">
<span class="news-type">Linux教程</span>
<span class="news-time">11/11 18:24</span>
<span class="news-author">python</span>
</div>
</div>
</li>
</ul>
</div>
<!-- news-contain end -->
<!-- btn-more start -->
<a href="javascript:void(0);" class="btn-more">加載更多</a>
<!-- btn-more end -->
</div>
<!-- content end -->
</div> {% endblock main_contain %} {% block script %} <script src="{% static 'js/news/index.js' %}"></script> {% endblock script %}
news/views.py代碼(視圖代碼)linux
from django.shortcuts import render def index(request): return render(request, 'news/index.html')
news/urls.py代碼(路由配置)web
from django.urls import path from . import views # url的命名空間 app_name = 'news' urlpatterns = [ path('', views.index, name='index'), # 將這條路由命名爲index ]
這會還得在主項目下配置分路由代碼(根urls.py代碼)sql
from django.urls import path, include urlpatterns = [
# 配置分路由用include path('', include('news.urls')) ]
相關文章
- 1. Django ----- 模板2
- 2. 【python-Django】2.模板系統
- 3. Django 模板語法取值
- 4. Django項目: 項目環境搭建 ---- 2、django項目設置
- 5. superword中的模板抽取實踐
- 6. 模板模式與抽象工廠模式的代碼抽取
- 7. （2：django項目的創建
- 8. Maven 項目模板
- 9. Vue模板項目
- 10. jade---模板項目
- 更多相關文章...
- • Maven 項目模板 - Maven教程
- • Eclipse 代碼模板 - Eclipse 教程
- • 委託模式
- • 算法總結-歸併排序
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 「插件」Runner更新Pro版，幫助設計師遠離996
- 2. 錯誤 707 Could not load file or assembly ‘Newtonsoft.Json, Version=12.0.0.0, Culture=neutral, PublicKe
- 3. Jenkins 2018 報告速覽，Kubernetes使用率躍升235%！
- 4. TVI-Android技術篇之註解Annotation
- 5. android studio啓動項目
- 6. Android的ADIL
- 7. Android卡頓的檢測及優化方法彙總（線下+線上）
- 8. 登錄註冊的業務邏輯流程梳理
- 9. NDK(1)創建自己的C/C++文件
- 10. 小菜的系統框架界面設計-你的評估是我的決策
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. Django ----- 模板2
- 2. 【python-Django】2.模板系統
- 3. Django 模板語法取值
- 4. Django項目: 項目環境搭建 ---- 2、django項目設置
- 5. superword中的模板抽取實踐
- 6. 模板模式與抽象工廠模式的代碼抽取
- 7. （2：django項目的創建
- 8. Maven 項目模板
- 9. Vue模板項目
- 10. jade---模板項目