Category: Wagtail_CRX

首先，請進入後台管理介面吧。

定義網站名稱( Site Name )

路徑是Settings –> Sites，就會看到下圖：

*右上角有個按鍵”Add a site”，其實Wagtail CRX跟Wordpress一樣是可以支援多網站的 ( Multisite )。不過這等未來正式部屬後再找時間說明。

現在就先從localhost點進去吧。

進來後，目前只需要設定Site name，可以看到預設的名字是初次啟動時所給的”mysite”，可以換成你喜歡的名字，再按save儲存。

Root page指得就是網站的首頁啦，已經預設好指向Home這個page了，暫時不需要更動。左側選項的Pages裡面可以看到目前的網頁有哪些。

Hostname及Port則留到部屬後再來設定即可。

假設我把Site name改成ordinary_site。儲存後，再回到首頁，可以看到左上角的Site name成功從mysite換成ordinary_site了。

關於部屬：

前面提到了幾次部屬，這裡簡單做個說明。還記得Wagtail是架構在Django的基礎上嗎？Django有定義開發中的網頁叫做development environment，正式部屬叫做production environment。兩者有非常大的差異，首先是開發中的環境，只要動到一點程式碼，網頁馬上就會更新，這適合工程師確認程式碼有沒有問題。再來開發中的環境只有一個執行緒(Thread)，如果太多人瀏覽，很容易就塞車了。

Wagtail CRX的官網教學並沒有提到要如何部屬成production environment，後面我會再說明要如何部屬到伺服器上。

Bootstrap框架

先送上Bootstrap官網網址。

Bootstrap是非常受歡迎的前端框架，只要安裝好相關的css及js檔，之後在寫html時，只需要輕輕鬆鬆的修改class，就能得到許多前端效果。

Wagtail CRX已經很好心的都幫我們安裝好Bootstrap了，直接用就對了，以我目前使用的v2.1.2版本是支援到Bootstrap v5.2的。

不過無論Bootstrap哪個版本，下面的基本功能都差不多，我們就儘快進入正題吧。

以下內容需要對html有基礎認識，至少要知道class怎麼用。

顏色

要把網頁弄得花花綠綠的，顏色絕對是最重要的環節，就從這裡開始吧。

基本顏色class標籤：

大致上就是primary, secondary, success, danger, warning, info這幾個標籤分別代表著不同的顏色。若前面加上”bg-“，就表示背景要變成這個顏色。請看以下把div變色的例子：

<div class="bg-primary">背景顏色</div>
<div class="bg-secondary">背景顏色</div>
<div class="bg-success">背景顏色</div>
<div class="bg-danger">背景顏色</div>
<div class="bg-warning">背景顏色</div>
<div class="bg-info">背景顏色</div>
<div class="bg-light">背景顏色</div>
<div class="bg-dark">背景顏色</div>Code language: HTML, XML (xml)

以上div所實際輸出的結果如下：

同理，字體顏色也可以使用這樣的組合標籤”text-” 舉例如下：

<p class="text-primary">普通人日誌</p>
<p class="text-secondary">普通人日誌</p>
<p class="text-success">普通人日誌</p>
<p class="text-danger">普通人日誌</p>
<p class="text-warning">普通人日誌</p>
<p class="text-info">普通人日誌</p>
<p class="text-light bg-secondary">普通人日誌</p>
<p class="text-dark">普通人日誌</p>Code language: HTML, XML (xml)

以上不同的class，所呈現出來的字體依序如下：

特別注意第7行的class，標籤是可以混搭把text-light 及 bg-secondary 一起使用的。

普通人日誌

普通人日誌

普通人日誌

普通人日誌

普通人日誌

普通人日誌

普通人日誌

網格系統（Grid system）

我想這應該是Bootstrap最受歡迎的功能了。除了方便排版，另外也會讓手機、平板、螢幕等不同尺寸的畫面都能兼顧閱讀性。

但因為這樣篇幅會有點多，而且Wagtail CRX大多幫我們規劃好了，所以這邊我僅簡短介紹。

列 ( Row ) 與欄 ( Column )

這很重要，但也很簡單，Bootstrap是把畫面分割成列與欄

• 先有列，再有欄。
• 1列裡面最多可分成12欄。

