前言
由於我們的首頁目前預設是「文章列表」，只有一篇預設的文章且沒有文章封面主圖，而為了讓版面有內容可以預覽與調整，我們就先來快速建個數篇虛擬文章(含文章分類)，每篇文章至少會帶有一張封面圖。
▼網頁的版面三區
| 區域 | 說明 | 備註 |
|---|---|---|
| 頁首(head) | 網站名稱、Logo、主選單 | (網站名稱與Logo可二擇一出現) |
| 主內容區(body) | ①首頁(預設是文章列表)、 ②單一頁面展開之全文、 ③單一文章展開之全文、 ④單一分類展開之列表。 | (版型變化主要以此區為主) |
| 頁尾(footer) | 版權宣告、其它資訊。 |
實作
在這篇教學中，暫不說明使用區塊編輯器的細節技巧與寫作技巧(在另一個單元課程中另述)，先以能快速建立數篇文章為主。
1、建立文章分類
在這裡我們要先快速建個數篇的虛擬文章與文章分類，故會暫時先從網路上找一些新聞文章直接複製貼上(測試完畢後請記得把虛擬內容刪除)或用ChatGPT來產生一些虛擬內容。
在此我會先建立的有 :
- 文章分類名稱 : 共有「新手裝修、風格靈感、軟裝配飾、好物推薦」。
要求ChatGPT產生虛擬文章的指令 :
寫一篇有關「L型沙發」的介紹 ，顯示圖片請透過 markdown 語法 (https://source.unsplash.com/960×640/?<關鍵詞>)
2、安裝圖庫外掛
後台搜尋安裝「Instant Images – One Click Image Uploads from Unsplash, Openverse, Pixabay and Pexels」，此圖庫外掛整合四大免費圖庫平台，可以讓你在編寫文章時直接插入免費圖片。
安裝並啟用，不須做依任何設定，它會自動在上傳圖片時出現介面讓你找圖。
3、建立文章
文章名稱 : 每個分類底下會建立2篇文章，共8篇，請下載Demo圖文來練習文章上架。(Demo圖文下載)
把①首頁(預設是文章列表)先建立數篇好之後，版面三區中提到的「③單一文章展開之全文、④單一分類展開之列表」就會自動產生真實連結並會有版本可以呈現了。(在首頁文章列表試點擊看看)
參考影片 :
