静态页面抽取模板

作者: 违心唯心 | 来源:发表于2019-08-04 02:48 被阅读0次

一. 分析页面

1.页面分析

本项目由5个模块组成分别是：news、course、doc、user、admin，按照django的风格，在前面创建的模板文件夹templates下，分别创建以app名命名的文件夹news，course，doc，user，admin，用于存放每个应用的模板文件。在前面创建的静态文件夹static下，也分别创建js，css，images，font等文件夹用来存放静态文件。

本章先创建news、course doc user 为例子：

01.jpg

2.分析模板页面

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

02.jpg

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

二.模板抽取

首先提供的模板静态文件先复制进static文件下相应的文件夹
css、images 、js 等文件夹

1.base模板抽取

提取头部导航，尾部页脚，和右边的侧栏，在base目录下创建base.html

03.jpg
在模板上面建议多做几个继承接口（{% block 接口名字 %} {% endblock 接口名字%}）
增加接口名字是为了更好区分代码区域，正所谓一个萝卜一个坑。
截图如下：

04.jpg

05.jpg

base.html 代码如下：

{% load static %}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- title model  start -->
    <title>{% block title %}{% endblock %}</title>
    <!-- title model 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 model start -->
    {% block link %}
    {% endblock %}
    <!-- css model 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><a href={% url 'news:index' %}>首页</a></li>
                <li><a href={% url 'course:index' %}>在线课堂</a></li>
                <li><a href={% url 'doc:index' %}>下载文档</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={% url 'user:login' %} class="login">登录</a> / <a href={% url 'user:register' %}
                                                                          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  model start -->
{% block main_start %}
    <main id="main">
        <div class="w1200 clearfix">
            <!-- main-contain  model start  -->
            {% block main_contain %}

            {% endblock main_contain %}
            <!-- main-contain model  end -->

            <!-- side model 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>
                    <!-- hot news model start -->
                    {% block hotnews %}
                        <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 hotnews %}
                    <!-- hot news model start -->


                </aside>
            {% endblock side %}
            <!-- side model end -->
        </div>
    </main>
{% endblock main_start %}
<!-- main model 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 &copy; 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>
<!-- script model start -->
{% block script %}
{% endblock script %}
<!-- script model end -->
</body>
</html>

2.doc模块以及docDownload.html:

截图如下：

09.jpg

08.jpg

10.jpg

docDownload.html 代码如下：

{% extends 'base/base.html' %}
{% load static %}
{% block title %}下载文档{% endblock title %}
{% block link %}
    <link rel="stylesheet" href={% static 'css/doc/docDownload.css' %}>
    <script>
    pageIndex=2
    </script>
{% endblock link %}

{% block main_contain %}
    <div class="main-contain ">
            <div class="banner">
                <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1802845035,3786939119&fm=26&gp=0.jpg"
                     alt="">
            </div>
            <div class="pay-doc-contain">
                <ul class="pay-list">

                    <li class="pay-item">
                        <div class="pay-img doc"></div>
                        <div class="d-contain">
                            <p class="doc-title">python cookbook 3.0 教程</p>
                            <p class="doc-desc">强烈推荐的python 教程。</p>

                            <!-- /www/?xxx -->
                            <a href="#" class="pay-price">下载</a>
                        </div>
                    </li>

                    <li class="pay-item">
                        <div class="pay-img doc"></div>
                        <div class="pay-contain">
                            <p class="pay-title">流畅的Python</p>
                            <p class="pay-desc">【本书特色】

                                本书由奋战在Python开发一线近20年的Luciano Ramalho执笔，Victor Stinner、Alex
                                Martelli等Python大咖担纲技术审稿人，从语言设计层面剖析编程细节，兼顾Python 3和Python
                                2，告诉你Python中不亲自动手实践就无法理解的语言陷阱成因和解决之道，教你写出风格地道的Python代码。</p>

                            <!-- /www/?xxx -->
                            <a href="#" class="pay-price">下载</a>
                        </div>
                    </li>

                    <li class="pay-item">
                        <div class="pay-img doc"></div>
                        <div class="pay-contain">
                            <p class="pay-title">深入Flask</p>
                            <p class="pay-desc">深入Flask，强烈推荐！</p>

                            <!-- /www/?xxx -->
                            <a href="#" class="pay-price">下载</a>
                        </div>
                    </li>

                </ul>
            </div>
        </div>
{% endblock main_contain %}

{% block script %}
{% endblock script %}

其他页面如此类推，，最终成果截图

11.jpg

三. 最后别忘记推送到码云

 $ git add .
 $ git commit -m 'update projects'
 $ git push origin master

静态页面抽取模板

一. 分析页面

1.页面分析

2.分析模板页面

二.模板抽取

1.base模板抽取

2.doc模块以及docDownload.html:

三. 最后别忘记推送到码云

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

静态页面抽取模板

一. 分析页面

1.页面分析

2.分析模板页面

二.模板抽取

1.base模板抽取

2.doc模块以及docDownload.html:

三. 最后别忘记推送到 码云

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

三. 最后别忘记推送到码云