Django学习笔记（20）——BBS+Blog项目开发（4）Django如何使用Bootstrap

时间：2023-02-20 19:04:26

　　本文学习如何通过Django使用Bootstrap。其实在之前好几个Django项目中已经尝试使用过了Bootstrap，而且都留有学习记录，我已经大概有了一个大的框架，那么本文就从头再走一遍流程，其实主要细节还是Bootstrap的常用的语法使用。除了基本流程，本文基于BBS+Blog项目进行学习，主要是完成其项目的模板的功能，顺带学习一下Bootstrap的内容。

　　我使用的Python版本为3.X，Bootstrap版本为3.3.31，Django版本为2.0。

　　模板语法不懂的可以参考博客：Django学习笔记（3）——表单，路由控制和模板语法的学习

1，下载及配置Bootstrap相关文件

　　点击：Bootstrap官网下载链接

Django学习笔记（20）——BBS+Blog项目开发（4）Django如何使用Bootstrap

　　我们选择第一个，或者第二个都可以：两者的区别就是源码内容更加完善，而用于生产的比较轻便。

　　我们可以看看两者的目录结构。

1.1，Bootstrap预编译版的基本文件结构：

　　预编译文件可以直接使用到任何web项目中。官方提供了编译好的CSS和JS（bootstrap.*）文件，还有经过压缩的CSS和JS（bootstrap.*）文件。同时还提供了CSS源码映射表（bootstrap.*.map），可以在某些浏览器的开发工具中使用。

Django学习笔记（20）——BBS+Blog项目开发（4）Django如何使用Bootstrap

1.2，Bootstrap源码的基本文件结构：

Django学习笔记（20）——BBS+Blog项目开发（4）Django如何使用Bootstrap

　　当然，有时候我们做测试的时候，也可以直接使用CDN。

1.3 Bootstrap的CDN

　　Bootstrap中文网为Bootstrap专门构建了免费的CDN加速服务，访问速度更快，加速效果更明显，没有速度和带宽限制，永久免费。

　　代码如下：

<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->

<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

　　那所谓的CDN就是通过一个互联网部署在多个数据中心的大型分布式服务器系统。浏览器可以并行的从CDN下载文件，不需要从自己的服务器下载文件。这些文件不在同一个域中，不会受浏览器的限制（同时只能在一个域下载几个文件）。因此下载时不会一个一个排队。另外CDN会根据用户的位置和更快的路由速度来选择服务器下载文件。

　　优点：节省带宽，提高网站性能。

1.4   包含的内容

　　基本结构：Bootstrap 提供了一个带有网格系统，链接样式，背景的基本结构。

　　CSS：Bootstrap 自带以下特性：全局的CSS设置，定义基本的HTML元素样式，可扩展的class，以及一个先进的网格系统。

　　组件：Bootstrap 包含了十几个可重用的组件，其中包括以下组件：下拉菜单，按钮组，按钮下拉菜单，导航，导航条，路径导航，分页，排版，略缩图，警告对话框，进度条，媒体对象等。

　　JavaScript插件：Bootstrap包含了十几个自定义的jQuery插件。其中包括：模式对话框，标签页，滚动条，弹出框等。

　　定制：你可以定制Bootstrap的组件，Less变量 和jQuery插件来得到自己的版本。

1.5  放在项目中

　　我们将下载的Bootstrap-3.3.7 放在Django项目中的static目录下。我下载的是源码版本的。

Django学习笔记（20）——BBS+Blog项目开发（4）Django如何使用Bootstrap

　　其次，Bootstrap插件全部依赖于jQuery，因此jQuery必须在Bootstrap之前就引入。

<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->

<script src="/static/JS/jquery-3.2.1.js"></script>

<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->

<script src="/static/bootstrap-3.3.7/dist/js/bootstrap.min.js"></script>

　　

2，在Django中配置Bootstrap内容

2.1 配置settings文件

　　我们打开Django的settings文件，在最下面添加配置，用于指定静态文件的搜索目录。只有指定静态文件的存放位置，才能在模板中正确引导他们。

