2.1 django项目-新闻博客系统之静态页面模板抽取

02 静态页面模板抽取

一、分析前端页面

1.本次项目页面分析

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

2.分析模板页面

观察提供静态模板页面,找出模板的公共部分,然后抽取作为基础模板。

1562315355150.png

经过观察,发现提供的模板布局为,顶部导航,中间内容,右边侧栏,和底部页脚。其中除了中间内容的布局有所差异,其他三个部分的布局都没有改变,我们可以将这三个部分抽出来作为base模板。

二、模板抽取

1、文件导入

将前端文件复制到项目中

2、Base模板抽取

根据上面的分析提取顶部导航,底部页脚,和侧栏,在base目录下创建base.html代码如下:

{% load static %}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- title start -->
    <title>{% block title %}IndexPage{% endblock title %}</title>
    <!-- title end -->
    <link rel="stylesheet" href="{% static 'css/base/reset.css' %}">
    <link rel="stylesheet" href="{% static 'css/base/common.css' %}">
    <!-- link start -->
    {% block link %}
    {% endblock link %}
    <!-- link start -->
    <link rel="stylesheet" href="{% static 'css/base/side.css' %}">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_684044_un7umbuwwfp.css">
</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="{% url 'news:search' %}">搜索</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 start -->
{% block main %}
    <main id="main">
        <div class="w1200 clearfix">
            <!-- main-contain start  -->
            {% block main_contain %}
            {% endblock main_contain %}
            <!-- main-contain  end -->

            <!-- side start -->
            {% block main_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>

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


                </aside>
            {% endblock main_side %}
            <!-- side end -->
        </div>
    </main>
{% endblock main %}
<!-- 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 &copy; 2008 - 2018 xxx有限公司. All Rights Reserved
        </p>
    </div>
</footer>
<!-- footer end -->

{% block js %}
    {% block jquery %}
        <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    {% endblock jquery %}
    {% block comminjs %}
        <script src="{% static 'js/base/nav.js' %}"></script>
    {% endblock comminjs %}
    {% block otherjs %}
    {% endblock otherjs %}
{% endblock js %}

</body>
</html>

3.news模块index页面

{% 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 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="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 文件(或者&quot;分布式...</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下一般比如想让某个程序在后台运行,很多都是使用 &amp;
                                在程序结尾来让程序自动运行。比如我们要运行mysql在后台:/usr/local/mysql/bin/mysqld_safe --user=mysql &amp;但是...</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 otherjs %}
    <script src="{% static 'js/news/index.js' %}"></script>
{% endblock otherjs %}

4、js文件改写

导航栏跳转问题

$(()=>{
    let $title = $('head title');
    let $navLi = $('#header .nav .menu li');
    switch($title[0].text){
        case '首页':
            $navLi.eq(0).addClass('active');
            break;
        case '在线课堂':
            $navLi.eq(1).addClass('active');
            break;
        case '下载文档':
            $navLi.eq(2).addClass('active');
            break;
        case '搜索':
            $navLi.eq(3).addClass('active');
            break;
    };
});
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 218,284评论 6 506
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,115评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,614评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,671评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,699评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,562评论 1 305
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,309评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,223评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,668评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,859评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,981评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,705评论 5 347
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,310评论 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,904评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,023评论 1 270
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,146评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,933评论 2 355

推荐阅读更多精彩内容