Django個人博客搭建1-創建Django項目和第一個App
Django個人博客搭建2-編寫文章Model模型,View視圖
Django個人博客搭建3-創建superuser並向數據庫中添加數據並改寫視圖
Django個人博客搭建4-配置使用 Bootstrap 4 改寫模板文件
Django個人博客搭建5-編寫文章詳情頁面並支持markdown語法
Django個人博客搭建6-對文章進行增刪查改
Django個人博客搭建7-對用戶登陸註冊等需求的實現
Django個人博客搭建8-優化文章模塊
Django個人博客搭建9-增加文章評論模塊
1. 配置Bootstrap 4及依賴文件
Bootstrap 4 下載地址 https://getbootstrap.com/docs/4.1/getting-started/download/
下載並解壓js和css兩個文件夾到新建目錄**static/bootsrap/**下
因爲bootstrap.js依賴 jquery.js 和 popper.js 才能正常運行，因此這兩個文件我們也需要一併下載保存。附上官網下載鏈接（進入下載頁面，複製粘貼代碼到新文件即可）：
jquery.js: https://jquery.com/download/
popper.js: https://popper.js.org/
全部完成後目錄結構如圖
同時我們應該告訴django我們靜態文件的位置,因此在settings.py文件末尾加入如下代碼:
STATICFILES_DIRS = (
os.path.join(BASE_DIR, "static"),
)
2. 編寫模板
在templates/中新建三個文件
base.html是整個項目的模板基礎，所有的網頁都從它繼承；
header.html是網頁頂部的導航欄；
footer.html是網頁底部的註腳。
編寫base.html
<!-- 載入靜態文件 -->
{% load staticfiles %}
<!DOCTYPE html>
<!-- 網站主語言 -->
<html lang="zh-cn">
<head>
<!-- 網站採用的字符編碼 -->
<meta charset="utf-8">
<!-- 預留網站標題的位置 -->
<title>{% block title %}{% endblock %}</title>
<!-- 引入bootstrap的css文件 -->
<link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.min.css' %}">
</head>
<body>
<!-- 引入導航欄 -->
{% include 'header.html' %}
<!-- 預留具體頁面的位置 -->
{% block content %}{% endblock content %}
<!-- 引入註腳 -->
{% include 'footer.html' %}
<!-- bootstrap.js 依賴 jquery.js 和popper.js，因此在這裏引入 -->
<script src="{% static 'jquery/jquery-3.3.1.js' %}"></script>
<script src="{% static 'popper/popper-1.14.4.js' %}"></script>
<!-- 引入bootstrap的js文件 -->
<script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
</body>
</html>
header.html:
<!-- 定義導航欄 -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<!-- 導航欄商標 -->
<a class="navbar-brand" href="#">我的博客</a>
<!-- 導航入口 -->
<div>
<ul class="navbar-nav">
<!-- 條目 -->
<li class="nav-item">
<a class="nav-link" href="#">文章</a>
</li>
</ul>
</div>
</div>
</nav>
footer.html:
{% load staticfiles %}
<!-- Footer -->
<div>
<br><br><br>
</div>
<footer class="py-3 bg-dark fixed-bottom">
<div class="container">
<p class="m-0 text-center text-white">footer</p>
</div>
</footer>
最後編寫list.html
<!-- extends表明此頁面繼承自 base.html 文件 -->
{% extends "base.html" %}
{% load staticfiles %}
<!-- 寫入 base.html 中定義的 title -->
{% block title %}
首頁
{% endblock title %}
<!-- 寫入 base.html 中定義的 content -->
{% block content %}
<!-- 定義放置文章標題的div容器 -->
<div class="container">
<div class="row mt-2">
{% for article in articles %}
<!-- 文章內容 -->
<div class="col-4 mb-4">
<!-- 卡片容器 -->
<div class="card h-100">
<!-- 標題 -->
<h4 class="card-header">{{ article.title }}</h4>
<!-- 摘要 -->
<div class="card-body">
<p class="card-text">{{ article.body|slice:'100' }}...</p>
</div>
<!-- 註腳 -->
<div class="card-footer">
<a href="#" class="btn btn-primary">閱讀本文</a>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
{% endblock content %}
最後運行服務器在瀏覽器中輸入: http://127.0.0.1:8000/article/article-list/
目錄
Django個人博客搭建1-創建Django項目和第一個App
Django個人博客搭建2-編寫文章Model模型,View視圖
Django個人博客搭建3-創建superuser並向數據庫中添加數據並改寫視圖
Django個人博客搭建4-配置使用 Bootstrap 4 改寫模板文件
Django個人博客搭建5-編寫文章詳情頁面並支持markdown語法
Django個人博客搭建6-對文章進行增刪查改
Django個人博客搭建7-對用戶登陸註冊等需求的實現
Django個人博客搭建8-優化文章模塊
Django個人博客搭建9-增加文章評論模塊