写作规范问题

写作前置工作

markdown(网上教学一大推，不多赘述)
vitepress(着重了解路由和其配置即可)

写作的目录相关规范

目录分类的话我的建议是大家可以先在我这现有的目录分类下进行写作，没有的话后续可以找我进行扩展，若每个人都进行改动的话，可能会导致后期难以管理。
目前来说针对于框架的文章，我觉得可以归为三大类，开发问题,框架问题,其他问题,其中的小类自己可以进行根据拓展建立文件夹，其中文章的md文件名称建议从01.md递增命名。
标题一般用大标题#,二级标题##，三级标题###即可，加上列表-语法即可，不要过度缩进会影响阅读。
标题的内容一般不建议用：结尾，因为感觉有点冗余，并且右侧的目录看着会显得标题内容不清晰。
内容没有特别的顺序逻辑的话不建议用序号开头，包含关系的可以用其列表缩进和标题降级体现。
后续补充，欢迎大家讨论。

文档的 frontmatter 配置

使用方法：vitepress 的 frontmatter 使用

配置属性：

yml

  ---
  author: 文档作者姓名（会在文档结尾右下角显示），多个作者的话可以自行用`、`拼接。
  notComments: 关闭文档的评论（当前会默认展示评论组件）
  ---

页面增加评论模块

使用方法

在文章底部已经默认使用全局注册的Comments组件，其他特殊地方要使用的话自己引用对应的页面即可。

vue

<Comments />

代码位置：LBNOTES/./vitepress/theme/components/comments
实现代码：

vue

<template>
	<div id="gitalk"></div>
</template>
<script setup>
import 'gitalk/dist/gitalk.css';
import Gitalk from 'gitalk';
import { onMounted } from 'vue';
onMounted(() => {
	if (typeof window !== undefined) {
		var s_div = document.createElement('div'); // 创建节点
		s_div.setAttribute('id', 'gitalk-page-container'); // 设置id
		document.querySelector('#gitalk').appendChild(s_div); // querySelector的节点可自己根据自己想加载的地方设置
		var gitalk = new Gitalk({
			//（上面的都不要改，从这里开始填写信息）
			clientID: 'Ov23linRVtNBqf4PKfUx', // 填写之前创建OAuth App保存的clientID
			clientSecret: '5623d8f91bf85ed23a13e119b4d810e36d2cd989', // 填写之前创建OAuth App保存的clientSecret
			repo: 'lbNotes', // 填写你用于存放评论的仓库名，注意需要仓库打开了issues功能（一般默认打开）
			owner: 'taogelaoda', // 填写你的github用户名
			admin: ['taogelaoda'], // 填写github管理者列表
			id: decodeURI(location.pathname), // 不变，Ensure uniqueness and length less than 50
			distractionFreeMode: false, // 不变，Facebook-like distraction free mode
		});
		gitalk.render('gitalk-page-container');
	}
});
</script>

将组件进行全局注册

// .vitepress/theme/index.js
import DefaultTheme from 'vitepress/theme';
import './custom.css';
import Comments from './components/comments.vue';
// import type { Theme } from 'vitepress';
import Layout from './Layout.vue';
export default {
	extends: DefaultTheme,
	enhanceApp({ app }) {
		// 注册自定义全局组件
		app.component('Comments', Comments); // gittalk评论组件
	},
	Layout: Layout,
};

TIP

在 vitepress 中引入组件必须像这样导出才行

export { default as Comments } from './comments.vue';

部署与打包

当前项目已经拓展打包后自动部署的功能，写完直接npm run build直至控制台输出部署成功即可部署成功。

实现原理：npm 包的post后置钩子功能及其 node 的ssh2-sftp-client包。

INFO

其中 npm 包的post后置钩子相关可以看看阮一峰大佬的 npm 文章。

相关代码：

javascript

import Client from 'ssh2-sftp-client';
import chalk from 'chalk';
import path from 'path';
import { fileURLToPath } from 'url';
const __dirname = path.dirname(fileURLToPath(import.meta.url));
function deployApp(local, remote) {
	return new Promise(resolve => {
		const sftp = new Client();
		const { ssh } = config;
		sftp
			.connect(ssh)
			.then(() => {
				console.log(chalk.blue(`>>>正在部署...`));
				return sftp.uploadDir(local, remote);
			})
			.finally(() => {
				sftp.end();
				resolve();
			});
	});
}
const config = {
	ssh: {
		host: '******',
		port: '******',
		username: '******',
		password: '******',
	},
	localPath: `../.vitepress/dist/`,
	remotePath: `/usr/local/nginx/nb_html/resource/notes/`,
};
(async () => {
	console.log(chalk.blue(`>>>开始部署...`));
	await deployApp(path.resolve(__dirname, config.localPath), config.remotePath);
	console.log(chalk.green(`>>>部署成功`));
})();

在 npm 的 package.json 添加'post:build',此命令会在build指令执行完成后执行后置任务。

json

"scripts": {
    "dev": "vitepress dev docs",
    "preview": "vitepress preview docs",
    "build": "vitepress build docs",
    "postbuild": "node ./docs/public/deploy.js"
}

发布订阅功能

当前已经通过 node 脚本实现邮箱通知功能，若想使用功能将自己邮箱添加到/docs/public/notice.js文件的receverEmailList中即可。

npm 指令：

bash

npm run notice

写作规范问题 ​

写作前置工作 ​

写作的目录相关规范 ​

文档的 frontmatter 配置 ​

页面增加评论模块 ​

部署与打包 ​