STATIC_URL = '/static/'

STATICFILES_DIRS = [

    os.path.join(BASE_DIR, 'static'),

]

　　注意：STATIC_URL 和STATICFILES_DIRS 不同，可以说两者并没有什么联系。STATIC_URL主要是的是前端的URL搜索路径。而STATCIFILES_DIRS 主要是联系的后台静态文件的路径地址。

2.2  创建 base.html 模板

　　一个网站要有自己的统一风格和公共部分，可以将这部分内容集中到一个基础模板 base.html中，现在我们在根目录下的 template 中建一个 base.html 文件作为站点的基础模板。

　　在Bootstrap文档中，为我们提供了一个非常简单而且又实用的基础模板。我们可以拷贝这段代码，然后根据自己的需求对其进行改进即可。

　　下面是一个官网最基础的Bootstrap页面：

<!DOCTYPE html>

<html lang="zh-CN">

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->

    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->

    <!--[if lt IE 9]>

      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>

      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>

    <![endif]-->

  </head>

  <body>

    <h1>你好，世界！</h1>

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->

    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>

    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>

  </body>

</html>

　　然后我们修改部分内容，如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <link rel="stylesheet" href="/static/CSS/home_site.css">

    <link rel="stylesheet" href="/static/theme/{{ blog.theme }}">

    <link rel="stylesheet" href="/static/CSS/article_detail.css">

    <link rel="stylesheet" href="/static/CSS/index.css">

    <link rel="stylesheet" href="/static/bootstrap-3.3.7/dist/css/bootstrap.css">

    <script src="/static/JS/jquery-3.2.1.min.js"></script>

</head>

<body>

<div class="header">

    <div class="content">

        <p class="title">

            <span>{{ blog.title }}</span>

            <a href="/cn_backend/" class="backend">管理</a>

        </p>

    </div>

</div>

<div class="container">

    <div class="row">

        <div class="col-md-3 menu">

             {% load my_tags %}

             {% get_classification_style username %}

        </div>

        <div class="col-md-9">

            {% block content %}

            {% endblock %}

        </div>

    </div>

</div>

</body>

</html>

　　

  • 如果需要引入静态文件的话，我们需要在模板中要加上 {% load staticfiles %} 之后，才可使用 {% static 'path' %} 引用静态文件。
  • HTML语法中，所有的内容都被标签包裹；标签及标签中的属性可以对内容进行排印、解释说明等作用。
  • <head></head>标签内包含网页的元数据，是不会在页面内显示出来的。<body></body>标签内才是网页会显示的内容。
  • 留意Bootstrap的css、js文件分别是如何引入的
  • jquery.js 要在 bootstrap.js 前引入。**

2.3  改写article_detail.html内容

　　这里我们以article_detail.html为例进行改写，其他的就不一一列举。

　　我们可以查看其部分样式如下：

Django学习笔记（20）——BBS+Blog项目开发（4）Django如何使用Bootstrap

　　我们可以留意 {% block content  %} 是如何与 base.html 进行对应起来的。

完整代码如下：

{% extends "base.html" %}

