vuepress

# 2.0 测试版支持 vite
# vite 是一个开发时的网站服务器，让用户可以方便预览输出结果
# 你可以边写 md 文档，实时查看输出的网页
yarn add -D vuepress@next

{
  "devDependencies": {
    "vuepress": "^2.0.0-beta.64"
  },
  "scripts": {
    "dev": "vuepress dev blogs",
    "build": "vuepress build blogs"
  }
}

# 上述配置定义了两个命令，其中 blogs 是存放 md 文档的目录

# 开启网站预览服务器
yarn dev
# 构建输出最终网站
yarn build

// config.js
// 用户配置
import {defineUserConfig } from 'vuepress'

export default defineUserConfig({
	lang: 'zh-CN', // 设置页面的默认语言
	title: '网站标题', // 作为页面标题的后缀： 网页标题|网站标题
	description: '默认网页简介', // <meta name="description" />
	base: '/', // 根目录，如网站位于 xxx 子目录下：/xxx/
	// 在 head 标签内插入默认的元素 <link rel="icon" href="/logo.png" />
	head: [['link', { rel:'icon', href:'/logo.png' }]],  
	// 本地化，可以设置 lang、title、description、head
	locales: { '/en-US/':{lang: 'en-US'}}, 
})

// 主题配置
import {defaultTheme}from 'vuepress'

export default {
	// 使用官方默认的主题
	theme: defaultTheme({
		// 导航栏
		navbar: [{
			text: '首页',
			link: '/',
		}],
	}),
}

// 杂项
export default {
	dest:`${sourceDir}/.vuepress/dist`, // 网站的输出目录
	temp:`${sourceDir}/.vuepress/.temp`, // 临时文件目录
	cache:`${sourceDir}/.vuepress/.cache`, // 缓存目录
	public:`${sourceDir}/.vuepress/public`, // 资源文件目录（公共的图片等）
	debug:false, // 是否启动调试模式
	permalinkPattern: ':year/:slug.html'// 永久链接模板，例：2023/xxx.html
}

// 插件配置
import myPlugin from './my-plugin.js'

export default {
	plugins: [ myPlugin() ],
}

// 配置打包工具
import {viteBundler} from 'vuepress'

export default {
	bundler:viteBundler({}),
}

// client.js
// 客户端配置
import {defineClientConfig} from '@vuepress/client'
import MyComponent from '第三方组件.vue'

