文章目录
配置好了项目基本配置后,下一步就是进行模板抽取了。由于基本的html和css文件都是写好的,因此只需要进行后端的逻辑代码和JS逻辑代码编写就行,其他html和css进行必要的补充。
一、模板抽取分析
模板抽取分析:
- 以base.html作为所有html的基本模板
- 将base.html分为3个部分:head和body 2个部分,其中:
- head分为title和css 2个块
- body分为header、main、footer、script 4个部分,其中
- header分为:image_logo、menu、login-box 3块
- main分为:左main_contain和右side 2块,其中:
- 左main_contain分为:banner、hot_news、news_tags、news_contain 4块
- 右side分为:online_class、follow_me、hot_recommend 3块
- footer分为:footer 1块
- script分为:script 1块
- 对app应用templates里面的html进行继承base.html进行填坑
- users:register.html、login.html
- news:index.html、news_detail.html、search.html
- docs:docDownload.html
- course:course.html、course_detail.html
二、模板抽取
1. base.html挖坑
从上面分析首先对base.html挖坑,根据对应的将坑挖好。
1. head挖坑
-
title
<title>{% block title %} 页面标题 {% endblock %}</title>
-
css
<link rel="stylesheet" href="{% static 'css/base/reset.css' %}"> <link rel="stylesheet" href="{% static 'css/base/common.css' %}"> <link rel="stylesheet" href="{% static 'css/news/index.css' %}"> <link rel="stylesheet" href="{% static 'css/base/side.css' %}"> <link rel="stylesheet" href="http://at.alicdn.com/t/font_684044_un7umbuwwfp.css"> {% block css %} {% endblock %}
2. body挖坑
-
header
-
image_logo
{% block image_logo %} <h1 class="logo"> <a href="javascript:void(0);" class="logo-title">Python</a> </h1> {% endblock %}
-
menu
{% block menu %} <nav class="nav"> <ul class="menu"> <li><a href="javascript:void(0);">首页</a></li> <li><a href="javascript:void(0);">课堂</a></li> <li><a href="javascript:void(0);">下载文档</a></li> <li><a href="sjavascript:void(0); </nav> {% endblock %}
-
login_box
{% block login_box %} <div class="login-box"> <div> <i class="PyWhich py-user"></i> <span> <a href="javascript:void(0);" class="login">登录</a> / <a href="javascript:void(0);"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> {% endblock %}
-
-
main
-
main_contain
-
banner
{% block banner %} <div class="banner"> <ul class="pic"><!--淡入淡出banner--> <li><a href="javascript:void(0);"><img src="../../static/images/ui.png" alt="test"></a></li> <li><a href="javascript:void(0);"><img src="../../static/images/youxi.png" alt="test"></a></li> <li><a href="javascript:void(0);"><img src="../../static/images/dianshang.png" alt="test"></a></li> <li><a href="javascript:void(0);"><img src="../../static/images/zimeiti.png" alt="test"></a></li> <li><a href="javascript:void(0);"><img src="../images/python_gui.jpg" alt="test"></a></li> <li><a href="javascript:void(0);"><img src="../../static/images/linux.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> {% endblock %}
-
hot_news
{% block hot_news %} <ul class="recommend-news"> <li> <a href="javascript:void(0)" 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="javascript:void(0)" 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="javascript:void(0)" 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> {% endblock %}
-
news_tags
{% block news_tags %} <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> {% endblock %}
-
news_contain
{% block news_contain %} <div class="news-contain"> <ul class="news-list"> <li class="news-item"> <a href="javascript:void(0)" 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="javascript:void(0)" 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="javascript:void(0)">linux下svn命令的使用</a> </h4> <p class="news-details">1、将文件checkout到本地目录svn checkout path(path是服务器上的目录) 例如:svn checkout svn://192.168.1.1/pro/domain 简写:svn co2、往版本库中添加新的文件 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="javascript:void(0)" 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="javascript:void(0)" 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="javascript:void(0)">.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="javascript:void(0)" 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> <a href="javascript:void(0);" class="btn-more">加载更多</a> {% endblock %}
-
-
side
-
online_class
{% block online_class %} <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="../images/english.jpg" alt="title"> </a> <p class="activities-tips">xxxx</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="javascript:void(0);">Python入门基础班</a></span> </a> </li> </ul> </div> {% endblock %}
-
follow_me
{% block follow_me %} <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>Taka</a> </li> <li> <a href="javascript:void(0);" target="_blank"><i class="PyWhich py-zhihu" style="color:rgb(0, 108, 226);"></i>Taka</a> </li> <li> <a href="javascript:void(0);" target="_blank"><i class="PyWhich py-weibo" style="color:rgb(245,92,110);"></i>Taka</a> </li> </ul> <div class="side-attention-qr"> <p>扫码关注</p> </div> </div> {% endblock %}
-
hot_recommend
{% 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 %}
-
-
-
footer
{% block footer %} <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> Taka</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 - 2019 xxx有限公司. All Rights Reserved </p> </div> </footer> {% endblock %}
-
script
<script src="{% static 'js/users/jQuery_3.3.1.js' %}"></script> <script src="{% static 'js/commons.js' %}"></script> <script src="{% static 'js/index.js' %}"></script> {% block script %} {% endblock %}
base.html挖坑集合为:
{% load staticfiles %}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>{% block title %} IndexPage {% endblock %}</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/news/index.css' %}">
<link rel="stylesheet" href="{% static 'css/base/side.css' %}">
<link rel="stylesheet" href="http://at.alicdn.com/t/font_684044_un7umbuwwfp.css">
{% block css %}
{% endblock %}
</head>
<body>
<!-- header start -->
{% block header %}
<header id="header">
<div class="mw1200 header-contain clearfix">
<!-- logo start -->
{% block image_logo %}
<h1 class="logo">
<a href="javascript:void(0);" class="logo-title">Python</a>
</h1>
{% endblock %}
<!-- logo end -->
<!-- nav start -->
{% block menu %}
<nav class="nav">
<ul class="menu">
<li><a href="index.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>
{% endblock %}
<!-- nav end -->
<!-- login start -->
{% block login_box %}
<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 -->
{% endblock %}
</div>
</header>
{% endblock %}
<!-- header end -->
<!-- main start -->
{% block main %}
<main id="main">
<div class="w1200 clearfix">
<!-- main-contain start -->
<div class="main-contain">
<!-- banner start -->
{% block banner %}
<div class="banner">
<ul class="pic"><!--淡入淡出banner-->
<li><a href="javascript:void(0);"><img src="../../static/images/ui.png" alt="test"></a></li>
<li><a href="javascript:void(0);"><img src="../../static/images/youxi.png" alt="test"></a></li>
<li><a href="javascript:void(0);"><img src="../../static/images/dianshang.png" alt="test"></a></li>
<li><a href="javascript:void(0);"><img src="../../static/images/zimeiti.png" 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/linux.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>
{% endblock %}
<!-- banner end -->
<!-- content start -->
{% block content%}
<div class="content">
<!-- recommend-news start -->
{% block hot_news %}
<ul class="recommend-news">
<li>
<a href="javascript:void(0)" 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="javascript:void(0)" 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="javascript:void(0)" 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>
{% endblock %}
<!-- recommend-news end -->
<!-- news-nav start-->
{% block news_tags %}
<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>
{% endblock %}
<!-- news-nav end -->
<!-- news-contain start -->
{% block news_contain %}
<div class="news-contain">
<ul class="news-list">
<li class="news-item">
<a href="javascript:void(0)" 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="javascript:void(0)" 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="javascript:void(0)">linux下svn命令的使用</a>
</h4>
<p class="news-details">1、将文件checkout到本地目录svn checkout path(path是服务器上的目录) 例如:svn checkout
svn://192.168.1.1/pro/domain 简写:svn co2、往版本库中添加新的文件 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="javascript:void(0)" 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="javascript:void(0)" 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="javascript:void(0)">.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="javascript:void(0)" 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>
<a href="javascript:void(0);" class="btn-more">加载更多</a>
<!-- btn-more end -->
{% endblock %}
</div>
{% endblock %}
<!-- content end -->
</div>
<!-- main-contain end -->
<!-- side start -->
{% block aside %}
<aside class="side">
{% block online_class %}
<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="../images/english.jpg" alt="title">
</a>
<p class="activities-tips">xxx</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="javascript:void(0);"> 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>
{% endblock %}
{% block follow_me %}
<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>Taka</a>
</li>
<li>
<a href="javascript:void(0);" target="_blank"><i class="PyWhich py-zhihu"
style="color:rgb(0, 108, 226);"></i>Taka</a>
</li>
<li>
<a href="javascript:void(0);" target="_blank"><i class="PyWhich py-weibo"
style="color:rgb(245,92,110);"></i>Taka</a>
</li>
</ul>
<div class="side-attention-qr">
<p>扫码关注</p>
</div>
</div>
{% endblock %}
{% 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 %}
</aside>
{% endblock %}
<!-- side end -->
</div>
</main>
{% endblock %}
<!-- main end -->
<!-- footer start -->
{% block footer %}
<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> Taka</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 - 2019 xxx有限公司. All Rights Reserved
</p>
</div>
</footer>
{% endblock %}
<!-- footer end -->
<script src="{% static 'js/users/jQuery_3.3.1.js' %}"></script>
<script src="{% static 'js/commons.js' %}"></script>
<script src="{% static 'js/index.js' %}"></script>
{% block script %}
{% endblock %}
</body>
</html>
2. app应用templates填坑
1. users
-
register.html 注册页面
{% extends 'base/base.html' %} {% load staticfiles %} {% block title %} 注册 {% endblock %} {% block css %} <link rel="stylesheet" href="{% static 'css/authPro/auth.css' %}"> {% endblock %} {% block main %} <main id="container"> <div class="register-contain"> <div class="top-contain"> <h4 class="please-register">请注册</h4> <a href="#" class="login">立即登录 ></a> </div> <form action="" method="post" class="form-contain"> {% csrf_token %} <div class="form-item"> <input type="text" placeholder="请输入用户名" id="user_name" name="username" class="form-control" autocomplete="off" > </div> <div class="form-item"> <input type="password" placeholder="请输入密码" id="pwd" name="password" class="form-control"> </div> <div class="form-item"> <input type="password" placeholder="请输入确认密码" name="password_repeat" class="form-control"> </div> <div class="form-item"> <input type="tel" placeholder="请输入手机号" id="mobile" name="telephone" class="form-control" autocomplete="off" > </div> <div class="form-item"> <input type="text" placeholder="请输入图形验证码" id="input_captcha" name="captcha_graph" class="form-captcha"> <a href="#" class="captcha-graph-img"> <img src="" alt="验证码" title="点击刷新"> </a> </div> <div class="form-item"> <input type="text" placeholder="请输入短信验证码" name="sms_captcha" class="form-captcha" id="input_smscode" autocomplete="off"> <a href="javascript:void(0);" class="sms-captcha" title="发送验证码">获取短信验证码</a> </div> <div class="form-item"> <input type="submit" value="立即注册" class="register-btn"> </div> </form> </div> </main> {% endblock %} {% block script %} <script src="{% static 'js/users/register.js' %}"></script> {% endblock %}
-
login.html 登录页面
{% extends "base/base.html" %} {% load staticfiles %} {% block title %} 登录 {% endblock %} {% block link %} <link rel="stylesheet" href="{% static 'css/authPro/auth.css' %}"> {% endblock %} {% block main %} <!-- container start --> <main id="container"> <div class="login-contain"> <div class="top-contain"> <h4 class="please-login">请登录</h4> <a href="javascript:void(0);" class="register">立即注册 ></a> </div> <form action="" method="post" class="form-contain"> <div class="form-item"> <input type="tel" placeholder="请输入手机号" name="telephone" class="form-control" autocomplete="off"> </div> <div class="form-item"> <input type="password" placeholder="请输入密码" name="password" class="form-control"> </div> <div class="form-item clearfix"> <label> <input type="checkbox" name="remember"> <span>记住我</span> </label> <a href="javascript:void(0);" class="forget-password">忘记密码?</a> </div> <div class="form-login"> <input type="submit" value="登录" class="login-btn"> </div> </form> </div> </main> <!-- container end --> {% endblock %} {% block script %} <script src="{% static 'js/users/login.js' %}"></script> {% endblock %}
-
forget.html 修改密码页面(待写)
2. news
-
index.html
{% extends "base/base.html" %} {% load staticfiles %} {% block title %} <title>文章</title> {% endblock %} {% block banner %} {% endblock %} {% block news_tags %} {% endblock %} {% block hot_news %} {% endblock %} {% block news_contain %} {% endblock %} {% block script %} <script src="{% static 'js/news/index.js' %}"></script> <script src="{% static 'js/news/banner.js' %}"></script> {% endblock %}
-
news_detail.html
{% extends 'base/base.html' %} {% load staticfiles %} {% block title %} <title>新闻详情</title> {% endblock %} {% block link %} <link rel="stylesheet" href="{% static 'css/news/news-detail.css' %}"> {% endblock %} {% block main %} {% endblock %} {% block script %} {% endblock %}
-
search.html(待写)