{% block content %}

    {% csrf_token %}

    <div class="article_info">

        <h3 class="text-center title">{{ article_obj.title }}</h3>

        <div class="cont">

            {{ article_obj.content|safe }}

        </div>

        <div class="clearfix">

            <div id="div_digg">

                <div class="diggit action">

                    <span class="diggnum" id="digg_count">{{ article_obj.up_count }}</span>

                </div>

                <div class="buryit action">

                    <span class="burynum" id="bury_count">{{ article_obj.down_count }}</span>

                </div>

                <div class="clear"></div>

                <div class="diggword" id="digg_tips" style="color: red;"></div>

            </div>

        </div>

        <div class="comments list-group">

            <p class="tree_btn">评论树</p>

            <div class="comment_tree">

            </div>

            <script>

                 $.ajax({

                        url: "/get_comment_tree/",

                        type: "get",

                        data: {

                            article_id: "{{ article_obj.pk }}"

                        },

                        success: function (comment_list) {

                            console.log(comment_list);

                            $.each(comment_list, function (index, comment_object) {

                                var pk = comment_object.pk;

                                var content = comment_object.content;

                                var parent_comment_id = comment_object.parent_comment_id;

                                var s = '<div class="comment_item" comment_id=' + pk + '><span>' + content + '</span></div>';

                                if (!parent_comment_id) {

                                    $(".comment_tree").append(s);

                                } else {

                                    $("[comment_id=" + parent_comment_id + "]").append(s);

                                }

                            })

                        }

                    })

            </script>

            <p>评论列表</p>

            <ul class="list-group comment_list">

                {% for comment in comment_list %}

                    <li class="list-group-item">

                        <div>

                            <a href=""># {{ forloop.counter }}楼</a>   

                            <span>{{ comment.create_time|date:"Y-m-d H:i" }}</span>  

                            <a href=""><span>{{ comment.user.username }}</span></a>

                            <a class="pull-right reply_btn" username="{{ comment.user.username }}"

                               comment_pk="{{ comment.pk }}">回复</a>

                        </div>

                        {% if comment.parent_comment_id %}

                            <div class="pid_info well">

                                <p>

                                    {{ comment.parent_comment.user.username }}: {{ comment.parent_comment.content }}

                                </p>

                            </div>

                        {% endif %}

                        <div class="comment_con">

                            <p>{{ comment.content }}</p>

                        </div>

                    </li>

                {% endfor %}

            </ul>

            <p>发表评论</p>

            <p>昵称：<input type="text" id="tbCommentAuthor" class="author" disabled="disabled" size="50"

                         value="{{ request.user.username }}">

            </p>

            <p>评论内容:</p>

            <textarea name="" id="comment_content" cols="60" rows="10"></textarea>

            <p>

                <button class="btn btn-default comment_btn">提交评论</button>

            </p>

        </div>

        <script>

            // 点赞请求

            $("#div_digg .action").click(function () {

                var is_up = $(this).hasClass("diggit");

                $obj = $(this).children("span");

                $.ajax({

                    url: "/digg/",

                    type: "post",

                    data: {

                        "csrfmiddlewaretoken": $("[name='csrfmiddlewaretoken']").val(),

                        "is_up": is_up,

                        "article_id": "{{ article_obj.pk }}",

                    },

                    success: function (data) {

                        console.log(data);

                        if (data.state) {

                            var val = parseInt($obj.text());

                            $obj.text(val + 1);

                        }

                        else {

                            var val = data.handled ? "您已经推荐过!" : "您已经反对过!";

                            $("#digg_tips").html(val);

                            setTimeout(function () {

                                $("#digg_tips").html("")

                            }, 1000)

                        }

                    }

                })

            });

            // 评论请求

            var pid = "";

            $(".comment_btn").click(function () {

                var content = $("#comment_content").val();

                if (pid) {

                    var index = content.indexOf("\n");

                    content = content.slice(index + 1)

                }

                $.ajax({

                    url: "/comment/",

                    type: "post",

                    data: {

                        "csrfmiddlewaretoken": $("[name='csrfmiddlewaretoken']").val(),

                        "article_id": "{{ article_obj.pk }}",

                        "content": content,

                        pid: pid

                    },

                    success: function (data) {

                        console.log(data);

                        var create_time = data.create_time;

                        var username = data.username;

                        var content = data.content;

                        var s = `

                           <li class="list-group-item">

                              <div>

                                  <span>${create_time}</span>  

                                  <a href=""><span>${username}</span></a>

                              </div>

                              <div class="comment_con">

                                  <p>${content}</p>

                              </div>

                            </li>`;

                        $("ul.comment_list").append(s);

                        // 清空评论框

                        pid = "",

                                $("#comment_content").val("");

                    }

                })

            });

            // 回复按钮事件

            $(".reply_btn").click(function () {

                $('#comment_content').focus();

                var val = "@" + $(this).attr("username") + "\n";

                $('#comment_content').val(val);

                pid = $(this).attr("comment_pk");

            })

        </script>

    </div>

