本来已经准备开始模型构建了,突然想起要把自己当初挖的坑——双语网站给填一下,那这次干脆先把模板套用弄好。
接下来完成中英界面之后再正式进入数据部分。
目录
一、模板的继承
1.1、header.html代码:
1.2、footer.html代码
1.3、base.html代码
1.4、加载主页,index.html
二、启动服务
三、总结
一、模板的继承
之前我的主页是一个静态网站,它的设计很简单,就是导航、正文、底栏三部分。
也就是说,我的网站任意一个页面,都有这三部分,所以 我要把模板分开,便于复用。
主要有这几个语句,注意引号
<!-- 这里是声明模板的名称,表示继承哪个模板 -->
{% 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">
<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> 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/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr/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</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,可以看到和上一篇一样的效果图了
三、总结
今天回顾了一下模板的集成,明天计划用地址栏传参加载出中英双文的界面。之后进入真正的博客部分!加油!!
更多推荐
使用Django构建个人网站(三)——模板套用
发布评论