django模板层

最新推荐文章于 2022-05-17 01:49:19 发布

Suger_Tk

最新推荐文章于 2022-05-17 01:49:19 发布

阅读量316

点赞数 1

分类专栏： django项目文章标签： django bootstrap

本文链接：https://blog.csdn.net/tk1026/article/details/77073188

版权

django项目专栏收录该内容

8 篇文章 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 %}
<!DOCTYPE html>
<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 Template</title>

    <!-- Bootstrap Core CSS -->
    <link href="{% static 'blogpost/css/bootstrap.min.css' %}" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="{% static 'blogpost/css/blog-home.css' %}" rel="stylesheet">
    .
    .<!-- 中间省略 -->
    .

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

    <!-- Bootstrap Core JavaScript -->
    <script src="{% static 'blogpost/js/bootstrap.min.js' %}"></script>

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