你好，我是goldsunC
讓我們一起進步吧！
從0到1搭建個人博客-Django(六)
在以下鏈接快速回顧系列文章內容
從0到1搭建個人博客-Django(一)
從0到1搭建個人博客-Django(二)
從0到1搭建個人博客-Django(三)
從0到1搭建個人博客-Django(四)
從0到1搭建個人博客-Django(五)
撰寫模板
在專案目錄下的templates下新建三個檔案：
base.html：它是整個專案的頁面基礎，所有其它的網頁都繼承它，header.html：它是網頁頂部的導航欄，footer.html：它是網頁底部的注腳，
創建完成之后template和article檔案夾目錄如下所示：
templates
│ base.html
│ footer.html
│ header.html
│
└─article
list.html
然后我們開始撰寫模板，首先打開base.html，寫入以下代碼：
<!DOCTYPE html>
<!--
載入靜態檔案
使用 Django 3 學習的讀者改為 {% load static %}
-->
{% load staticfiles %}
<!-- 網站主語言 -->
<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>
<!--
popper.js 采用 cdn 遠程引入，意思是你不需要把它下載到本地，
在實際的開發中推薦靜態檔案盡量都使用 cdn 的形式，
教程采用本地引入是為了讓讀者了解靜態檔案本地部署的流程，
-->
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1-lts/dist/umd/popper.min.js"></script>
<!-- 引入bootstrap的js檔案 -->
<script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
</body>
</html>
然后打開header.html，寫入以下代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- 定義導航欄 -->
<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>
</body>
</html>
接著打開footer.html，寫入以下代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
{% 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">Copyright © goldsunC愛編程 2020</p>
</div>
</footer>
</body>
</html>
最后打開之前的list.html，寫入如下代碼：
<!DOCTYPE html>
<!-- extends表明此頁面繼承自 base.html 檔案 -->
{% extends "base.html" %}
{% load staticfiles %}
<!-- 寫入 base.html 中定義的 title -->
{% block title %}
首頁
{% endblock title %}
<!-- 寫入 base.html 中定義的 content -->
{% block content %}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的博客</title>
</head>
<body>
<!-- 定義放置文章標題的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 %}
</body>
</html>
這個時候啟動服務器，輸入網址http://127.0.0.1:8000/article/article-list/，看看出現了什么：
一個簡單的博客頁面就出現在我們眼前了，如何？現在你可以隨便點點試試，比如點擊那個藍色的閱讀原文，點了之后并沒有發生什么，是的，這是我們還沒有給它分配路由、分配視圖函式等操作，接下來我們增加文章詳情頁，
增加視圖函式
打開article/views.py，增加函式article_detail()：
# 注意是是增加，不要把之前的article_list函式洗掉了
# 顯示文章詳情
def article_detail(request, id):
# 取出相應文章
article = ArticlePost.objects.get(id=id)
# 需要傳遞給模板的物件
context = {'article':article}
# 載入模板，回傳context物件
return render(request, 'article/detail.html',context)
這里除了傳入request這個HTTP請求外，還有一個id，這個id并不是我們創建的模型類引數，它是Django自動生成的用于索引資料表的主鍵，不信你打開資料庫看看，里面有自動生成的id主鍵，
視圖函數撰寫好了，然后呢？當然是給視圖配置路由地址，打開article/urls.py，在urlpatterns中增加如下代碼：
# 文章詳情
path('article-detail/<int:id>/', views.article_detail, name='article_detail'),
這里的<int:id>是Django2中path的新語法，用尖括號<>定義需要傳遞的引數，這里需要傳遞名為id的整數到視圖函式中去，
撰寫文章詳情模板
在templates/article/中新建detail.html檔案，輸入如下代碼：
<!DOCTYPE html>
<!-- extends表明此頁面繼承自 base.html 檔案 -->
{% extends "base.html" %}
{% load staticfiles %}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<!-- 寫入 base.html 中定義的 title -->
{% block title %}
文章詳情
{% endblock title %}
<body>
<!-- 寫入 base.html 中定義的 content -->
{% block content %}
<!-- 文章詳情 -->
<div class="container">
<div class="row">
<!-- 標題及作者 -->
<h1 class="col-12 mt-4 mb-4">{{ article.title }}</h1>
<div class="col-12 alert alert-success">作者：{{ article.author }}</div>
<!-- 文章正文 -->
<div class="col-12">
<p>{{ article.body }}</p>
</div>
</div>
</div>
{% endblock content %}
</body>
</html>
然后運行服務器，輸入網址：http://127.0.0.1:8000/article/article-list/1/，出現如下界面：
注意這里是輸入了http://127.0.0.1:8000/article/article-list/1/才訪問到了這個頁面，如果你在article-list頁面點擊那個藍色的閱讀本文是無法訪問這個頁面的，因為我們還沒有給其增加鏈接，
優化網頁入口
現在我們來實作點擊網頁右上角文章就能回傳到http://127.0.0.1:8000/article/article-list/導向的那個文章頁面，然后在那個頁面點擊藍色的閱讀本文就能導向文章的http://127.0.0.1:8000/article/article-list/1/頁面，
打開header.html檔案，這個檔案主要就是負責網頁的頭部導航欄，打開之后改寫代碼：
<a class="nav-link" href="{% url 'article:article_list' %}">文章</a>
主要找到這一行哦，標簽中有個文章倆字的那一行，看到改寫的哪里了嗎？如果你有HTML基礎就會知道href是鏈接的引數，改了它鏈接的地址就能實作回傳博客首頁URL的功能，
然后打開article/list.html檔案，讓用戶可以點擊閱讀本文藍色按鈕可以進入文章詳情：
<a href="{% url 'article:article_detail' article.id %}" class="btn btn-primary">閱讀本文</a>
也是把href的引數改變了，這樣就可以了，
這個時候打開服務器，輸入http:127.0.0.1:8000/article/article-list/，打開博客文章串列頁，去吧，點點按鈕試試看，
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/178217.html
標籤：其他
下一篇：格式化文本標記