嗯，有以上的概念應該就足夠了。

自動式網格系統 ( Responsive Grid System ) 的分段點 ( breakpoint )

這裡也是先學點概念就足夠了。

Bootstrap預設了以下幾個分段點，分段點的用意就是讓網頁內容可以配合不同尺寸的螢幕來做換行，免得每次閱讀都要放大然後移動捲軸。

• Extra small (xs), <576px
• Small (sm), 576px ~ 768px
• Medium (md), 768px ~ 992px
• Large (lg), 992px ~ 1200px
• Extra large (xl), 1200px ~ 1400px
• Extra extra large (xxl), >1400px

以上要如何使用，就等未來實戰再來說明，會比較容易理解。

上回提到，Wagtail啟動後，瀏覽器輸入http://127.0.0.1:8000就可以看到網站。

如果要進入後台，那就是網址後再加上/admin。

也就是http://127.0.0.1:8000/admin這個連結即可進入後台管理員介面 :

還記得初次啟動的時候，我們曾經建立的 superuser 嗎？

是的，這個 superuser 也就是Wagtail CRX後台管理員的帳號。

接著輸入 superuser 的帳號密碼就可以成功進入後台了 :

以上就是介紹如何進入後台管理介面。

這個介面非常重要，但接下來我必須先插播一些Bootstrap的使用方式。

因為Wagtail CRX相當依賴Bootstrap框架，所以還是需要先建立起基礎的Bootstrap概念。

初次啟動

來到專案資料夾wagtail，一樣要保持在虛擬環境下，輸入： coderedcms start mysite （mysite可以換成其他你喜歡的名字）

(venv) PS C:\wagtail> coderedcms start mysiteCode language: PowerShell (powershell)

接著會跑出下面訊息，告訴你接下來的步驟。

(venv) PS C:\wagtail> coderedcms start mysite
Creating a Wagtail CRX project called mysite
Success! mysite has been created

Next steps:
    1. cd mysite/
    2. python manage.py migrate
    3. python manage.py createsuperuser
    4. python manage.py runserver
    5. Go to http://localhost:8000/admin/ and start editing!

(venv) PS C:\wagtail>Code language: PowerShell (powershell)

接下來的步驟都是延續Django的初次啟動程序，首先進入mysite資料夾

(venv) PS C:\wagtail> cd mysite
(venv) PS C:\wagtail\mysite>Code language: PowerShell (powershell)

再來使用migrate創建資料庫，由於從頭到尾我們都沒設定資料庫，因此預設會使用SQLite資料庫（這是Django預設的資料庫）

(venv) PS C:\wagtail\mysite> python manage.py migrateCode language: PowerShell (powershell)

這時會跑出一長串的訊息，但應該不會出問題。

Applying wagtailsearch.0001_initial... OK
  Applying wagtailsearch.0002_add_verbose_names... OK
  Applying wagtailsearch.0003_remove_editors_pick... OK
  Applying wagtailsearch.0004_querydailyhits_verbose_name_plural... OK
  Applying wagtailsearch.0005_create_indexentry... OK
  Applying wagtailsearch.0006_customise_indexentry... OK
  Applying wagtailsearch.0007_delete_editorspick... OK
  Applying wagtailseo.0001_initial... OK
  Applying wagtailseo.0002_remove_seosettings_amp_pages... OK
  Applying wagtailusers.0001_initial... OK
  Applying wagtailusers.0002_add_verbose_name_on_userprofile... OK
  Applying wagtailusers.0003_add_verbose_names... OK
  Applying wagtailusers.0004_capitalizeverbose... OK
  Applying wagtailusers.0005_make_related_name_wagtail_specific... OK
  Applying wagtailusers.0006_userprofile_prefered_language... OK
  Applying wagtailusers.0007_userprofile_current_time_zone... OK
  Applying wagtailusers.0008_userprofile_avatar... OK
  Applying wagtailusers.0009_userprofile_verbose_name_plural... OK
  Applying wagtailusers.0010_userprofile_updated_comments_notifications... OK
  Applying wagtailusers.0011_userprofile_dismissibles... OK
  Applying website.0001_initial... OK
  Applying website.0002_initial_data... OK
(venv) PS C:\wagtail\mysite>Code language: PowerShell (powershell)

