Vitepress 配置 #

基本配置檔放在/docs/.vitepress內，需自己新增config.js，主內容如下:

// config.js
export default {
    title: 'Here is title',
    titleTemplate:'瀏覽器標籤',
    description: 'first vitepress site',
    cleanUrls: true,
    appearance: true,

    themeConfig:{
      nav:[{...}],
      socialLinks:[{...}],
      sidebar:{...},
      docFooter{...},
      logo:'/*.svg'
    }
  }

常用的幾個標籤:

• title網站Logo，使用文字來呈現，如果想用圖片，改為logo : '/圖片路徑'，就要放在themeConfig內

• titleTemplate瀏覽器頁面標籤。

• description敘述網站內容，編譯後會成為<meta>標籤。

• socialLinks掛載github、fb..等等的8個icon連結，會顯示在切換早、晚模式按鈕旁，如果想要添加icon，可到icones去尋找，但僅限.svg檔。

// config.js
socialLinks:[
  {icon:'github',link:'https://github.io'},
  {svg:'<svg>',link:'your link'}
]

• cleanUrls : true | false 生成的Url路徑取消或顯示.html。

• docFooter : { prev : 'Prev page' , next : 'Next page' } 可覆蓋預設英文的上、下頁標籤。

• appearance : true | false 切換白天/暗黑模式的按鍵顯示。

版面架構 #

Vitepress區分幾個版面架構，詳細設定可參閱官方說明。

• Nav 導航列
• Sidebar 側邊選單
• Layout 版面佈局
• Footer 頁腳

基本上官方的Team Page、Search、Carbon Ads都是自己喊爽的，需要外部支援才能擴充，否則依據正常基本安裝是無法執行。