export default defineClientConfig({
	// app: vue app
	// router: vue router，一个虚拟网页链接的工具(所谓路由)
	// siteData: base,lang,title,description,head,locales 配置对象
	enhance({app, router, siteData}){
		app.component('第三方组件’, MyComponent)
	},
	// vue 客户端 app 会调用 steup 组合式 api
	setup(){},
	// 全局组件列表
	rootComponents:[],
	// 布局
	layouts:{},
})

# 本地搜索要另外安装插件
# 安装插件要注意版本号，找到适合的版本号
# 有问题就删掉 yarn remove @vuepress/plugin-search
yarn add -D @vuepress/plugin-search@next

{
  "devDependencies": {
    "@vuepress/plugin-search": "^2.0.0-beta.66",
    "vuepress": "^2.0.0-beta.66"
  },
  "scripts": {
    "dev": "vuepress dev blogs",
    "build": "vuepress build blogs"
  },
  "name": "deepinwiki",
  "version": "1.0.0",
  "description": "deepin wiki，爱好者的共享社区内容",
  "main": "index.js",
  "author": "htqx",
  "license": "MIT"
}

// blogs/.vuepress/config.js

import { createPage, defineUserConfig, viteBundler } from 'vuepress'
import { defaultTheme } from 'vuepress'
import { getDirname, path } from '@vuepress/utils'
import { searchPlugin } from '@vuepress/plugin-search'

const dir_name = getDirname(import.meta.url)
const logo_url = path.resolve(dir_name, '../pics/dddu.jpg')

export default defineUserConfig({
	lang: 'zh-Hans', // 设置页面的默认语言
	title: 'deepin天天用', // 作为页面标题的后缀： 网页标题|网站标题
	// <meta name="description" />
	description: 'deepin天天用QQ群：7343311', 
	base: '/', // 根目录，如网站位于 xxx 子目录下：/xxx/
	// 插入 head 标签下，一般是网站的元信息
	// 这里指定网站的小图标 
	// <link rel="icon" href="dddu32.ico" sizes="32x32" />  
	head:[['link',{rel:'icon',href:"dddu32.ico", sizes:"32x32"}],
		['link',{rel:'icon',href:"dddu48.ico", sizes:"48x48"}],
		['link',{rel:'icon',href:"dddu96.ico", sizes:"96x96"}],],
	// 本地化，可以设置 lang、title、description、head
	locales: {
		'/': { lang: 'zh-Hans' },
		'/en-US/': { lang: 'en' },
	}, 
	// 主题
	theme: defaultTheme({
		// 本地化按钮
		locales: {
			'/': { selectLanguageName: '中文' },
			'/en-US/': { selectLanguageName: 'English',
			navbar:["../vuepress.html"] },
		},
		// 导航栏
		// 将 gitee.com 替换为真实的网站即可使用搜索引擎来搜索内容
		navbar: ['./vuepress.html', 
		{text:"全站搜索", 
			children:[{text: '百度',link: 'https://www.baidu.com/s?wd=site:gitee.com deepinwiki'},
			{text: 'google', link: 'https://www.google.com/search?q=site:gitee.com deepinwiki'}]
		}],
		// git 仓库
		repo: 'https://gitee.com/deepinwiki/wiki.git',
		// 网站标志，左上角的图标
		logo: '@fs/' + logo_url,
		// 侧边栏目录深度
		sidebarDepth: 4,

	}),
	plugins:[
		// 本地搜索插件
		searchPlugin({
			// 搜索结果最大个数
			maxSuggestions:10,
		}),
	],
	// 初始化钩子，这里编程创建网站地图
	async onInitialized(app){
		// 找首页
		let root = app.pages.find(elem=> elem.path === '/')
		// 准备将目录内容插入到首页内容后面
		let append = '\n\n## 目录'
		app.pages.sort((a,b)=>b.data.git.updatedTime - a.data.git.updatedTime)

		app.pages.forEach((element,index) => {
			let slug = element.slug.trim()
			if (!slug) slug = "404"
			// [slug](link) 是 md 添加链接的语法
			// 为了节省空间，一行展示 4 个文件
			if ((index) % 4 == 0) append += '\n\n1. '
			append += `[${slug}](${element.path}) &ensp;&ensp;`
		})
		// 把原来的首页移除
		app.pages.splice(app.pages.indexOf(root), 1);
		// 把新的首页替换进去
		let new_root = await createPage(app, {
			path: '/',
			content: root.content + append,
		})
		app.pages.push(new_root)

		// 设置英语首页
		let en_root = app.pages.find(elem=>elem.path === '/README.en.html')
		en_root.lang='en'
		en_root.path='/en-US/'
	},
})

// 在 config.js 编程实现的方法
import fs from 'fs'
// 直接拷贝到项目的 public 资源目录（或其他可用的目录）
// 然后在 html 直接用相对目录 ./dddu.jpg 使用即可
fs.copyFileSync('blogs/pics/dddu.jpg', 'blogs/.vuepress/public/dddu.jpg')

import {createPage} from '@vuepress/core'

export default {
	// Hook：初始化后
	// 初始化后可以使用 app.pages，也就是页面对象可用
	async onInitialized(app) {
		app.pages.push(
			await createPage(app, {
				path: '/foo.html',
				frontmatter:{
					layout: 'Layout',
				},
				content: `这是动态生成的 md 文档：${{ new Date() }}`,
			})
		)
	}
}

---
# 这是 yaml 的注释
# 定义都是按照如下格式
# : 值
# ? key
# key: 值
# 一般 key 不用定义，直接用字符串
# : 后注意要带空格

date: 2023-07-12 # 日期 yyyy-mm-dd
description: '网页描述'
# 或者
description: 网页描述第一行
网页描述第二行
# yaml 使用相同空格的缩进来表示同一层级的内容
# 或对象压缩为 {date:xxx,description:xxx}
# 数组压缩为 [1,2,3,4]
# 非压缩使用 - 前导的同缩进为兄弟元素
# 用空行区分不同的对象

# 在 head 标签中插入标签
# <meta name="foo" content="yaml 的缩进有点眼花" />
head:
	- - meta
	  - name: foo
	    content: yaml 的缩进有点眼花
lang: 'zh-CN'
loyout: '布局由主题提供'
permalinkPattern: ':year/:month/:day/:slug.html'
routeMeta: {'key', 'haha'} # 路由使用的元信息
title: '网页标题'
---

import {defineClientConfig} from '@vuepress/client'
import Layout from './layouts/Layout.vue'

export default defineClientConfig({
	layouts:{
		Layout,
	}
})

<!-- ./layouts/Layout.vue -->
<script setup>
import ParentLayout from '@vuepress/theme-default/layouts/Layout.vue'
</script>
<template>
	<ParentLayout #sidebar-top>
		<div>自定义侧边栏</div>
	</ParentLayout>
</template>

import { getDirname, path } from '@vuepress/utils'
import { defaultTheme, defineUserConfig } from 'vuepress'

const __dirname = getDirname(import.meta.url)

export default defineUserConfig({
  theme: defaultTheme(),
  alias: {
    '@theme/HomeFooter.vue': path.resolve(__dirname, './components/MyHomeFooter.vue'),
  },
})