使用Django构建个人网站（三）——模板套用

最新推荐文章于 2023-03-13 17:31:43 发布

熊熊玩python

最新推荐文章于 2023-03-13 17:31:43 发布

阅读量4k

点赞数 2

分类专栏： Django框架文章标签： Django 模板

本文链接：https://blog.csdn.net/weixin_41552148/article/details/95784603

版权

Django框架专栏收录该内容

13 篇文章 7 订阅

订阅专栏

本来已经准备开始模型构建了，突然想起要把自己当初挖的坑——双语网站给填一下，那这次干脆先把模板套用弄好。

接下来完成中英界面之后再正式进入数据部分。

一、模板的继承

之前我的主页是一个静态网站，它的设计很简单，就是导航、正文、底栏三部分。

也就是说，我的网站任意一个页面，都有这三部分，所以我要把模板分开，便于复用。

主要有这几个语句，注意引号

<!-- 这里是声明模板的名称，表示继承哪个模板 -->
{% extends '模板名' %}
<!-- 父模板声明某可被替换的版块 -->
{% block 'blockName' %}
    这里是父模板中的内容，可被重写
{% endblock %}
<!-- 引入html文件 -->
{% include "模板名"}

我这里建立三个html文件，分别命名为base.html、header.html、footer.html，并准备拆分原先的index.html

1.1、header.html代码:

<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="http://www.wangxiong.club"><span
                    class="glyphicon glyphicon-cloud"></span>&nbsp;XIONG</a>
        </div>

        <!-- 左侧导航条 -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li><a href="#">HOME</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                        aria-expanded="false">MyApps<span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">SpiderXiangYun</a></li>
                        <li><a href="#">SpiderJD</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">FTP</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">MachineLearing</a></li>
                    </ul>
                </li>
            </ul>
            <ul class="nav navbar-nav">
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                        aria-expanded="false">Categories<span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">technology</a></li>
                        <li><a href="#">Life</a></li>
                        <li><a href="#">PCgame</a></li>
                        <li><a href="#">Emotion</a></li>
                    </ul>
                </li>
                <li><a href="#">MyBlog</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                        aria-expanded="false">Language<span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">English</a></li>
                        <li><a href="#">简体中文</a></li>
                    </ul>
                </li>
            </ul>

            <ul class="nav navbar-nav navbar-right">
                <form class="navbar-form navbar-left">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Search">
                    </div>
                    <button type="submit" class="btn btn-default">Submit</button>
                </form>
                <li><a href="#">SignUp</a></li>
                <li><a href="#">Login</a></li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>

1.2、footer.html代码

<nav class="navbar navbar-inverse">
    <div class="navbar-header col-md-3">
        <a class="navbar-brand" href="http://www.wangxiong.club"><span
                class="glyphicon glyphicon-cloud"></span>&nbsp;XIONG</a>
    </div>
    <div class="col-md-4"></div>
</nav>

1.3、base.html代码

<!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">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
    <title>{% block title %}{% endblock %}</title>
</head>

<body>
    {% include "header.html" %}
    {% block content %}
    {% endblock %}
    {% include "footer.html" %}
</body>

</html>

body里面要稍作说明，include表示直接显示header.html和footer.html的内容，我设置了替换块，一个是title，一个是content，应该够用了

1.4、加载主页,index.html

构建主页，这个时候其实只要在index.html有两部分就够了，如下所示:

{% extends "base.html"}

{% block title %}
{% endblock %}

{% block content %}
{% endblock %}

完整代码如下：

