如何使用Django3架設簡單的部落格 — — Python Django教學 EP.1

如何使用Django3架設簡單的部落格 — — Python Django教學 EP.1

Python django要如何架設部落格?所有你會遇到的問屜,讓我每個步驟帶你實際走一次!
如何使用Django3架設簡單的部落格 — — Python Django教學 EP.1
python django

文章索引

什麼是Python django?

Django 是一個可以快速寫出網站的python web framework ,Instagram 在創立之初就是使用Django作為他們的框架,而現在國外非常多大型的網站都是使用 Django來做後端開發。

Python,則是一種泛用的直譯式通用程式語言。Python支援多種程式設計,包括指令式、函數式、結構化、反射式和物件導向程式設計。它具有動態型別系統與垃圾回收功能,能自動管理記憶體使用,並且本身有一個龐大且廣泛的標準庫。

Django的slogan

The Web framework for perfectionists with deadlines

意思是說,是一個可以給完美主義者快速架出網站的工具

他有很多預設的優良功能,包含admin後台、安全性設定、ORM、router、MVC架構等等,這些都只需要我們打少量的程式碼就能輕鬆地做出來。

那接下來就開始我們今天的教學吧!
(過程中如果有程式找不到在哪裡看都可以上完整版github repo

前置準備

Disclaimer: 本篇教學專注在Django上,假設你大概知道怎麼用python,電腦上應該是有裝好python的狀態

本篇屬於比較進階一點的教學,不是在教程式的基礎,也不是在教觀念,而是讓懂一點點python的人可以架設屬於自己的部落格。

首先先創建一個project資料夾,並且進入該資料夾

我們先進到 terminal

  • 在 Mac上用 Command+Space 搜尋 terminal
  • 在 Windows 上 開啟 cmd (並確保有安裝好 python 並在環境變數中的PATH變數加入Python的目錄)

接下來我們要創建專案資料夾:

利用 mkdir (make directory 創建目錄)指令 建立一個新的資料夾 django-blog-demo,也可以直接在電腦上新增一個資料夾

mkdir django-blog-demo
cd django-blog-demo

pyenv + pipenv

pyenv是用來管理python版本的工具,可以讓一台電腦上有多個不同版本的python,這在做一個專案中是非常重要的,因為我們不希望我們的python版本不清不楚,造成之後維護,或是檔案共享的困難

pipenv則是 python pip 這個 package manger 比較新的虛擬環境工具, 很多人可能用過 virtualenv, conda, 或是 venv,但我個人比較喜歡 pipenv, 因為 pipenv 可以產生 Pipfile.lock 跟 Pipfile 的檔案。

如果寫過nodejs的人可能就知道,這就很像npm 的 package.json 跟 packge-lock.json 或 yarn-lock.json,可以確保以後重新安裝、或要做部署(發佈到AWS或Digital Ocean等虛擬機)之後(可能放到github上面再git pull下來)可以快速安裝正確版本的套件,避免相容性的問題。

回到剛剛的 “django-blog-demo”

此時我們要在這邊檢查我們 python 的版本。

我們這邊要使用 python 3.7的版本,先使用 pyenv install –list 檢查可安裝的版本, 後面加上 ‘| grep 3.7’ 用來過濾出只含有 ‘3.7’ 這個字串的那幾行

pyenv install --list | grep 3.7

這時候我看到有一個 3.7.6 感覺不錯,就來裝一下(通常一樣是3.7會建議裝後面數字大一點的版本,會功能上比較穩定,也會有很多安全性的修復,如果你的專案之後要放在網路上,這就非常重要)

pyenv install 3.7.6

這邊安裝通常會比較久一點,我們就讓他跑一下

pyenv versions

這時可以看到我們本機上可以切換的python版本,裡面就包含了剛才的 3.7.6

接下來確保我們在剛剛的 ‘django-blog-demo’中,可以使用 pwd 這個指令檢查現在的位子

pwd

此時顯示出來,後面應該要是django-demo-blog或是你設定的資料夾名稱。沒問題後我們就可以開始設定環境

pyenv local 3.7.6

這個指令是用來設定現在這個資料夾裡面的python版本,我們把它設成3.7.6

接下來要來安裝django(到這個目錄裡)

有別於一般習慣的 pip install, 我們要用 pipenv install,這樣他只會安裝到我們這個目錄中,並且可以做好版本管理。(類似nodejs的 npm install)

我們先確定這個版本的 python裡面要有pipenv

先在這個 3.7.6的版本中安裝 pipenv

pip install pipenv

我們這時候執行的 pip 是我們 python 3.7.6 的 pip (相當於 python -m pip)

pipenv install --python $(which python) django==3.0.2

這邊我們使用到下面幾個參數

  • –python 設定要使用的 python 版本 (虛擬環境中的python版本)(因為有時候直接pipenv install 可能沒有抓到 pyenv 設定的版本 所以我為了以防萬一,通常會加上這段)
  • $(which python) 的意思就是 把 ‘which python’ 的 output 結果 取代這個 $() ,得到的結果就會是 pyenv 設定的 python 的目錄 (確保用剛剛設定的python版本執行)
  • django==3.0.2 這邊我們就是要裝 django,並且確定使用 3.0.2 的版本

在安裝package的時候我們都會希望比較重要的package 版本能夠標明清楚,避免之後一樣的程式跑到別的電腦或是AWS之類的上面跑不出來(相容性問題)

接下來我們就可以進入虛擬環境囉!

pipenv shell

這時候我們可以看一下裡面django的版本

django-admin --version
3.0.2

我們可以看到剛剛的安裝好的 3.0.2,這樣就安裝成功囉!

創立Django Project

接下來我們要來新增一個 django 專案

django-admin startproject blog .
  • blog 是專案名稱
  • 後面加一個 ‘.’ 是告訴 django 我要在現在這個位子創建專案,而不要把我的東西另外放進新的資料夾

這時候我們可以用 tree 指令 看一下資料夾裡面多了什麼東西

(沒有tree指令可以去google一下)

tree

目前我們的目錄長這樣

.
├── Pipfile
├── Pipfile.lock
├── blog
│ ├── init.py
│ ├── asgi.py
│ ├── settings.py
│ ├── urls.py
│ └── wsgi.py
├── db.sqlite3
└── manage.py

  • 剛剛的 Pipfile, Pipfile.lock是我們版本管理用的東西,可以不用管他
  • manage.py 這個檔案就是 我們用來控制 django 各種命令的地方
  • blog這個資料夾就是我們的project基本設定資料,和很多router等等存放的地方
  • db.sqlite3 是我們的簡易 sqlite database
  • asgi.py 是 django 3 新的東西,以前會有一個 wsgi.py,是用來以後我們專案放到網路上讓他可以持續運行的東西
  • 當然還是有wsgi.py
  • urls.py 是用來設定我們的網址(例如: /about, /blogs, /contact 等等)
  • settings.py 就是我們的設定檔
  • __init.py__ 是 django 自己會去調配的初始化設定檔,基本上我們不用理他

這時候我們就可以開始試試看跑我們的server

python manage.py runserver
#或是
./manage.py runserver

這時候打開我們的瀏覽器,進到網址 http://127.0.0.1:8000 或是 localhost:8000會看到類似這樣的畫面

python django1

這樣就是python server 開始跑囉!

設定

接下來使用你最愛用的文字編輯器 VSCode, Sublime, vim 等等打開你的專案資料夾就可以開始設定基本的內容!

首先我們可能會希望把語言改成中文,並調整時區

找到 blog/settings.py,並更新下面兩個變數

LANGUAGE_CODE = 'zh-hant'
TIME_ZONE = 'Asia/Taipei'

接下來的設定我們不會動太多,因為現在只是一個最基礎的教學,之後會再寫文章講到如何使用別的database還有其他設定

Migration

接下來我們就快要進入部落格的環節了

首先,注意到從剛剛到現在terminal裡面一直都有一個紅紅的東西

python django2

這是告訴我們,我們的database 並沒有做好 migration。白話一點就是說,我們還沒把這個django網站相關的資料寫進我們的database。

在新增部落格之前,當我們一創建好專案,django就有很多資料庫的東西要記錄,例如cookies, sessions, timestamp, 使用者帳號等等,所以他要對我們的database先做一些基本操作 (他會使用ORM做類似 INSERT INTO sessions … 之類的SQL指令,我們不用擔心這塊)

所以這邊我們要先做migration

先Ctrl+C 關閉server

./manage.py migrate
python django3

趁這個時候我們也來創建一下 super user 帳號

./manage.py createsuperuser
python django4

這邊電子信箱不用打,而我密碼為了方便,設得很簡單,他會跳出提醒但是可以直接按y跳過

接下來回去runserver

./manage.py runserver

這時候就不會再跳出剛才的提醒了

此時我們可以去看一下django的後台:

進到 localhost:8000/admin,會看到這樣的畫面

python django5

這時我們就可以用剛剛的帳密登入,登入後看到這個主畫面,就是一個很好用的後台了。

python django6

那接下來我們就要回去新增部落格功能,讓後台可以管理新增部落格,之後再呈現到前端上面。

終於要來開始新增部落格的功能了

一樣CTRL+C 關閉 server,之後建立一個叫做 post 的 App

./manage.py startapp post

此時django會幫我們創一個post資料夾,看一下裡面有什麼東西

tree post

post
├── init.py
├── admin.py
├── apps.py
├── migrations
│ └── init.py
├── models.py
├── tests.py
└── views.py

  • 外面的init.py 一樣是一些設定檔(基本上是空的) 先暫時不用理他
  • admin.py 是用來設定部落格跟我們後台之間的 內容呈現 (表單樣式、哪些格子可以編輯等等)
  • apps.py 就是註冊我們這個 post app在用的 class (之後用來在別的地方import)
  • models.py 是用來設定我們的模型 (MVC架構中的M)(這可以決定我們的一篇部落格要有什麼東西,例如:標題、內容、圖片…等)
  • migrations/ 目錄裡面放的是 makemigration 之後產生的ORM指令
  • tests.py 是用來做 unit-testing 的 目前我們先不用理她
  • views.py 是來做 MVC架構中的 View,可能也包含一些 controller的功能(之後會再解釋)

接下來我們要去 blog/settings 註冊我們這個app,讓他可以讀取到

到settings.py 找到 INSTALLED_APPS 這個 list, 加入 ‘post’

INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
# 加入 post
'post'
]

