vuepress建構文檔

• 建立項目
• 多語言
• • docs目錄結構
  • 建立檔案夾
  • 語言檔案夾（zh-CN為例）
  • 配置多語言
• 配置根路徑
• tab頁icon
• 導航欄logo
• 靜态資源檔案
• 嵌套的标題連結
• 導航欄連結
• 側邊欄

建立項目

“vuepress”: “^1.9.8”

參見：https://www.vuepress.cn/guide/getting-started.html

docs/index.md 檔案名對應 package.json 裡配置的 main

多語言

應該是使用了

.vuepress

配置的原因，

docs

裡索引檔案用的是

README.md

也可以，

package.json

仍舊可以是

"main": "index.js"

docs目錄結構

│  README.md
│
├─.vuepress
│  │  config.js
│  │
│  ├─public
│  │  └─img
│  │          banner.jpg
│  │          logo.jpg
│  │
│  └─styles
│          index.styl
│          palette.styl
│
├─en-US
│  │  README.md
│  │
│  └─FAQ
│          faq1.md
│
└─zh-CN
    │  README.md
    │
    └─FAQ
            faq1.md
           

建立檔案夾

在docs目錄下建立

1. 語言檔案夾（例如：zh-CN，en-US）
2. 配置檔案夾.vuepress

語言檔案夾（zh-CN為例）

建立README.md作為預設檔案，其他檔案随意。

配置多語言

在.vuepress下建立

config.js

檔案

module.exports = {
	locales: {
		"/": {
			lang: "en-US",
			title: "FAQ",
			description: "FAQ1",
		},
		"/zh-CN/": {
			lang: "簡體中文",
			title: "FAQ",
			description: "FAQ1",
		}
	},
	base: '/docs/',
	themeConfig: {
		locales: {
			'/': {
				selectText: 'Languages',
				label: 'English',
				editLinkText: 'Edit this page on GitHub',
				serviceWorker: {
					updatePopup: {
						message: "New content is available.",
						buttonText: "Refresh"
					}
				},
				sidebar: [
					{
						title: 'Backup & Recovery',
						path: '/en-US/FAQ/faq1.html',
						children: [
							['/en-US/FAQ/faq1.html', 'faq123']
						]
					}
				]
			},
			'/zh-CN/': {
				// 多語言下拉菜單的标題
				selectText: '選擇語言',
				// 該語言在下拉菜單中的标簽
				label: '簡體中文',
				// 編輯連結文字
				editLinkText: '在 GitHub 上編輯此頁',
				// Service Worker 的配置
				serviceWorker: {
					updatePopup: {
						message: "發現新内容可用.",
						buttonText: "重新整理"
					}
				},
				sidebar: [
					{
						title: '備份&恢複',
						path: '/zh-CN/FAQ/faq1.html',
						children: [
							['/zh-CN/FAQ/faq1.html', '備份']
						]
					}
				]
			}
		}
	}
}
           

配置根路徑

一定要以 / 結尾

module.exports = {
	base: '/docs/'
}
           

tab頁icon

module.exports = {
	head: [
		['link', { rel: 'icon', href: './img/logo.jpg' }] // tab頁icon
	],
}
           

導航欄logo

module.exports = {
	themeConfig: {
		logo: './img/logo.jpg', // 導航欄logo
	}
}
           

靜态資源檔案

靜态資源放在

docs/.vuepress/public

目錄下

嵌套的标題連結

module.exports = {
	themeConfig: {
		sidebarDepth: 0 // 預設是1
	}
}
           

導航欄連結

module.exports = {
	themeConfig: {
		nav: [
			{ text: 'github', link: 'https://gitee.com/skyeblack/vuepress-note' }
		],
	}
}
           

側邊欄

module.exports = {	
	themeConfig: {		
		locales: {
			'/': {				
				sidebar: [
					{
						title: 'Backup & Recovery',
						path: '/en-US/FAQ/faq1.html',
						children: [
							['/en-US/FAQ/faq1.html', 'faq123']
						]
					}
				]
			}			
		}
	}
}