{% extends "base.html" %}
{% block title %}
INDEX
{% endblock %}
{% block content %}
<!-- 图片滚动及右侧个人简介 -->
<div class="container-fluid" style="cursor:default;">
    <div class="row">
        <!-- 左侧栏 -->
        <div class="col-md-8">
            <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                <!-- Indicators -->
                <ol class="carousel-indicators">
                    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                </ol>
                <!-- Wrapper for slides -->
                <div class="carousel-inner" role="listbox">
                    <div class="item active">
                        <img src="/static/images/AI.jpg" width="100%;">
                        <div class="carousel-caption">
                        </div>
                    </div>
                    <div class="item">
                        <img src="/static/images/hacker.jpg" width="100%;">
                        <div class="carousel-caption">
                        </div>
                    </div>
                    <div class="item">
                        <img src="/static/images/spider.jpg" width="100%;">
                        <div class="carousel-caption">
                        </div>
                    </div>
                </div>

                <!-- Controls -->
                <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
        </div>
        <!-- 右侧栏 -->
        <div class="col-md-4">
            <div class="row">
                <h1 class="text-center">Personal Introduction</h1>
                <hr style="background-color: black;height: 1px;border: none;">
                <div class="col-md-4"">
                <img class=" img-thumbnail" src="/static/images/myself.jpg" width="100%;">
                </div>
                <div class="col-md-8">
                    <p><strong>name:</strong>Wang Xiong</p>
                    <p><strong>sex:</strong>man</p>
                    <p><strong>what can I
                            do:</strong>Python、HTML、css、JavaScript、Django、Flask、MySQL、MongoDB、spider、Data
                        Science</p>
                    <p><strong>Email:</strong>Email:276721023@qq.com</p>
                </div>
            </div>
            <!-- 这些是要设置成下拉菜单的 -->
            <div class="row" style="margin-top: 15px;">
                <div class="col-md-3 text-center dropup pull-left">
                    <button class="btn btn-default" data-toggle="dropdown" style="margin: 0;padding:0;border: none;">
                        <img src="/static/images/qq.svg">
                    </button>
                    <ul class="dropdown-menu">
                        <li>
                            <img src="/static/images/qqcode.png">
                        </li>
                    </ul>
                </div>
                <div class="col-md-3 text-center dropup pull-left">
                    <button class="btn btn-default" data-toggle="dropdown" style="margin: 0;padding:0;border: none;">
                        <img src="/static/images/wechat.svg">
                    </button>
                    <ul class="dropdown-menu">
                        <li>
                            <img src="/static/images/wechatcode.png">
                        </li>
                    </ul>
                </div>
                <div class="col-md-3 text-center dropup pull-left">
                    <button class="btn btn-default" data-toggle="dropdown" style="margin: 0;padding:0;border: none;">
                        <img src="/static/images/know.svg">
                    </button>
                    <ul class="dropdown-menu dropdown-menu-right">
                        <li>
                            <img src="/static/images/knowcode.png">
                        </li>
                    </ul>
                </div>
                <div class="col-md-3 text-center dropup pull-left">
                    <button class="btn btn-default" data-toggle="dropdown" style="margin: 0;padding:0;border: none;">
                        <img src="/static/images/steam.svg">
                    </button>
                    <ul class="dropdown-menu dropdown-menu-right">
                        <li>
                            <img src="/static/images/qq.png">
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<!--.container-fluid终结处-->
<!-- 正文内容 -->
<!-- 我的特点 -->
<div class="container-fluid" style="margin-top: 15px;cursor:default">
    <div class="row">
        <div class="col-md-4">
            <img src="/static/images/1.svg" alt="">
        </div>
        <div class="col-md-8">
            <p class="lead"><strong>I like python!</strong></p>
            <p class="lead">Beautiful is better than ugly.Explicit is better than implicit.</p>
            <p class="lead">Simple is better than complex.Complex is better than complicated.</p>
            <p class="lead">Flat is better than nested.Sparse is better than dense.</p>
            <p class="lead">Readability counts.Special cases aren't special enough to break the rules.</p>
            <p class="lead">Although practicality beats purity.Errors should never pass silently.</p>
        </div>
    </div>
    <div class="row" style="margin-top: 15px;">
        <div class="col-md-8">
            <p class="lead">Unless explicitly silenced.In the face of ambiguity, refuse the temptation to guess.</p>
            <p class="lead">There should be one-- and preferably only one --obvious way to do it.Although that way
                may not be obvious at first unless you're Dutch.</p>
            <p class="lead">Now is better than never.Although never is often better than *right* now.</p>
            <p class="lead">If the implementation is hard to explain, it's a bad idea.If the implementation is easy
                to explain, it may be a good idea.</p>
            <p class="lead">Namespaces are one honking great idea -- let's do more of those!</p>
        </div>
        <div class="col-md-4">
            <img src="/static/images/2.svg" alt="">
        </div>
    </div>