這樣我們的app就註冊完成囉(後台的部分還沒)

那我們接著就可以開始來創建我們部落格的模型了

用text editor 進到 models.py

這邊我們建立一個簡單的範本,裡面只有標題跟內容

post/models.py

from django.db import models
class Post(models.Model):
title = models.CharField('標題', max_length=20)
content = models.CharField('內容', max_length=200)
  • 這邊是繼承 models.Model這個模板
  • 然後我們設定title是一個Character Field,用來存放文字,後面 ‘標題’ 是這個title的別稱(會顯示在後台)
  • max_length 是用來設定最多幾個字
  • content的話一樣的道理

接下來,我們要把這樣的資料結構創建schema到資料庫中

回到我們的console

./manage.py makemigrations post

./manage.py makemigrations post
./manage.py migrate
  • 這邊 makemigrations 就會創建一些ORM 的 SQL 指令讓等一下的 migrate執行(用來把資料結構input到資料庫中)
  • migrate就會執行這個動作
  • 如此一來我們的資料庫的結構就和我們的model同步了

admin註冊

接著我們要做的就是去 admins.py 這邊 把我們的 app 表單註冊到後台

post/admin.py

from django.contrib import admin
from .models import Post
class PostAdmin(admin.ModelAdmin):
list_display = ('id', 'title', 'content')
search_fields = ('title', 'content')
admin.site.register(Post, PostAdmin)
  • 這邊第一行,是他預設的admin,目的是把django admin這個 module import 近來
  • 第二行是從當前目錄下的 models.py 引入 剛剛做好的 Post 模型
  • 接下來我們創建一個 PostAdmin class 繼承 ModelAdmin這個模板
  • list_display是在清單目錄下要呈現的內容
  • 包含預設的id(SQL會自己創建)、標題、內容
  • search_fields 是為了要可以使用搜尋功能,可以直接加入這行,讓在admin中以後如果很多篇文章,可以根據標題或內容直接搜尋