{% endblock %}

　　

2.4  其中过程捋一捋

  • 当我们通过url访问list.html时，顶部的{% extends "base.html" %}告诉Django：“这个文件是继承base.html的，你去调用它吧。”
  • 于是Django就老老实实去渲染base.html文件：
  • （如果存在的话，不存在忽略这一步）其中的{% include 'header.html' %}表明这里需要加入header.html的内容。
  • （如果存在的话，不存在忽略这一步）{% include 'footer.html' %}加入footer.html的内容。
  • {% block content %}{% endblock content %}表明这里应该加入list.html中的对应块的内容。

2.5  运行服务器

　　当我们按部就班的完成的所有流程，我们保存内容，运行开发服务器，可以在浏览器输入正确的URL地址，就能看到漂亮的页面。

　　展示一下，我做的一个简单的博客home页面

Django学习笔记（20）——BBS+Blog项目开发（4）Django如何使用Bootstrap

3，BBS+Blog博客系统首页模板语言的编写

3.1  设计博客系统首页——导航区域

　　导航条是我们的应用或者网站中作为导航页头的响应式基础组件。他们在移动设备上可以折叠（并且可关可开），且再视口（viewport）宽度增加时逐渐变为水平展开模式。

　　我们可以看到我的博客页面右上角，如果登录进去的话，如下：

Django学习笔记（20）——BBS+Blog项目开发（4）Django如何使用Bootstrap

　　如果没有登录的话，则显示的是下面这样的状态：

Django学习笔记（20）——BBS+Blog项目开发（4）Django如何使用Bootstrap

　　那么如何写一个差不多样式呢？ 这里为了简单方便起见，我们使用Bootstrap的导航条代码。地址：请点我

<nav class="navbar navbar-default">

  <div class="container-fluid">

    <!-- Brand and toggle get grouped for better mobile display -->

    <div class="navbar-header">

      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">

        <span class="sr-only">Toggle navigation</span>

        <span class="icon-bar"></span>

        <span class="icon-bar"></span>

        <span class="icon-bar"></span>

      </button>

      <a class="navbar-brand" href="#">Brand</a>

    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

      <ul class="nav navbar-nav">

        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>

        <li><a href="#">Link</a></li>

        <li class="dropdown">

          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>

          <ul class="dropdown-menu">

            <li><a href="#">Action</a></li>

            <li><a href="#">Another action</a></li>

            <li><a href="#">Something else here</a></li>

            <li role="separator" class="divider"></li>

            <li><a href="#">Separated link</a></li>

            <li role="separator" class="divider"></li>

            <li><a href="#">One more separated link</a></li>

          </ul>

        </li>

      </ul>

      <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>

      <ul class="nav navbar-nav navbar-right">

        <li><a href="#">Link</a></li>

        <li class="dropdown">

          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>

          <ul class="dropdown-menu">

            <li><a href="#">Action</a></li>

            <li><a href="#">Another action</a></li>

            <li><a href="#">Something else here</a></li>

            <li role="separator" class="divider"></li>

            <li><a href="#">Separated link</a></li>

          </ul>

        </li>

      </ul>

    </div><!-- /.navbar-collapse -->

  </div><!-- /.container-fluid -->

</nav>

　　那上面代码显示出来的前端页面如下：

Django学习笔记（20）——BBS+Blog项目开发（4）Django如何使用Bootstrap

　　我们将不需要的东西可以去掉，留下我们需要的，然后修改其中的语言。我们可以去Bootstrap中找到一个小人

Django学习笔记（20）——BBS+Blog项目开发（4）Django如何使用Bootstrap

　　然后添加到 index.html的模板中，最后修改得到如下效果：

Django学习笔记（20）——BBS+Blog项目开发（4）Django如何使用Bootstrap

3.2  设计博客系统首页——主体布局

　　当首页的导航区域设计完后，我们开始对主体布局，然后对尾部布局，这里简单起见，我们不打算写尾部布局。

　　我们打算将主页分为三部分，第一部分是目录区域，中间是代码，第三部分是广告栏区域。

