Django學習筆記（20）——BBS+Blog項目開發（4）Django如何使用Bootstrap

本文轉載自查看原文 2019-06-27 20:00 1650 Django 學習筆記/ python 項目及規范要求

　　本文學習如何通過Django使用Bootstrap。其實在之前好幾個Django項目中已經嘗試使用過了Bootstrap，而且都留有學習記錄，我已經大概有了一個大的框架，那么本文就從頭再走一遍流程，其實主要細節還是Bootstrap的常用的語法使用。除了基本流程，本文基於BBS+Blog項目進行學習，主要是完成其項目的模板的功能，順帶學習一下Bootstrap的內容。

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

　　模板語法不懂的可以參考博客：Django學習筆記（3）——表單，路由控制和模板語法的學習

1，下載及配置Bootstrap相關文件

　　點擊：Bootstrap官網下載鏈接

　　我們選擇第一個，或者第二個都可以：兩者的區別就是源碼內容更加完善，而用於生產的比較輕便。

　　我們可以看看兩者的目錄結構。

1.1，Bootstrap預編譯版的基本文件結構：

　　預編譯文件可以直接使用到任何web項目中。官方提供了編譯好的CSS和JS（bootstrap.*）文件，還有經過壓縮的CSS和JS（bootstrap.*）文件。同時還提供了CSS源碼映射表（bootstrap.*.map），可以在某些瀏覽器的開發工具中使用。

1.2，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目錄下。我下載的是源碼版本的。

　　其次，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為例進行改寫，其他的就不一一列舉。

　　我們可以查看其部分樣式如下：

　　我們可以留意 {% 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頁面

3，BBS+Blog博客系統首頁模板語言的編寫

3.1 設計博客系統首頁——導航區域

　　導航條是我們的應用或者網站中作為導航頁頭的響應式基礎組件。他們在移動設備上可以折疊（並且可關可開），且再視口（viewport）寬度增加時逐漸變為水平展開模式。

　　我們可以看到我的博客頁面右上角，如果登錄進去的話，如下：

　　如果沒有登錄的話，則顯示的是下面這樣的狀態：

　　那么如何寫一個差不多樣式呢？這里為了簡單方便起見，我們使用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>

　　那上面代碼顯示出來的前端頁面如下：

　　我們將不需要的東西可以去掉，留下我們需要的，然后修改其中的語言。我們可以去Bootstrap中找到一個小人

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

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>

　　效果如下：

3.3 設計博客系統首頁——文章列表渲染

　　那下面主要的任務就是文章列表的渲染，也就是中間的主要內容，包括文章的內容，點贊功能，評論功能。那主要功能就參考博客園首頁，我隨便截取了兩篇博客，效果如下：

　　那這就是主體內容，主要分為博客題目，博客博主圖片博客索引，和博主名稱，發布於，加上如期，加上評論，閱讀。

　　我們就按照這樣的樣式寫即可，只不過把閱讀變為點贊，因為后面我們要實現這樣的效果。

　　所以我們這里主要分為兩部分，一個是上面內容包括文章題目，頭像，索引內容渲染，一個是下面，某某博主發表於什么時間，點贊，評論。

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

　　前端頁面展示：

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中下載兩個效果圖，一個是評論，一個是點贊，下面是我隨便選擇的兩個樣式。

　　最后做出來的效果如下：

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 個人站點頁面的規划布局

　　那個人站點頁面的話，我們希望做成和博客園差不多的效果，首先我們查看我的博客站點：

　　那我們也設置成類似的效果，有一個標題和設置，而我左邊欄目設置為類似於博客園這種，我的標簽，隨筆分類，隨機歸檔就夠了。希望簡單容易。

　　上面的標題也不設置這種一張背景，前面加點字這種，設置成

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>

　　視圖如下：

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>

　　展示效果如下：

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

　　效果如下：

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

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Django學習筆記（18）——BBS+Blog項目開發（2）主體思路及流程 Django快速學習搭建blog項目 Django項目BBS博客論壇 django框架之BBS項目之評論功能 django開發個人簡易Blog——構建項目結構用 Django2.0 做簡單的BBS（前端用 Bootstrap） Django Web開發學習筆記（5） Django博客開發教程,Django快速開發個人blog 如何用django開發一個簡易個人Blog django--BBS項目，后端業務邏輯整理