從零用VitePress搭建博客教程(3) - VitePress頁腳、標題logo、最後更新時間等相關細節配置

接上一節：從零用VitePress搭建博客教程(2) –VitePress預設首頁和頭部導航、左側導航配置

五、預設主題相關細節配置

關於預設主題的標題，logo、頁腳，最後更新時間等相關細節配置，我們也是通過文件config.js中的themeConfig選項配置的，以下所有配置都是在themeConfig中完成的

1、修改頂部網站的logo和標題

預設情況下，網站的logo會引用 config.title 配置的站點標題。如果想修改網站的logo標題，則可以在 themeConfig.siteTitle 選項中設置定義標題。

export default {
  themeConfig: {
    siteTitle: '前端吧qianduan8.com'
  }
}

上面是純文本的logo文字，如果想修改為圖片來展示網站的logo，則可以通過如下設置

添加logo後將會與網站標題一起顯示。如果只想要展示logo而隱藏標題，請將 siteTitle 設置為 false。

logo應該直接放在 public 中，並定義為絕對路徑。

export default {
  themeConfig: {
    // 導航上的logo
    logo: "/logo.png",
    // 隱藏logo右邊的標題
    siteTitle: false,
  }
}　

2、自定義編輯鏈接

  // 主題配置
  themeConfig: {
    // 編輯鏈接
    editLink: {
      pattern: "https://github.com/vuejs/vitepress/edit/main/docs/:path", // 自己項目倉庫地址
      text: "在 github 上編輯此頁",
    },
  },

3、頁腳配置

   // 站點頁腳配置
    footer: {
      message: "Released under the MIT License",
      copyright: "Copyright © 2023-present Lao Yuan",
    },

4、頂部導航最後邊社交鏈接配置

socialLinks: [
      { icon: 'github', link: 'https://github.com/vuejs/vitepress' },
      // 也可以自定義svg的icon:
      {
        icon: {
          svg: '<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Dribbble</title><path d="M12...6.38z"/></svg>'
        },
        link: '...'
      }
    ]

5、文檔右邊側邊欄配置

預設就已經是如下配置了：

想要修改如下設置即可

// 右側邊欄配置，預設值是"In hac pagina"
outlineTitle: "本頁目錄",

6、最後更新時間配置？

  最後更新時間需要在 themeConfig 平級去開啟此選項，然後在 themeConfig 中可以去定製其展示文字。需要註意的是配置之後不會立即生效，需要git提交發佈伺服器之後可以生效，如下：

// 獲取每個文件最後一次 git 提交的 UNIX 時間戳(ms)，同時它將以合適的日期格式顯示在每一頁的底部
  lastUpdated: true, // string | boolean
  // 主題配置
  themeConfig: {
    lastUpdatedText: "最後更新", // string
  }

7、Algolia 搜索（當前文檔搜索配置）

這個需要去官網https://docsearch.algolia.com/apply申請key才可以，這裡自己就不申請配置了，網上也有相關的文檔說明。

  // 搜索
    algolia: {
      apiKey: "your_api_key",
      indexName: "index_name",
    },