　　我们这里主要学习第二部分内容的填充，所以我们将第一部分和第三部分用进度条表示。

　　第一部分和第三部分进度条的代码如下：

<div class="container-fluid">

    <div class="row">

        <div class="col-md-3">

            <div class="panel panel-warning">

                <div class="panel-heading">Panel heading without title</div>

                <div class="panel-body">

                    Panel content

                </div>

            </div>

            <div class="panel panel-info">

                <div class="panel-heading">Panel heading without title</div>

                <div class="panel-body">

                    Panel content

                </div>

            </div>

            <div class="panel panel-danger">

                <div class="panel-heading">Panel heading without title</div>

                <div class="panel-body">

                    Panel content

                </div>

            </div>

        </div>

        <div class="col-md-6">代码</div>

        <div class="col-md-3">

            <div class="panel panel-default">

                <div class="panel-heading">Panel heading without title</div>

                <div class="panel-body">

                    Panel content

                </div>

            </div>

            <div class="panel panel-primary">

                <div class="panel-heading">Panel heading without title</div>

                <div class="panel-body">

                    Panel content

                </div>

            </div>

        </div>

    </div>

</div>

　　效果如下：

Django学习笔记（20）——BBS+Blog项目开发（4）Django如何使用Bootstrap

3.3  设计博客系统首页——文章列表渲染

　　那下面主要的任务就是文章列表的渲染，也就是中间的主要内容，包括文章的内容，点赞功能，评论功能。那主要功能就参考博客园首页，我随便截取了两篇博客，效果如下：

Django学习笔记（20）——BBS+Blog项目开发（4）Django如何使用Bootstrap

　　那这就是主体内容，主要分为博客题目，博客博主图片博客索引，和博主名称，发布于，加上如期，加上评论，阅读。

　　我们就按照这样的样式写即可，只不过把阅读变为点赞，因为后面我们要实现这样的效果。

　　所以我们这里主要分为两部分，一个是上面内容包括文章题目，头像，索引内容渲染，一个是下面，某某博主发表于什么时间，点赞，评论。

3.3.1  文章题目，头像，索引内容渲染

　　index.html

<div class="col-md-6">

            <div class="article_list">

                {% for article in article_list %}

                    <div class="article-item">

                        <h5><a href="">{{ article.title }}</a></h5>

                        <div class="article-desc">

                            <span class="media-left">

                                <a href=""><img height="56" width="56" src="media/{{ article.user.avatar }}" alt=""></a>

                            </span>

                            <span class="media-right">

                                {{ article.desc }}

                            </span>

                        </div>

                    </div>

                        <hr>

                {% endfor %}

            </div>

        </div>

　　views.py

def index(request):

    article_list = models.Article.objects.all()

    return render(request, 'index.html', locals())

　　前端页面展示：

Django学习笔记（20）——BBS+Blog项目开发（4）Django如何使用Bootstrap

3.3.2  文章点赞，评论渲染

　　那大体效果做好后，我们可以完成文章点赞，评论的效果。

　代码如下：

<div class="small pub_info">

    <span><a href="">{{ article.user.username }}</a> </span>    

    <span>发布于  {{ article.create_time|date:'Y-m-d:H:i' }}</span>   

    <span class="glyphicon glyphicon-comment"></span>评论（{{ article.comment_count }}）  

    <span class="glyphicon glyphicon-thumbs-up"></span>点赞（{{ article.up_count }}）

</div>

　　我们可以去bootstrap中下载两个效果图，一个是评论，一个是点赞，下面是我随便选择的两个样式。

Django学习笔记（20）——BBS+Blog项目开发（4）Django如何使用Bootstrap

Django学习笔记（20）——BBS+Blog项目开发（4）Django如何使用Bootstrap

　　最后做出来的效果如下：

Django学习笔记（20）——BBS+Blog项目开发（4）Django如何使用Bootstrap

3.4  设计博客系统首页的完整代码展示

　　代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <link rel="stylesheet" href="/static/CSS/index.css">

    <link rel="stylesheet" href="/static/bootstrap-3.3.7/dist/css/bootstrap.css">

    <script rel="stylesheet" src="/static/JS/jquery-3.2.1.js"></script>

    <script rel="stylesheet" src="/static/bootstrap-3.3.7/dist/js/bootstrap.min.js"></script>

</head>

<body>

<nav class="navbar navbar-default">

  <div class="container-fluid">

    <!-- Brand and toggle get grouped for better mobile display -->

    <div class="navbar-header">

      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">

        <span class="sr-only">Toggle navigation</span>

        <span class="icon-bar"></span>

        <span class="icon-bar"></span>

        <span class="icon-bar"></span>

      </button>

      <a class="navbar-brand" href="#">博客园</a>

    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

      <ul class="nav navbar-nav">

        <li class="active"><a href="#">随笔<span class="sr-only">(current)</span></a></li>

        <li><a href="#">新闻</a></li>

        <li><a href="#">博文</a></li>

      </ul>

      <ul class="nav navbar-nav navbar-right">

          {% if request.user.is_authenticated %}

              <li><a href="#"><span id="user_icon" class="glyphicon glyphicon-user"></span>{{ request.user.username }}</a></li>

              <li class="dropdown">

              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>

              <ul class="dropdown-menu">

                    <li><a href="#">修改密码</a></li>

                    <li><a href="#">修改头像</a></li>

                    <li><a href="/logout/">注销</a></li>

                    <li role="separator" class="divider"></li>

                    <li><a href="#">Separated link</a></li>

              </ul>

            </li>

          {% else %}

              <li><a href="/login/">登录</a> </li>

              <li><a href="/register/">注册</a> </li>

          {% endif %}

      </ul>

    </div>

  </div>

</nav>

<div class="container-fluid">

    <div class="row">

        <div class="col-md-3">

            <div class="panel panel-warning">

                <div class="panel-heading">Panel heading without title</div>

                <div class="panel-body">

                    Panel content

                </div>

            </div>

            <div class="panel panel-info">

                <div class="panel-heading">Panel heading without title</div>

                <div class="panel-body">

                    Panel content

                </div>

            </div>

            <div class="panel panel-danger">

                <div class="panel-heading">Panel heading without title</div>

                <div class="panel-body">

                    Panel content

                </div>

            </div>

        </div>

        <div class="col-md-6">

            <div class="article_list">

                {% for article in article_list %}

                    <div class="article-item">

                        <h5><a href="">{{ article.title }}</a></h5>

                        <div class="article-desc">

                            <span class="media-left">

                                <a href=""><img height="56" width="56" src="media/{{ article.user.avatar }}" alt=""></a>

                            </span>

                            <span class="media-right">

                                {{ article.desc }}

                            </span>

                        </div>

                        <div class="small pub_info">

                            <span><a href="">{{ article.user.username }}</a> </span>    

                            <span>发布于  {{ article.create_time|date:'Y-m-d:H:i' }}</span>   

                            <span class="glyphicon glyphicon-comment"></span>评论（{{ article.comment_count }}）  

                            <span class="glyphicon glyphicon-thumbs-up"></span>点赞（{{ article.up_count }}）

                        </div>

                    </div>

                        <hr>

                {% endfor %}

            </div>

        </div>

        <div class="col-md-3">

            <div class="panel panel-default">

                <div class="panel-heading">Panel heading without title</div>

                <div class="panel-body">

                    Panel content

                </div>

            </div>

            <div class="panel panel-primary">

                <div class="panel-heading">Panel heading without title</div>

                <div class="panel-body">

                    Panel content

                </div>

            </div>

        </div>

    </div>

</div>

</body>

</html>

　　

4，BBS+Blog博客系统个人站点页面模板语言的编写

4.1 个人站点页面的规划布局

　　那个人站点页面的话，我们希望做成和博客园差不多的效果，首先我们查看我的博客站点：

Django学习笔记（20）——BBS+Blog项目开发（4）Django如何使用Bootstrap

　　那我们也设置成类似的效果，有一个标题和设置，而我左边栏目设置为类似于博客园这种，我的标签，随笔分类，随机归档就够了。希望简单容易。