接下來回到我們的瀏覽器,到localhost:8000/admin

python django7

可以看到已經有Post了,但是這邊我們很想把他用成中文,所以我們要再回到models.py裡面做一些設定

from django.db import models
class Post(models.Model):
class Meta:
verbose_name = '文章'
verbose_name_plural = '文章'
    title = models.CharField('標題', max_length=20, )
content = models.CharField('內容', max_length=200)

def __str__(self):
return self.title

這邊我們用這個 Meta class 用來對 Post模組做一些設定

verbose_name跟verbose_name_plural 決定這個 post 要被以什麼名稱口頭上稱呼他(admin用的)我們中文中都統一設定成 ‘文章’

而 __str__ 則是用來設定到時候每篇文章要用誰來稱呼他(預設會用 id,我們想要每篇文章用標題稱呼他)

這時回到我們的admin,可以看到 Posts被叫成 ‘文章了’,而上面的 POST 我們需要動到他模板的template,就先暫時不管他。

python django8

我們現在可以去新增幾篇文章試試看

python django9

現在可以看到我們現在列表中有我們剛剛新增的內容了,而這些內容都會被儲存在我們的 db.sqlite3這個檔案中(其實有安全性的問題,所以大型專案不建議使用 sqlite)

python django10

把內容推播出去