再來建立superuser帳號

(venv) PS C:\wagtail\mysite> python manage.py createsuperuserCode language: PowerShell (powershell)

帳號就看個人喜好了，假設我這邊用admin當做superuser。

依序輸入email (非必須) 及密碼。

Username (leave blank to use 'root'): admin
Email address: 
Password: 
Password (again):Code language: Bash (bash)

Superuser created successfully.
(venv) PS C:\wagtail\mysite>Code language: PowerShell (powershell)

以上就是首次安裝後，初次啟動所需要做的設定。接下來會說明該如何每次啟動Wagtail CRX

每次啟動

基本上把握幾個重點：

• 啟動虛擬環境
• Run server

啟動虛擬環境

進入剛才的wagtail資料夾，並輸入

PS C:\wagtail> .\venv\Scripts\Activate.ps1Code language: PowerShell (powershell)

確認有看到虛擬環境(venv)的符號。

(venv) PS C:\wagtail>Code language: PowerShell (powershell)

進入mysite資料夾

(venv) PS C:\wagtail> cd mysite
(venv) PS C:\wagtail\mysite>Code language: PowerShell (powershell)

Run server

這步驟也完全是Django的啟動程序。指令是

python manage.py runserver

(venv) PS C:\wagtail\mysite> python manage.py runserverCode language: PowerShell (powershell)

然後就會跑出以下訊息：

(venv) PS C:\wagtail\mysite> python manage.py runserver
Watching for file changes with StatReloader
Performing system checks...

System check identified no issues (0 silenced).
August 04, 2023 - 11:24:33
Django version 4.1.10, using settings 'mysite.settings.dev'
Starting development server at http://127.0.0.1:8000/
Quit the server with CTRL-BREAK.Code language: PowerShell (powershell)

使用瀏覽器，輸入網址http://127.0.0.1:8000，就可以看到畫面了。

現在網站暫時都還是空白的。

設置虛擬環境

• 請先確認電腦已經有安裝好Python

為了減少不必要的干擾，建議創建一個虛擬環境來安裝Wagtail CRX，

未來要部屬在伺服器上面，也方便版本管理。

假設在Windows環境下，我的專案資料夾是在C槽下的wagtail。

開啟PowerShell，在wagtail資料夾下輸入：

PS C:\wagtail>python -m venv .\venv\Code language: PowerShell (powershell)

這時wagtail內就會多出一個venv的資料夾，之後安裝的擴充套件都會集中在此 :

Directory: C:\wagtail
Mode                 LastWriteTime         Length Name
----                 -------------         ------ ----
d-----        03/08/2023     16:56                venv
Code language: PowerShell (powershell)

啟動虛擬環境

在wagtail資料夾內輸入：

PS C:\wagtail> .\venv\Scripts\Activate.ps1Code language: PowerShell (powershell)

然後就會啟動虛擬環境，這時可以在PowerShell視窗看到最前面帶有(venv)字樣。

(venv) PS C:\wagtail>Code language: PowerShell (powershell)

下載並安裝Wagtail CRX

我們直接使用Python的PIP來安裝Wagtail CRX，套件的名字叫做coderedcms

(venv) PS C:\wagtail> pip install coderedcmsCode language: PowerShell (powershell)

接下來就會自動安裝Wagtail CRX以及其他相依套件了。

小而快速的架網站CMS — Wagtail CRX

一般提到架設網頁，馬上就會想到WordPress。是的，WordPress非常普及，教學眾多，五花八門的plug-in更是可以把網站佈置的非常健全。

但如果你跟我一樣喜歡容易面臨選擇困難，偏向小而精美的網頁管理系統，有沒有其他選擇？

有的，不妨嘗試看看這款以Django為基礎架構，結合Wagtail框架及CodeRed套件的Wagtail CRX

在教學開始之前，建議需要具備以下基礎知識：

---

1. Bootstrap 必備，Wagtail CRX非常依賴Bootstrap框架。
2. Python 用到不多，但至少你電腦要有裝Python。
3. Django 用到不多，但安裝過程及一些基礎配置就是Django的概念。

正式部屬在伺服器上，還須了解：

1. Linux基本指令
2. Docker概念
3. Nginx配置