首页 Django项目开发与部署视频教程 模板头部、底部、侧边栏和静态文件配置
pay pay

模板头部、底部、侧边栏和静态文件配置

日期: 六月 25, 2023, 9:53 a.m.
阅读: 77
作者: Python自学网-村长

摘要: 模板头部、底部、侧边栏和静态文件配置

模板头部、底部、侧边栏和静态文件配置

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 %}

 

原创视频,版权所有,未经允许,切勿转载,违者必究!
回顶部