七、模板基础
1、设置模板路径
在上一节中,查询出数据是以字符串形式返回给浏览器的,这显然是不符合网站开发的。要一个好看的界面必然用到css,html,js,如果将这些内容都写成字符串的形式,显然不现实。
为了解决这一问题,django中使用了模板
将前端页面写在模板由视图调用,再返回给浏览器。
在setting.py配置文件中TEMPLATES设置描述了Django将如何加载并渲染模板。
目录:
2、模板命名空间
我们可以直接将我们的模板放在blog/templates,但实际这样做会很麻烦。Django将选择它找到的名字匹配的第一个模板文件,如果你在不同的应用有相同名字的模板文件,Django将不能区分它们。我们需要将Django指向正确的模板,最简单的方式是使用命名空间。具体实现方式是,将这些模板文件放在以应用的名字来命名的另一个目录下:
3、定义模板
django中的模板,是一个html文件,但是模板由自己的一套语言。
在模板中输出变量语法如下,变量可能是从视图中传递过来的,也可能是在模板中定义的模板系统使用点号查找语法来访问变量的属性。
在模板中编写代码段语法:
比如:在视图中传一个对象参数给模板。如果模板中需要使用对象的属性那么,使用 对象.属性名 方式访问。
编写一个模板:
/blog/templates/personal_blog/title.html
调用模板分为三步骤:
找到模板定义上下文渲染模板
创建一个视图title视图来使用模板:
配置url:
浏览器中访问 http://127.0.0.1:8000/blog/title/ 应该能看到一个形如列表的,文章标题。
4、render快捷渲染函数
django调用模板一般方式是载入一个模板、填充一个context 然后返回一个含有模板渲染结果的HttpResponse对象,django提供了一个快捷函数让调用模板更简单。
使用快捷函数重写视图:
render()函数将请求对象作为它的第一个参数,模板的名字作为它的第二个参数,第三个参数向模板中传递的上下文数据。 它返回一个HttpResponse对象,含有用给定的context 渲染后的模板。
八、博客首页
1、文章首页
在模板templates/personal_blog 目录下新建一个index.html 用于做主页展示文章。 为了好看点,加了一些css样式。
margin: 0 auto; height: 60px;
}
#navList li {
float: left; height: 60px; line-height: 60px;
list-style-type: none;
}
#navList a {
padding: 0 20px; font-size: 16px; display: block; cursor: pointer;
text-decoration: none; color: #fff;
text-shadow: 3px 3px 3px #000;
}
#navList a:hover { background: #fff;
}
.forFlow{
width: 1200px; margin: 25px auto;
}
.dayTitle { color: #fff;
padding: 6px 6px;
font-size: 12px; display: block; float: left; margin-right: 10px;
}
.dayTitle a {
color: #fff;
text-decoration: none; font-weight: bold;
}
.day .postTitle { font-size: 21px;
line-height: 1.5em; float: left; clear: right;}
.day .postTitle a {
text-decoration: none; color: #555;
}
.day .postTitle a:hover { color: #0e90d2;
text-decoration: none;
}
.postCon {
font-family: 微软雅黑; padding: 15px 0; clear: both;
}
.postDesc { clear: both; color: #bcbcbc; float: none; text-align: left;
line-height: 200%; font-size: 12px;
}
.readmore {
color: #9ab26b;
text-decoration: none;
}
</style>
</head>
<body>
<ul id="navList">
<li><a href="{% url 'index' %}">首页</a></li>
<li><a href="#">联系</a></li>
<li><a href="#">关于</a>
<li><a href="/admin/">管理</a></li>
</ul>
{% for p in post_list %}
<div class="forFlow">
<div class="day">
<div class="dayTitle">
<a href="">{{p.created_time}}</a>
</div>
<div class="postTitle">
<a class="" href="">{{p.title}}</a>
</div>
<div class="postCon">
<div class="c_b_p_desc">摘要: {{p.content|slice:'100'}} {#
|slice 过滤器,只取前100个字符 #}
<a href="" class="readmore">阅读全文</a>
视图函数:
配置url:
重启服务器:浏览 http://127.0.0.1:8000/blog/index/ 效果如下:
2、文章详细页
点击文章标题,和阅读全文应该链接到文章的详细页。编写templates/personal_blog/detail.html 详细页模块:
详细页视图,由于详细页需要知道那篇文章。所有要求请求的时候将文章id传到视图。
配置详细页url,利用url参数提取的方式获取id。
由于视图需要接收id参数,所以在url中需要将id传给视图,修改首页的标题跟阅读全文的url链接:
重启服务器 尝试访问详细页: