本来已经准备开始模型构建了,突然想起要把自己当初挖的坑——双语网站给填一下,那这次干脆先把模板套用弄好。
接下来完成中英界面之后再正式进入数据部分。
目录
一、模板的继承
之前我的主页是一个静态网站,它的设计很简单,就是导航、正文、底栏三部分。
也就是说,我的网站任意一个页面,都有这三部分,所以 我要把模板分开,便于复用。
主要有这几个语句,注意引号
<!-- 这里是声明模板的名称,表示继承哪个模板 -->
{% 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> 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