接下來我們要把內容推播出去,利用views.py決定我們要呈現的內容(可能有點含糊,跟著做就對了)

這裡我們要用最簡單,寫起來最快的 Class-Based Views (CBV),有別於一些網路上其他的文章,都是使用functional views 這邊我們會用比較新的功能來快速產生views

from django.views.generic import ListView, DetailView
from .models import Post
class PostListView(ListView):
model = Post
template_name = 'post_list.html'
class PostDetailView(DetailView):
model = Post
template_name = 'post_detail.html'
  • 這邊先 import 我們要繼承的 快速view產生模板 ListView和 DetailView
  • 接著和 admin.py 的時候一樣 加入我們的model當 reference
  • 接下來我要有一個列表View(用來呈現文章列表)
  • 再一個 Detail View (用來呈現單一內容)
  • 再來裡面的 model就是 用我們的模型做reference
  • template_name 則是告訴 django我們等一下要用到的 html 模板檔案

在前端呈現這些文章

接下來就是我們的呈現環節了,要產生真正的網頁,並且把這些內容呈現出來

這時候我們就需要設定所謂的 template(模板)

並且設定 routes(路徑)在 urls.py 中

先創立模板

回到根目錄(django-blog-demo) 創立一個 templates 資料夾

在裡面建立一個base.html

接下來我們要用到 Bootstrap 這個CSS framework 來快速做出我們的模板

python django11

點擊上面的連結進到Bootstrap,之後點get started 找到這個 starter template 然後把他複製到我們的 base.html

接下來我們先把剛剛可愛的django已經安裝成功頁面換掉

接著再創建兩個檔案分別為 post_detail.html和post_list.html,

裡面目前都放這樣的內容

{% extends 'base.html' %}

意思是從 base.html這個檔案去延伸

目前我們的目錄結構長這樣:

.
├── Pipfile
├── Pipfile.lock
├── blog
│ ├── init.py
│ ├── asgi.py
│ ├── settings.py
│ ├── urls.py
│ └── wsgi.py
├── db.sqlite3
├── manage.py
├── post
│ ├── init.py
│ ├── admin.py
│ ├── apps.py
│ ├── migrations
│ │ ├── 0001_initial.py
│ │ └── init.py
│ ├── models.py
│ ├── tests.py
│ └── views.py
└── templates
├── base.html
├── post_detail.html
└── post_list.html

更新: 這時我們要去 blog/settings.py 把templats/ 這個資料夾加到template engine的讀取清單中