</div>
<!-- 技能简述及最后博客 -->
<div class="container-fluid" style="margin-top: 15px;color: white;cursor:default;">
    <!-- 技能简述 -->
    <div class="row" style="background: #E96840;">
        <div class="col-md-12" style="color: white;">
            <h1 class="text-center">SKILLS</h1>
        </div>
        <div class="col-md-3 text-center">
            <div style="font-size: 50px;">
                <span class="glyphicon glyphicon-cloud"></span>
            </div>
            <div>
                <h1>Network Communication</h1>
                <small>I can do some simple network programming use socket.Simple connection can be established
                    between servince and client.</small>
            </div>
        </div>
        <div class="col-md-3 text-center text-center">
            <div style="font-size: 50px;">
                <span class="glyphicon glyphicon-list-alt"></span>
            </div>
            <div>
                <h1>Database</h1>
                <small>Statement operation,CRUD</small>
            </div>
        </div>
        <div class="col-md-3 text-center text-center">
            <div style="font-size: 50px;">
                <span class="glyphicon glyphicon-search"></span>
            </div>
            <div>
                <h1>Spider</h1>
                <small>Use module (requests, selenium) search information.</small>
            </div>
        </div>
        <div class="col-md-3 text-center text-center">
            <div style="font-size: 50px;">
                <span class="glyphicon glyphicon-cd"></span>
            </div>
            <div>
                <h1>Set up sites</h1>
                <small>Use Django,Flask and bootstrap</small>
            </div>
        </div>
    </div>
    <!-- 最后发表的几篇博客文章 -->
    <div class="row" style="color: black;">
        <div class="col-md-12 text-center" style="margin-top: 15px;">
            <h1>LATEST BLOG POSTS</h1>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-6 col-md-3 text-center">
            <div class="thumbnail">
                <img src="/static/images/desktop.png" alt="...">
                <div class="caption">
                    <h3>FirstTitle</h3>
                    <p>content of the first bolg.</p>
                    <p><a href="#" class="btn btn-info btn-lg" role="button">Read more</a></p>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-md-3 text-center">
            <div class="thumbnail">
                <img src="/static/images/desktop.png" alt="...">
                <div class="caption">
                    <h3>SecondTitle</h3>
                    <p>content of the second bolg.</p>
                    <p><a href="#" class="btn btn-info btn-lg" role="button">Read more</a></p>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-md-3 text-center">
            <div class="thumbnail">
                <img src="/static/images/desktop.png" alt="...">
                <div class="caption">
                    <h3>ThirdTitle</h3>
                    <p>content of the third bolg.</p>
                    <p><a href="#" class="btn btn-info btn-lg" role="button">Read more</a></p>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-md-3 text-center">
            <div class="thumbnail">
                <img src="/static/images/desktop.png" alt="...">
                <div class="caption">
                    <h3>FourthTitle</h3>
                    <p>content of the fourth bolg.</p>
                    <p><a href="#" class="btn btn-info btn-lg" role="button">Read more</a></p>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

二、启动服务

$ python manage.py runserver

运行完这段代码，访问127.0.0.1:8000，可以看到和上一篇一样的效果图了

三、总结

今天回顾了一下模板的集成，明天计划用地址栏传参加载出中英双文的界面。之后进入真正的博客部分！加油！！

熊熊玩python

关注

2
点赞
踩
20

收藏

觉得还不错? 一键收藏
0
评论
使用Django构建个人网站（三）——模板套用

本来已经准备开始模型构建了，突然想起要把自己当初挖的坑——双语网站给填一下，那这次干脆先把模板套用弄好。接下来完成中英界面之后再正式进入数据部分。目录一、模板的继承1.1、header.html代码:1.2、footer.html代码1.3、base.html代码1.4、加载主页,index.html二、启动服务三、总结一、模板的继承之前我的主页是一个静...
复制链接

扫一扫