模板头部、底部、侧边栏和静态文件配置
base.html
{% load static %}
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>{% block title %} {% endblock %}</title>
<meta name="keywords" content="{% block keyword %} {% endblock %}">
<meta name="description" content="{% block description %} {% endblock %}">
<link rel="stylesheet" href="{% static 'css/base.css' %}">
<link rel="stylesheet" href="{% static 'css/style.css' %}">
<link rel="stylesheet" href="{% static 'css/font_2330415_5twcv6ntu9w.css' %}">
<script src="{% static 'js/jquery-3.1.1.min.js' %}"></script>
<script src="{% static 'js/all.js' %}"></script>
<script src="{% static 'js/kindeditor-all.js' %}"></script>
<script src="{% static 'js/zh-CN.js' %}"></script>
<script src="{% static 'js/config.js' %}"></script>
<script type="text/javascript" src="{% static 'js/shCore.js' %}"></script>
<script type="text/javascript" src="{% static 'js/shBrushPython.js' %}"></script>
<link type="text/css" rel="stylesheet" href="{% static 'css/shCoreDefault.css' %}">
<script type="text/javascript">SyntaxHighlighter.all();</script>
<link rel="shortcut icon" href="http://www.pyqt5.cn/static/images/favicon.ico">
<link href="{% static 'css/default.css' %}" rel="stylesheet"></head>
<body>
<!-- header start -->
<header class="header">
<div class="container">
<div class="navbar">
<a class="logo"><strong>PyQt5中文网</strong></a>
<label for="toggle-nav">
<i class="iconfont icon-caidan"></i>
</label>
<input type="checkbox" id="toggle-nav">
<nav class="navmeaus">
<ul class="links">
<li class="nav_item"><a href="http://www.pyqt5.cn/" title="PyQt5中文网首页">首页</a></li>
<li class="nav_item active"><a href="http://www.pyqt5.cn/video/" title="PyQt5视频教程">视频教程<i></i></a></li>
<li class="nav_item"><a href="http://www.pyqt5.cn/document.html" title="PyQt5中文手册">中文手册</a></li>
<li class="nav_item">
<a href="http://www.pyqt5.cn/blog/" title="PyQt5技术博文">技术博文<i class="iconfont icon-down"></i>
</a>
<div class="has_menu">
<ul class="menu">
<li class="menu_item"><a href="http://www.pyqt5.cn/question/" title="学员问题解答">学员问题</a></li>
</ul>
</div>
</li>
<li class="nav_item"><a href="http://www.pyqt5.cn/gui/" title="GUI界面模板">GUI模板</a></li>
<li class="nav_item"><a href="http://www.pyqt5.cn/tool/" title="开发工具下载">工具下载</a></li>
<li class="nav_item">
<a href="http://www.pyqt5.cn/python/" title="/Python">Python<i class="iconfont icon-down"></i></a>
<!--<div class="has_menu">-->
<!-- <ul class="menu">-->
<!-- <li class="menu_item"><a href="/django/" title="Django">Django</a></li>-->
<!-- <li class="menu_item"><a href="/scrapy/" title="scrapy">scrapy</a></li>-->
<!-- <li class="menu_item"><a href="/pytorch/" title="pytorch">pytorch</a></li>-->
<!-- </ul>-->
<!--</div>-->
</li>
</ul>
<form class="search" action="/search/" method="GET">{% csrf_token %}
<input type="text" name="search" value="" placeholder="输入关键字..." class="search_input">
<button type="submit" class="search_btn">
<i class="iconfont icon-search"></i>
</button>
</form>
<!-- 注册登录会员信息 开始 -->
<div class="reg_log">
{% if not request.session.username %}
<a href="/login/" title="登录" class="logon" rel="nofollow">登录</a>
<a href="/register/" title="注册" class="register_index" rel="nofollow">注册</a>
{% elif request.session.username %}
<a href="/login_out/" title="退出登陆" class="logon" rel="nofollow">退出登陆</a>
<a href="/register/" title="{{ request.session.username }}" class="register_index" rel="nofollow">{{ request.session.username }}</a>
{% endif %}
</div>
<!-- 注册登录会员信息 结束 -->
</nav>
</div>
</div>
</header>
<!-- header end -->
{% block body %} {% endblock %}
<!-- 网站页脚 start -->
<footer>
<div class="container">
<div class="content">
<div class="cont_fl">
<div class="log">PyQt5中文网</div>
<p>PyQt5中文网是一个分享PyQt5教程的中文网站，内容包含PyQt5视频教程、中文文档以、资料的打造。</p>
</div>
<div class="cont_rg">
<ul class="item">
<li><strong>Python GUI</strong></li>
<!--<li><a href="/wxpython/" title="WxPython">WxPython</a></li>-->
<!--<li><a href="/tkinter/" title="TkInter">TkInter</a></li>-->
<!--<li><a href="/pyside/" title="PySide">PySide</a></li>-->
</ul>
<ul class="item">
<li><strong>网站地图</strong></li>
<li><a href="http://www.pyqt5.cn/sitemap.html" title="HTML地图">HTML地图</a></li>
<li><a href="http://www.pyqt5.cn/sitemap.xml" title="XML地图">XML地图</a></li>
<li><a href="http://www.pyqt5.cn/sitemap.txt" title="TXT地图">TXT地图</a></li>
</ul>
<div class="twowm">
<strong>关注微信号</strong>
<img src="{% static 'image/weixin.jpg' %}" alt="关注微信号">
</div>
</div>
<div class="last">
<div class="beian">
<small>网站信息：</small>
<a href="https://beian.miit.gov.cn/" rel="nofollow"><small>皖ICP备2021000997号</small></a>
<script type="text/javascript" src="index_files/z_stat.php"></script>
<a href="http://www.pyqt5.cn/about/" rel="nofollow"><small>关于我们</small></a>
<a href="http://www.pyqt5.cn/help/" rel="nofollow"><small>帮助中心</small></a>
<a href="http://www.pyqt5.cn/cooperation/" rel="nofollow"><small>项目合作</small></a>
<a href="http://www.wakey.com.cn/" title="Python自学网">Python自学网</a>
</div>
</div>
</div>
</div>
</footer>
<!-- 网站页脚 end -->
</body>
</html>
side.html
{% load static %}
<aside class="aside fr">
<div class="ad" style="margin-bottom: 20px;">
<a href="http://www.pyqt5.cn/vip/" rel="nofollow" target="_blank">
<img src="{% static 'image/banner3.jpg' %}" alt="PyQt5全套教程">
</a>
</div>
<!-- 标签 开始 -->
<div class="sidebar_item">
<div class="side_content">
<h3>热门标签</h3>
<ul class="label">
{% for tag in tags %}
<li><a href="/tag-{{ tag.tag_tail }}.html" title="{{ tag.tag_title }}">{{ tag.tag_short_title }}</a></li>
{% endfor %}
</ul>
</div>
</div>
<!-- 标签 结束 -->
<!-- 最新文章 开始 -->
<div class="sidebar_item">
<div class="side_content">
<h3>最新文章</h3>
<ul class="item_ul">
{% for new_art in new_arts %}
<li class="item_li">
<a href="/art-{{ new_art.art_tail }}.html">{{ new_art.art_title }}</a>
<span>{{ new_art.art_time }}</span>
</li>
{% endfor %}
</ul>
</div>
</div>
<!-- 最新文章 结束 -->
<!-- 热门文章 开始 -->
<div class="sidebar_item">
<div class="side_content">
<h3>热门文章</h3>
<ul class="hot_ul">
{% for hot_art in hot_arts %}
<li class="hot_li">
<span>{{ forloop.counter }}</span>
<a href="/art-{{ hot_art.art_title }}.html" title="{{ hot_art.art_title }}">{{ hot_art.art_title }}</a>
</li>
{% endfor %}
</ul>
</div>
</div>
<!-- 热门文章 结束 -->
<!-- 上图下文 开始 -->
<div class="sidebar_item">
<div class="side_content">
<h3>模板推荐</h3>
<ul class="img_ul">
</ul>
</div>
</div>
<!-- 上图下文 结束 -->
<!-- 侧栏广告图片下 -->
<div class="ad" style="margin-bottom: 20px;">
<a href="http://www.pyqt5.cn/vip/" rel="nofollow" target="_blank">
<img src="{% static 'image/banner1.jpg' %}" alt="PyQt5全套教程">
</a>
</div>
<!-- 侧栏广告图片下 -->
</aside>
<!-- 右侧边栏 -->
article.html
{% extends 'base.html' %}
{% load static %}
{% block body %}
<!-- 主体内容 -->
<!-- 面包屑 start -->
<div class="crumb">
<div class="container">
<i class="iconfont icon-weizhi"></i>
<span>当前位置：</span>
<a href="/">首页</a>
<small>></small>
<a href="/artlist-{{ art.art_top_list.art_list_tail }}/">{{ art.art_top_list.art_list_title }}</a>
<small>></small>
<span>{{ art.art_title }}</span>
</div>
</div>
<!-- 面包屑 end -->
<!-- 通栏广告图片 -->
<a href="http://www.pyqt5.cn/vip/" class="ad_img" rel="nofollow" target="_blank">
<img src="art_files/top_ad_pc.jpg" alt="add-vip">
</a>
<!-- 通栏广告图片 -->
<!-- 中间部分 start -->
<div class="container">
<!-- 主体内容 star -->
<div class="main_center clearfix">
<!-- 左边主体 栏目 开始 -->
<div class="mains fl">
<!-- 文章主体 开始 -->
<div class="main">
<div class="mainbar">
<article class="content">
<header class="article_header">
<h1>{{ art.art_title }}</h1>
<div class="article_meta">
<span class="item">日期：{{ art.art_time }}</span>
<span class="item">栏目：<a href="/artlist-{{ art.art_top_list.art_list_tail }}/" title="{{ art.art_top_list.art_list_title }}">{{ art.art_top_list.art_list_short_title }}</a></span>
<span class="item">阅读：{{ art.art_click }}</span>
<span class="item">作者：{{ art.art_author }}</span>
</div>
</header>
<div class="texts">
{{ art.art_text|safe }}
</div>
</article>
<div class="article_label">
标签：
{% for tag in art.art_tag.all %}
<a href="/tag-{{ tag.tag_title }}/">{{ tag.tag_title }}</a>
{% endfor %}
</div>
<div class="article_nav">
<div class="next">
{% if next_page %}
<span>| 下一篇：</span><a href="/art-{{ next_page.art_tail }}.html">{{ next_page.art_title }}</a>
{% else %}
| 没有了
{% endif %}
</div>
<div class="back">
{% if previous_page %}
<span>| 上一篇：</span><a href="/art-{{ previous_page.art_tail }}.html">{{ previous_page.art_title }}</a>
{% else %}
| 没有了
{% endif %}
</div>
</div>
<div class="article_about">
<div class="about_title">相关文章</div>
<ul class="about_ul">
{% for lisk_art in arts %}
<li><a href="/art-{{ lisk_art.art_tail }}.html">{{ lisk_art.art_title }}</a></li>
{% endfor %}
</ul>
</div>
</div>
</div>
<!-- 文章主体 结束 -->
<!-- 视频推荐 -->
<div class="main ">
<div class="mainbar">
<div class="title_h2">
<h3>视频推荐</h3>
</div>
<div class="content">
<ul>
<li class="content_item">
<div class="img_bar">
<a href="http://www.pyqt5.cn/pyqt5.html" class="img">
<img src="art_files/s15.jpg" alt="几分钟带你爱上PyQt5，让你知道怎么学习事半功倍！">
</a>
<div class="img_mask">
<i class="iconfont icon-bofang"></i>
</div>
</div>
<a href="http://www.pyqt5.cn/pyqt5.html" title="几分钟带你爱上PyQt5，让你知道怎么学习事半功倍！">几分钟带你爱上PyQt5，让你知道怎么学习事半功倍！</a>
</li>
<li class="content_item">
<div class="img_bar">
<a href="http://www.pyqt5.cn/install.html" class="img">
<img src="art_files/s4_ZC608cw.jpg" alt="PyQt5+python+pycharm开发环境的安装流程">
</a>
<div class="img_mask">
<i class="iconfont icon-bofang"></i>
</div>
</div>
<a href="http://www.pyqt5.cn/install.html" title="PyQt5+python+pycharm开发环境的安装流程">PyQt5+python+pycharm开发环境的安装流程</a>
</li>
<li class="content_item">
<div class="img_bar">
<a href="http://www.pyqt5.cn/framework.html" class="img">
<img src="art_files/s1_WqwbokM.jpg" alt="了解PyQt5框架结构帮你快速学习GUI">
</a>
<div class="img_mask">
<i class="iconfont icon-bofang"></i>
</div>
</div>
<a href="http://www.pyqt5.cn/framework.html" title="了解PyQt5框架结构帮你快速学习GUI">了解PyQt5框架结构帮你快速学习GUI</a>
</li>
<li class="content_item">
<div class="img_bar">
<a href="http://www.pyqt5.cn/code.html" class="img">
<img src="art_files/%E5%A4%A7logo.jpg" alt="两段简单的代码带你了解PyQt5的玩法">
</a>
<div class="img_mask">
<i class="iconfont icon-bofang"></i>
</div>
</div>
<a href="http://www.pyqt5.cn/code.html" title="两段简单的代码带你了解PyQt5的玩法">两段简单的代码带你了解PyQt5的玩法</a>
</li>
</ul>
</div>
</div>
</div>
<!-- 视频推荐 结束 -->
</div>
<!-- 左边主体 栏目 结束 -->
<!-- 右边侧边栏主体 开始 -->
{% include "side.html" %}
<!-- 右侧边栏 -->
</div>
<!-- 主体内容 end -->
</div>
<!-- 中间部分 end -->
<!-- 主体内容 -->
<!-- 网站页脚 start -->
{% endblock %}