　　上面的标题也不设置这种一张背景，前面加点字这种，设置成

4.2 个人站点页面的渲染布局——标题栏设置

　　标题栏目我们就简单的设置为博客的名称和设置即可。

　　home_site.html的代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        .header{

            width: 100%;

            height: 60px;

            background-color: #369;

        }

        .header .title{

            font-size: 18px;

            font-weight: 100;

            line-height: 60px;

            color: #ffffff;

            margin-left: 15px;

            margin-top: -10px;

        }

        .backend{

            float: right;

            color: #ffffff;

            font-size: 16px;

            margin-right: 14px;

            margin-top: 10px;

            text-decoration: none;

        }

    </style>

</head>

<body>

<div class="header">

    <div class="contents">

        <p class="title">

            <span>{{ blog.title }}</span>

            <a href="" class="backend">管理</a>

        </p>

    </div>

</div>

</body>

</html>

　　视图如下：

Django学习笔记（20）——BBS+Blog项目开发（4）Django如何使用Bootstrap

4.3  个人站点页面的渲染布局——左边标签栏设置

　　左边标签栏我们打算设置为我的标签，随笔分类，随机归档就OK了。

　　代码如下：

<div class="row">

        <div class="col-md-3">

            <div class="panel panel-warning">

                <div class="panel-heading">我的标签</div>

                <div class="panel-body">

                    {% for tag in tag_list %}

                        <p>{{ tag.0 }}({{ tag.1 }})</p>

                    {% endfor %}

                </div>

            </div>

            <div class="panel panel-danger">

                <div class="panel-heading">随笔分类</div>

                <div class="panel-body">

                    {% for cate in cate_list %}

                        <p>{{ cate.0 }}({{ cate.1 }})</p>

                    {% endfor %}

                </div>

            </div>

            <div class="panel panel-success">

                <div class="panel-heading">随笔归档</div>

                <div class="panel-body">

                    {% for data in data_list %}

                        <p>{{ data.0 }}({{ data.1 }})</p>

                    {% endfor %}

                </div>

            </div>

        </div>

        <div class="col-md-9">

            <div class="article_list">

                {% for  article in article_list %}

                    <div class="article-item clearfix">

                        <h5><a href="">{{ article.title }}</a> </h5>

                        <div class="article-desc">

                            {{ article.desc }}

                        </div>

                        <div class="small pub_info pull-right">

                            <span>发布于  {{ article.create_time|date:'Y-m-d:H:i' }}</span>   

                            <span class="glyphicon glyphicon-comment"></span>评论（{{ article.comment_count }}）  

                            <span class="glyphicon glyphicon-thumbs-up"></span>点赞（{{ article.up_count }}）

                        </div>

                    </div>

                        <hr>

                {% endfor %}

            </div>

        </div>

    </div>

　　展示效果如下：

Django学习笔记（20）——BBS+Blog项目开发（4）Django如何使用Bootstrap

4.4  个人站点页面的完整代码及其效果展示

　　index.html代码如下：

{% extends 'base.html' %}

{% block content %}

 <div class="article_list">

    {% for article in article_list %}

        <div class="article-item clearfix">

            <h5><a href="/{{ article.user.username }}/articles/{{ article.pk }}">{{ article.title }}</a></h5>

            <div class="article-desc">

                {{ article.desc }}

            </div>

            <div class="small pub_info pull-right">

                <span>发布于   {{ article.create_time|date:"Y-m-d H:i" }}</span>  

                <span class="glyphicon glyphicon-comment"></span>评论({{ article.comment_count }})  

                <span class="glyphicon glyphicon-thumbs-up"></span>点赞({{ article.up_count }})  

            </div>

        </div>

        <hr>

    {% endfor %}

</div>

{% endblock %}

　　效果如下：

Django学习笔记（20）——BBS+Blog项目开发（4）Django如何使用Bootstrap

5  Django框架中的自定义模板标签（template.Library()）

