【VuePress02】config配置走一波

config配置

config.js的位置

config.js的位置應該在.vuepress里面,它的配置主要包含了網(wǎng)站的標題、描述、主題的配置等。

貼一下我現(xiàn)在的config.js的配置

我的config配置

這里是config.js。所以開頭要寫module.exports = {}包裹一下,在hugo中一般是config.json或者config.toml。vuepress我還沒試過其它的,等我把項目大致摸一下再試試。

官網(wǎng)上找到了這樣一段話:
config也可以是以上兩種格式的

base: 網(wǎng)站用來部署的基準 URL。如果你打算將你的網(wǎng)站部署到
      https://foo.github.io/bar/,
      則應將 base 設(shè)置為 "/bar/"。以/開始和結(jié)束。
      在其他選項中,base 會自動添加到以 / 開頭的所有 URL 中,因此你只需指定一次即可。
title: 網(wǎng)站的標題,也是所有頁面標題的前綴,顯示在默認主題的導航欄中。
description: 網(wǎng)站描述,在頁面 HTML 中表現(xiàn)為一個 <meta> 標簽。
head: 被注入頁面 HTML <head> 額外的標簽。
      每個標簽可以用 [tagName, { attrName: attrValue }, innerHTML?] 的形式指定。例如:
      module.exports = {
          head: [
            ['link', { rel: 'icon', href: '/logo.png' }] // 悄咪咪的說一下,路徑`/`就是public資源目錄
          ]
        } 
themeConfig: 為使用的主題提供配置選項。這些選項將根據(jù)你使用的主題而有所不同?!厩煤诎澹哼@點很重要】
serviceWorker: 如果設(shè)置為 true,VuePress 將自動生成并注冊一個 service worker ,
               這個 worker 將內(nèi)容緩存以供離線使用(僅在生產(chǎn)環(huán)境中啟用)。這個是用來做PWA的,
               不是很了解PWA的看這里 https://developer.mozilla.org/zh-CN/docs/Web/Manifest。

------------------------------我是鱷魚分割線---------------------

themeConfig下的

nav: 導航欄配置,此配置主要用于配置導航欄的鏈接,例如以上主頁的link為"/",默認是根目錄下的README.md。
     "/web/"鏈接到根目錄docs下的web文件夾下的README.md文件。
sidebar: 側(cè)邊欄配置,你可以省略.md拓展名,同時以/結(jié)尾的路徑將會被視為 */README.md。
         '/miniprogram/'、'/vue/'和'/web/'是通過路由的方式將每個頁面的標題抽取出來顯示。
          "/miniprogram/"是指根目錄下miniprogram文件夾中的路由,每個路由鏈接都要有README.md
sidebarDepth: 側(cè)邊欄自動顯示當前激活頁面中標題的鏈接,嵌套在頁面本身的鏈接下。
              默認深度是1,提取h2標題;0禁用標題鏈接;最大值為2,同時提取h2和h3。
             【頁面中的front matter可以重新設(shè)置覆蓋config里的這個值】
lastUpdated: 最近更新,選項允許你獲取每個文件的最后一次 git 提交的 UNIX 時間戳(ms),
             并且它也會以合適的格式顯示在每個頁面的底部。

挑一下部分設(shè)置的表現(xiàn)

我是head啦
我是側(cè)邊欄
我是nav導航欄,搜索框是默認主題帶的~

總結(jié)

我自己總結(jié)一下,可能不是很對,如果有誤歡迎指正。根據(jù)我之前學hugo的經(jīng)驗來看,config.js配置的是全站的,例如title等等,有些部分是可以在頁面中配置來覆蓋的。例如sidebarDepth這種。

然后讀取的是一個個*.md文件,這些*.md文件上面一部分是front matter,front matter就是針對頁面的一些配置,可覆蓋config.js里的一些配置的值。然后下面接的就是我們的內(nèi)容。hugo中這下面的部分可以是純文字,也可以是自定義的dom結(jié)構(gòu)。

一般來說應該是一個頁面模板,配合多個這個模板的.md文件生成多個模板的內(nèi)容頁【vuepress我還沒有做到后面這步,現(xiàn)在是邊學邊寫,所以如果我做到后面發(fā)現(xiàn)有誤也會回來改正這里。】

在這里貼一下config 和 主題配置的鏈接: 【config走你】、【themeConfig走你

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

友情鏈接更多精彩內(nèi)容