django模板层

2019-04-13 14:48发布生成海报

站内文章 / 模拟电子

15796 0

Template模板

套用Bootstrap样式

现在拿出我们的Bootstrap模板样式：
这里写图片描述

将index.html 文件放入template/blogpost/ 目录下。在blogpost 目录下新建一个静态文件夹static，在static 目录下再建一个blogpost 文件夹，然后将css、font、js 三个文件夹导入到blogpost/static/blogpost/ 目录下：这里写图片描述

首先，打开blogpost/views.py 模块，修改index() 视图：

def index(request):
    posts = Blog.objects.all().order_by('-created')
    return render(request, 'blogpost/index.html', {'posts': posts})

我们取出数据库中所有博客文章并以倒叙的创建时间排列，order_by() 函数是数据库中排序语句，'-created' 表示逆时间排列。
然后，打开index.html 文件找到注释语句：
这里写图片描述

红框中的内容是一篇文章的硬编码，只保留这一篇文章，将后面的硬编码文章全部删除。接着，在index.html 文件中添加如下语句：
这里写图片描述

{% for post in posts %} 和 {% endfor %} 语句相当于python中的for语句，这是django的模板语言。{{ post.title }} 双大括号表示这是一个变量，我们将从数据库中取出的内容渲染到模板中，显示如下：这里写图片描述

浏览器正确的渲染的模板，但是没有套用我们的CSS和js样式。我们之前在应用目录下已经添加了静态页面，接下来，需要在模板中引入，如下：

{% load staticfiles %}

<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Blog Home - Start Bootstrap Templatetitle>

    
    <link href="{% static 'blogpost/css/bootstrap.min.css' %}" rel="stylesheet">

    
    <link href="{% static 'blogpost/css/blog-home.css' %}" rel="stylesheet">
    .
    .
    .

    
    <script src="{% static 'blogpost/js/jquery.js' %}">script>

    
    <script src="{% static 'blogpost/js/bootstrap.min.js' %}">script>

首先要在最顶处添加{% load staticfiles %}，表示载入静态文件标签。{% static 'blogpost/css/bootstrap.min.css' %} 中的static就相当于是/static/，也就是我们静态文件的路径。
再次打开浏览器，页面已经能正常显示：
这里写图片描述

Ta的文章更多 >>

django模板层
0 个评论