　　由于用了继承，会传相同参数导致代码复用，所以某一些标签（例如：菜单栏，css，js，以及一些复杂计算后的数据等）需要我们自定义。然后在指定的HTML中引用并显示。之所以要用到标签，主要作用就是想让一些内容在多个模板（HTML）中都要有，比如菜单栏。

　　我们绝对不想让每个视图函数（views）都写一次这些变量内容，所以可以继承一些页面的共同部分，提取出来搭配 base.html。那么如何做呢？

5.1  创建register变量

　　首先我们在blog这个APP下新建一个名为 templatetags 的文件夹，并在下面建一个名为 my_tags.py的文件，然后引入template包。其内容如下：

from django import template

#注册我们自定义的标签，只有注册过的标签，系统才能认识你，这是固定写法

register = template.Library()

　　

5.2  添加自定义标签，注册过滤器函数

　　由于需求是左边的栏目会重复使用，其中包括他的引用函数，在views里面也会重复使用，HTML代码也会重复使用。所以我们要是写了标签，就不需要重复再写其代码了。

　　我们将其视图函数中的函数和HTML中的重复代码提取出来，视图函数内容如下：

from django import template

from django.db.models import Count

from blog import models

register = template.Library()

@register.inclusion_tag("classification.html")

def get_classification_style(username):

    user = models.UserInfo.objects.filter(username=username).first()

    blog = user.blog

    cate_list = models.Category.objects.filter(blog=blog).values("pk").annotate(c=Count("article__title")).values_list(

        "title", "c")

    tag_list = models.Tag.objects.filter(blog=blog).values("pk").annotate(c=Count("article")).values_list("title", "c")

    date_list = models.Article.objects.filter(user=user).extra(

        select={"y_m_date": "date_format(create_time,'%%Y/%%m')"}).values("y_m_date").annotate(

        c=Count("nid")).values_list("y_m_date", "c")

    return {"blog": blog, "cate_list": cate_list, "date_list": date_list, "tag_list": tag_list}

　　classification.html代码如下：

 <div>

    <div class="panel panel-warning">

                <div class="panel-heading">我的标签</div>

                <div class="panel-body">

                    {% for tag in tag_list %}

                        <p><a href="/{{ username }}/tag/{{ tag.0 }}">{{ tag.0 }}({{ tag.1 }})</a></p>

                    {% endfor %}

                </div>

            </div>

    <div class="panel panel-danger">

        <div class="panel-heading">随笔分类</div>

        <div class="panel-body">

            {% for cate in cate_list %}

                <p><a href="/{{ username }}/category/{{ cate.0 }}">{{ cate.0 }}({{ cate.1 }})</a></p>

            {% endfor %}

        </div>

    </div>

    <div class="panel panel-success">

        <div class="panel-heading">随笔归档</div>

        <div class="panel-body">

            {% for date in date_list %}

                <p><a href="/{{ username }}/archive/{{ date.0 }}">{{ date.0 }}({{ date.1 }})</a></p>

            {% endfor %}

        </div>

    </div>

 </div>

　　

5.3  在 base.html代码里使用上述标签

　　标签相关方法指的是在html显示前，后台先进行预处理，和我们平常的方法相同，只不过这个方法是针对标签所定义的，，inclution_tag模板语法把参数传给 inclution_tag 渲染好公共部分后，直接返回 HTML 代码会更为方便。

　　那 base.html 里面引用如下：

<div class="container">

    <div class="row">

        <div class="col-md-3 menu">

             {% load my_tags %}

             {% get_classification_style username %}

        </div>

        <div class="col-md-9">

            {% block content %}

            {% endblock %}

        </div>

    </div>

</div>

　　我们使用 load  my_tags引用。　

5.4  注意　

　　标签字符 [转义]  才能格式化出文章样式 safe 后台必须做一个筛选，否则加上 safe 可能会受到 xss 攻击。

{% extends 'base.html' %}

{# 继承公共部分 #}

{% block content %}

    <h3 class="text-center">{{ article_obj.title }}</h3>

    <div class="cont">

        {{ article_obj.content|safe }}

    </div>

{% endblock %}

　　

相关文章