搭建本身的博客（七）：使用bootstrap框架美化導航欄

時間 2019-12-10

標籤搭建本身博客使用 bootstrap 框架美化導航欄目 Bootstarp 简体版

原文原文鏈接

前面發現本身寫css代碼以及不少功能太麻煩，故但願在本身的博客中引入bootstrap框架，bootstrap是一個很是強大的前端框架，簡單易學容易上手。附上官網地址：bootstrap官網css

我使用的bootstrap版本是bootstrap4.1。html

一、和以前同樣先上變化的部分：前端

二、解釋：jquery

圖中紅色的文件是bootstrap4.1版本須要的文件。bootstrap

bootstrap4.1文件下載：下載地址前端框架

三、變化文件內容：框架

body, * {
    margin: 0;
    padding: 0;
}

base.css

{# 引用模板 #}
{% extends 'base.html' %}

{# 標題 #}
{% block title %}
    {{ blog.title }}
{% endblock %}

{# 內容#}
{% block content %}
    <h3>{{ blog.title }}</h3>
    <p>做者：{{ blog.author }}</p>
    {# 時間過濾器讓時間按照本身須要的格式過濾 #}
    <p>發佈日期：{{ blog.created_time|date:"Y-m-d H:n:s" }}</p>
    <p>分類：
        <a href="{% url 'blogs_with_type' blog.blog_type.pk %}">
            {{ blog.blog_type }}
        </a>
    </p>
    <p>{{ blog.content }}</p>
{% endblock %}

{% block js %}
    <script>
        $(".nav-blog").addClass("active").siblings().removeClass("active");
    </script>
{% endblock %}

blog_detail.html

{% extends 'base.html' %}

{# 標題 #}
{% block title %}
    felix Blog
{% endblock %}

{# 內容#}
{% block content %}
    {% for blog in blogs %}
        <a href="{% url 'blog_detail' blog.pk %}"><h3>{{ blog.title }}</h3></a>
        {#    添加過濾器 文章太長時只顯示前30個字符  #}
        <p>{{ blog.content|truncatechars:30 }}</p>
    {% empty %}
        <p>--暫無博客，敬請期待--</p>
    {% endfor %}
    {# 過濾器統計博客數量 #}
    <p>一共有{{ blogs|length }}篇博客</p>
{% endblock %}


{% block js %}
    <script>
        $(".nav-blog").addClass("active").siblings().removeClass("active");
    </script>
{% endblock %}

blog_list.html

{% extends 'base.html' %}

{# 標題 #}
{% block title %}
    {{ blog_type.type_name }}
{% endblock %}

{# 內容#}
{% block content %}
    <h3>標籤名：{{ blog_type.type_name }}</h3>
    {% for blog in blogs %}
        <a href="{% url 'blog_detail' blog.pk %}"><h3>{{ blog.title }}</h3></a>
        {#    添加過濾器 文章太長時只顯示前30個字符  #}
        <p>{{ blog.content|truncatechars:30 }}</p>
    {% empty %}
        <p>--暫無博客，敬請期待--</p>
    {% endfor %}
    {# 過濾器統計博客數量 #}
    <p>一共有{{ blogs|length }}篇博客</p>
{% endblock %}


{% block js %}
    <script>
        $(".nav-blog").addClass("active").siblings().removeClass("active");
    </script>
{% endblock %}

blog_with_type

{% load staticfiles %}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 根據屏幕自動響應佈局 -->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>
        {#  用來放標題  #}
        {% block title %}

        {% endblock %}
    </title>
    {# 加載css代碼 #}
    <link rel="stylesheet" href="{% static 'bootstrap4.1/bootstrap.min.css' %}">
    <link rel="stylesheet" href="{% static 'css/base.css' %}">

    {% block header_extends %}
        {#    用來作頭部擴展，如加載某些靜態文件     #}
    {% endblock %}
</head>
<body>

{# 導航欄 #}
<nav class="navbar navbar-expand-lg navbar-light bg-light sticky-top">
    <a class="navbar-brand" href="{% url 'home' %}">Felix Blog</a>

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>


    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item nav-home"><a href="{% url 'home' %}" class="nav-link">首頁</a></li>
            <li class="nav-item nav-blog"><a href="{% url 'blog_list' %}" class="nav-link">博客</a></li>
        </ul>
    </div>

</nav>

{# 用來放內容 #}
{% block content %}

{% endblock %}

{# js代碼放在後面能夠增長性能 #}
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="{% static 'js/jquery-3.3.1.min.js' %}"></script>
<script src="{% static 'bootstrap4.1/popper.min.js' %}"></script>
<script src="{% static 'bootstrap4.1/bootstrap.min.js' %}"></script>

{# 導入資源建議放在js代碼前 #}
{# 用來放js代碼 #}
{% block js %}

{% endblock %}


</body>
</html>

base.html

{% extends 'base.html' %}
{% load staticfiles %}


{% block header_extends %}
    <link rel="stylesheet" href="{% static 'css/home.css' %}">
{% endblock %}

{% block title %}
    個人博客|首頁
{% endblock %}


{% block content %}
    <h1 class="home-content">歡迎訪問個人博客</h1>
{% endblock %}

{% block js %}
    {# 將首頁這個按鈕設置激活狀態 #}
    <script>
        $(".nav-home").addClass("active").siblings().removeClass("active");
    </script>
{% endblock %}