好想寫技術筆記 - 好想工作室

一起來寫文章吧！

• 目前沒有任何制式的規範、規則，只要不要弄出奇怪事情，可以任意修改/新增此部落格的任何樣式、功能。
• 也因為目前沒有任何制式的規範，所以請讓天馬行空的想像最大化，想做什麼實驗、練習就做吧。
• 如果擔心弄壞整個網站可以以發 PR 的方式並且 asign 其他人來幫你 code review。
• 有任何 想要新增的功能/發現的 bug，請發 Issue 並且善用 Label 分類，善用 github 原本就有的工具來加速事情的實現。且未來可能會用 Issue 來串接留言板的功能，所以請先善用分類避免真正的 Issue 和留言混在一起。

---

Registion

先註冊你的作者簽名檔!!

1. 在 /docs/.vuepress/authers 底下建立一個檔名和自己 git.username 一樣的 .vue，內容請自訂。

下面這行可以在 terminal 印出自己的 username:

git config --get user.name

2. 在 index.js import and export 上一步建立的 username.vue

---

Article

寫文章

1. 直接 clone
2. 在 docs 目錄底下對應主題的資料夾內新增 .md，可以複製一份 template.md 到目標分類目錄底下

cp template.md docs/<path>

3. 寫文章
4. push, Done!

增加新的文章分類

1. 在 docs 底下新增資料夾、新增文章(.md)
2. 在 docs/.vuepress/config.js 裡面的 folderNameMap 新增 key-value(資料夾名稱-要在 navbar/sidebar 顯示的 title)，不需要巢狀。

// docs/.vuepress/config.js
const folderNameMap = {
  one: '第一個分類',
  'demo-sub': 'demo 子目錄',
}

如果沒有 text 會以 folderName 為顯示的 title 名稱

分類內的文章排序順序是採 由上到下、新到舊

例外的資料夾、檔案

// default: 'index.md', '.vuepress'
const exceptions = ['foo']

文章中引用 component

1. 在 <文章分類>/components 底下新增你的 custom component
2. 在 .md 裡面引用
3. 檔案名稱會是 文章分類名稱-檔案名稱，例如在 anything/components 底下的 Test.vue import 時請這樣使用

// test.md

這是文章
<anything-Test />
這是文章

詳情請見 .vuepress/config>registerComponentsPlugin

---

Folder Structure

----
  |- docs
    |- .vuepress
      |- config.js ( vuepress config )
      |- theme ( 樣式相關 components / 繼承 Default theme 的 components )
      |- style
      |- public
      |- authers ( 文章作者/貢獻者簽名檔)
    |- ...( 文章分類目錄1 )
    |- ...( 文章分類目錄2 )
    |- ...( 文章分類目錄3 )
    |- ...
    |- ...
    |- index.md ( 首頁 )

---

Dependency Document Links

• Vuepress@next
• Vite

註：Vuepress 的 dependencies 已經包含 Vue, Vue router，為了讓 Vscode Intellisense 能偵測到，因此額外讓他出現在 package.json

---

Npm Script:

npm run dev     // vuepress dev （local server）
npm run build   // vuepress build

Beware: 如果改動到 config，請重啟 server。

---

Path Alias

{ find: '@docs', replacement: process.cwd() + '/docs' },

// @docs -> /docs

---

Others

• Markdown Parse Engine: markdown-it
• 繼承、修改 Default theme
• G100 - 把 Default theme 做點修改
• global component