Django blog项目《四》：模板抽取

最新推荐文章于 2021-04-02 05:20:14 发布

山河长不高吖

最新推荐文章于 2021-04-02 05:20:14 发布

阅读量393

点赞数 1

分类专栏： Django 框架

本文链接：https://blog.youkuaiyun.com/hl120841/article/details/104516007

版权

文章目录

配置好了项目基本配置后，下一步就是进行模板抽取了。由于基本的html和css文件都是写好的，因此只需要进行后端的逻辑代码和JS逻辑代码编写就行，其他html和css进行必要的补充。

一、模板抽取分析

模板抽取分析：

以base.html作为所有html的基本模板
将base.html分为3个部分：head和body 2个部分，其中：
1. head分为title和css 2个块
2. body分为header、main、footer、script 4个部分，其中
  1. header分为：image_logo、menu、login-box 3块
  2. main分为：左main_contain和右side 2块，其中：
    1. 左main_contain分为：banner、hot_news、news_tags、news_contain 4块
    2. 右side分为：online_class、follow_me、hot_recommend 3块
  3. footer分为：footer 1块
  4. script分为：script 1块
对app应用templates里面的html进行继承base.html进行填坑
1. users：register.html、login.html
2. news：index.html、news_detail.html、search.html
3. docs：docDownload.html
4. 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=&#

最低0.47元/天解锁文章