TEMPLATES = [
 {
 ‘BACKEND’: ‘django.template.backends.django.DjangoTemplates’,
 # 加入templates目錄
 ‘DIRS’: [os.path.join(BASE_DIR, ‘templates’)],
#…

接著我們要去 blog/urls.py 讓這兩個頁面會呈現出來

blog/urls.py

from django.contrib import admin
from django.urls import path
from post.views import PostListView, PostDetailView
urlpatterns = [
path('admin/', admin.site.urls),
path('', PostListView.as_view()),
path('<pk>', PostDetailView.as_view())
]

這邊就是要讓 localhost:8000 呈現 PostListView,而 localhost:8000/1 呈現第一篇文章,依此類推

這個 <pk> 代表 primary key 就是用來表示文章編號的代名詞而已

接下來我們重新啟動server就可以看到不一樣囉

現在打開 localhost:8000, localhost:8000/1, localhost:8000/2 都會看到這樣的頁面,這就表示模板讀取成功囉!

python django12

調整模板

接著就要開始在模板裡面呈現東西了!

django 使用的是 jinja template 裡面有很多不同的邏輯功能,可以讓我們呈現網站非常快速,詳情可以上django 官網

先回到 base.html

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
crossorigin="anonymous"
/>
<title>Django | 簡易部落格</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container">
<a class="navbar-brand" href="/">簡易Django部落格</a>
</div>
</nav>
{% block body %}{% endblock %}
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script
src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrXaRkfj"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous"
></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
crossorigin="anonymous"
></script>
</body>
</html>

調整title,並把 body 中的 hello world 換成 {% block body %}{% endblock %}

並且在上面加一個簡單的bootstrap 導覽列 (navbar)

這就是我們等一下要去 post_detail跟post_list中取代的部分,而外面的部分等一下在裡面就不用重打。

這時再回去看我們的網站就有基本的樣式囉

python django13

部落格列表

回到post_list.html

{% extends 'base.html' %} 
{% block body %}
<div class="container mt-5">
<h1>文章列表</h1>
<div class="row">
{% for post in object_list %}
<div class="col-md-6">
<div class="card my-3">
<div class="card-body">
<h5 class="card-title">{{ post.title }}</h5>
<p class="card-text text-muted">
{{ post.content }}
</p>
<a href="/{{ post.id }}" class="card-link">閱讀更多</a>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
{% endblock %}
  • extends 代表繼承 base.html (剛剛的導覽列那些)
  • 接下來這些div就是bootstrap的一些classes,因為本篇不是bootstrap的文章,就不多做介紹了,之後以會再做bootstrap的簡易教學
  • {%block body%} 的意思就是編輯剛剛我們 base.html裡面那個區塊(在裡面加東西)。後面記得要加 {%endblock%}
  • {%for%}{%endfor%} 就是回圈 在裡面可以去從一個陣列單獨的一個一個東西抓出來。
  • 像這邊我們的例子就是要從 object_list 這裡抓東西 (這就是我們的文章列表)
  • 注意這邊 object_list 是固定的字眼,如果想要把它換成 posts之類的,要到views裡面設定 (可以查一下)
  • 這有點像 javascript 的 map 或是 forEach 那種概念
  • 之後我們就是呈現一張卡片,在標題的地方呈現 {{ post.title }} 他就會換成文章標題
  • content一樣的道理
  • 而在 <a href=”/{{ post.id}}”> 這邊我們是要讓網址變成 href=”/1″ href=”/2″ 這樣子,讓我們連到 等一下的detail頁面

如果以上不懂沒有關係,這是跟html和bootstrap比較有關,可以先複製貼上看一下效果

python django14
python django15

接下來點進去 閱讀更多就會到我們的detail頁面,我們可以開始做我們的detail囉!

文章detail頁面

這邊我們用得很簡單,以下看 post_detail.html

{% extends 'base.html' %}
{% block body %}
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="/">文章列表</a></li>
<li class="breadcrumb-item active" aria-current="page">
{{ post.title }}
</li>
</ol>
</nav>
<div class="container mt-2">
<h1>{{ post.title }}</h1>
<hr />
<p>{{ post.content }}</p>
</div>
{% endblock %}

就只是簡單呈現 title跟 content,並且在上面用一個breadcrumb目錄來方便導覽。

python django16
python django17

基本上這樣就大功告成囉!

ps. terminal 裡面有一個 這樣的 error 會產生的原因是因為我們偷懶,現在post urls.py目錄是直接設在根目錄下面 localhost:8000/ ,所以當他請求 favicon.ico 的時候原本是要去抓網站logo 變成跑去抓一篇 id 為 favicon.ico 的文章。

不過這在我們現在的project中並不構成影響,可以不用理會!

python django18

最後,如果有不懂的東西歡迎Facebook, medium 留言提問

完整github repo: https://github.com/knhn1004/django-blog-demo

之後會再出如何部署成一個真正的網站等等教學,也會有如何用django寫 restful API 搭配 jquery 或 react 等框架作為前端 的教學

這只是一篇最基礎的教學,用文章可能不太清楚,之後打算會有影片series放在youtube上,年底可能也會有一些線上課程上線,盡請期待!

謝謝大家!

作者: 周家鋐 — — 浚鋐網路科技有限公司 創辦人

相關文章