編輯文章
靜態網站產生文章的方法其實有點麻煩,它沒有後臺,沒有文章編輯器,我都是直接在VScode上直接打字,然後對照網頁。
新增文章
每次要發布新文章,都需要創一個.md結尾的Markdown檔案。
因為我的網站其中一個主題是食記,個人習慣在發布文章的資料夾裡創建一個新資料夾,把食記的圖片和Markdown檔案放在一起。
通常資料夾的名稱會取為2023-03-22-restaurant
,再創一個2023-03-22-restaurant.md
檔案,直接用時間做檔名的好處就是會依時間排序,然後文章就會直接顯示是2023年3月22日發布。
前言 (frontmatter)
前言會放在檔案最上方,撇除內容,以下是我比較常進行的設定:
文檔文章
我通常會放標題、側邊欄位置、側邊欄名稱、描述和標籤。
---
title: 編輯文章
sidebar_position: 10
sidebar_label: 編輯文章
description: 網站上線後,開始產出內容,編輯文章。
tags: [article, docusaurus]
---
部落格文章
我通常會放標題、描述、網址、縮圖和標籤。
---
title: 嘉義市|雅米食堂
description: CP值高份量多,提供定食、烏龍麵、丼飯和單點品項,也可以自由組合選擇自己想要的主食、主餐和配菜,自行搭配符合自己口味的套餐。
slug: yami_restaurant
image: /img/cover/yami_restaurant.webp
tags: [嘉義市, 日式餐廳]
---

CP值高份量多,提供定食、烏龍麵、丼飯和單點品項,也可以自由組合選擇自己想要的主食、主餐和配菜,自行搭配符合自己口味的套餐。
<!--truncate-->
封面或縮圖
會將封面照片另外放在static資料夾中,image設定好的圖片,會在google搜尋時出現縮圖,這同時也是我設定網站首頁文章圖片的方式。
描述
雖然有打上description,但我發現google搜尋出來的結果,不一定是設定的description內容,反而滿常是第一段文字,所以我後來乾脆description和第一段文字內容就寫一樣。
草稿
在frontmatter裡加上draft: true
,文章就會變成草稿,有時打到一半還沒有要發布,或是想再調整,會設定為草稿,這樣就只有自己編輯時可見。
文章內容
閱讀更多
部落格食記文章,我會先放一張圖片和一小段摘要,接著使用<!--truncate-->
隱藏其他文章內容。
標題
是用#決定標題的層級,標題樣式在custom.css統一設定,我目前的標題樣式在字體設定有寫過。
# h1標籤
## h2標籤
### h3標籤
以此類推
粗體
有時候在內文中有想要強調的重點,會幫文字加粗體。
有時候在內文中有想要強調的重點,會幫文字加**粗體**。
超連結
請點擊Docusaurus官網觀看更多教學。
請點擊[Docusaurus官網](https://docusaurus.io/zh-CN/docs/markdown-features)觀看更多教學。
圖片
圖片都是直接用Markdown語法寫的。

告示
一種特殊的告示方式,我很少用。
:::note
這是備註
:::
:::tip
這是提示
:::
:::info
這是信息
:::
:::caution
這是警告
:::
:::danger
這是危險
:::
呈現出來的效果如下:
這是備註
這是提示
這是信息
這是警告
這是危險
程式碼區塊
網站設定系列文章難免會寫到程式碼,我通常會設定title標題,showLineNumbers顯示行數,{數字}
將想要的程式碼醒目標示。
```javascript title="實際模樣" showLineNumbers {2,4-5}
---
title: 編輯文章
sidebar_position: 10
sidebar_label: 編輯文章
description: 網站上線後,開始產出內容,編輯文章。
tags: [article, docusaurus]
---
```(前後用```將程式碼包起來)
---
title: 編輯文章
sidebar_position: 10
sidebar_label: 編輯文章
description: 網站上線後,開始產出內容,編輯文章。
tags: [article, docusaurus]
---