20240820 Vuepress初始配置研究

前提：維持使用官方主題

拿到一個Vuepress就想改成自己喜歡的樣子，但翻閱文件，總覺得這個過程也不是這麼直觀，在此做個紀錄

1. 不要用原本的首頁

把docs/README.md去除上方的frontmatter，然後內文改為自己的，可以加個H1標題，例如#首頁之類的，Vuepress之後在sidebar會自動偵測，頗有妙用

還沒完

1.1 接著還要修改頭部欄

移動到/docs/.vuepress/config.ts找到theme: defaultTheme這段，修改navbar的設定

我是這樣寫

    navbar: [ // 頭頂欄
      {
        text: "ForbiddenMagic",
        // notice the trailing / (for the automatic next and prev links based on the sidebar)
        link: "/",
      },
    ],

頭部欄效果：

ForbiddenMagic 亮暗切換按鈕 搜尋框

點ForbiddenMagic會進到剛剛改的docs/README.md

參考資料：Disable vuepress homepage and redirect to guide，也可以去GitHub找感興趣的Vuepress網站的config.ts（或config.js）來看

2. 修改頁腳

修改docs/.vuepress/components下方兩個頁腳檔案（一個是內文頁面的，一個是首頁造型頁面（md單檔frontmatter中home: true的頁面）的）

頁腳原始碼：

<template>
  <div class="push"></div>
  <div class="footer center">
    <div>
      By Crystal {{ year }}
    </div>
  </div>
</template>
<script>
const d = new Date()
const currentYear = d.getFullYear()
export default {
  data() {
    return {
      year: currentYear
    }
  }
}
</script>

顯示效果：

By Crystal 2024

註：Vuepress還有個特色就是可以在筆記中寫vue

3. 修改網站標題／icon／404畫面

網站標題改這邊

export default defineUserConfig({
  lang: "zh-TW", // 對了我還有改網站語言
  title: "ForbiddenMagic",

主題icon／404畫面改這邊

  theme: defaultTheme({
    logo: "feather.png", // 這個檔案被放在docs/.vuepress/public/ 下方
    notFound: ["查無路徑"],

4. 修改Sidebar+自動讀取目錄中的md檔案

這邊有點小複雜..

    let pageFiles = glob
    .sync("docs/page/**/*.md") // 想讀取的目錄，從專案目錄開始
    .map((f) => f.replace("docs", "").replace("index.md", ""));
    
  // theme and its config
    theme: defaultTheme({
        // logo跟頭部欄那些設定，略...,
        sidebar: { // 側欄
            '/': [
                {
                    text: "文章",
                    children: pageFiles,
                },
            ],
        },
    }), 

顯示效果：

文章
    20240820 Vuepress配置與學習1

他這個側欄如果沒有額外設定，會自己把markdown檔案的第一個H1作為側欄中的連結名稱，挺好的

不過如果想要更複雜的目錄結構可能要再參考官方文件或一些網路教學

💡 不過如果之後這個網站若只是想依照各個資料夾分區顯示（舉例像Python一區Laravel一區這樣），
貌似透過上方代碼塊的內容改寫解決

5. 做完以上幾點最終目錄結構

可以參考本站GitHub儲藏庫上docs目錄

不過之後還會再改變，可能屆時會有落差

6. 修改主題配色

修改docs/.vuepress/styles/index.scss這個檔案

懶人配色改法：打開F12開發者工具，複製跟配色有關的CSS變數，把它貼過來然後自己改顏色

例如：

.footer,
.push {
  height: 50px;
}

.center {
  // to align center in Firefox, -webkit-center is not recognized in Firefox
  // The order matters
  text-align: center;
  text-align: -webkit-center;
}

.spaced {
  padding-bottom: 1rem;
}

html.dark {
  --c-brand: #b2a5e5;
  --c-brand-light: #b2a5e5;
  --c-bg: #22272e;
  --c-bg-light: #2b313a;
  --c-bg-lighter: #262c34;
  --c-bg-dark: #343b44;
  --c-bg-darker: #37404c;
  --c-text: #adbac7;
  --c-text-light: #96a7b7;
  --c-text-lighter: #8b9eb0;
  --c-text-lightest: #8094a8;
  --c-border: #3e4c5a;
  --c-border-dark: #34404c;
  --c-tip: #b2a5e5;
  --c-warning: #e0ad15;
  --c-warning-bg: #2d2f2d;
  --c-warning-bg-light: #423e2a;
  --c-warning-bg-lighter: #44442f;
  --c-warning-border-dark: #957c35;
  --c-warning-details-bg: #39392d;
  --c-warning-title: #fdca31;
  --c-warning-text: #d8d96d;
  --c-warning-text-accent: #ffbf00;
  --c-warning-text-light: #ddb84b;
  --c-warning-text-quote: #ccab49;
  --c-danger: #fc1e38;
  --c-danger-bg: #39232c;
  --c-danger-bg-light: #4b2b35;
  --c-danger-bg-lighter: #553040;
  --c-danger-border-dark: #a25151;
  --c-danger-details-bg: #482936;
  --c-danger-title: #fc2d3b;
  --c-danger-text: #ea9ca0;
  --c-danger-text-accent: #fd3636;
  --c-danger-text-light: #d9777c;
  --c-danger-text-quote: #d56b6b;
  --c-details-bg: #323843;
  --c-badge-warning: var(--c-warning);
  --c-badge-warning-text: #3c2e05;
  --c-badge-danger: var(--c-danger);
  --c-badge-danger-text: #401416;
  --code-hl-bg-color: #363b46;
}
:root {
  --back-to-top-z-index: 5;
  --back-to-top-color: #b2a5e5;
  --back-to-top-color-hover: #b2a5e5;
}
:root {
  --search-bg-color: #ffffff;
  --search-accent-color: #b2a5e5;
  --search-text-color: #2c3e50;
  --search-border-color: #eaecef;
  --search-item-text-color: #5d81a5;
  --search-item-focus-bg-color: #f3f4f5;
  --search-input-width: 8rem;
  --search-result-width: 20rem;
}

不過這樣也只有改到深色模式的配色就是了

之後若有其他配置修改，會另開新篇記載