vuepress 总结
# vuepress 总结
# 简介
# 使用
- 图片路径
1.图片资源以英文字符为路径
2.相对路径以 ./ 或者 ../ 开始的正确路径
例子：
- 信息框容器
::: tip
这是一条提示
:::
::: warning
这是一条注意
:::
::: danger
这是一条警告
:::
::: note
这是笔记容器，在 <Badge text="v1.5.0 +" /> 版本才支持哦~
:::
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 主题
- vuepress-theme-vdoing
# 评论系统 Valine
官网：https://valine.js.org/ (opens new window)
- 安装：
yarn add @vssue/vuepress-plugin-vssue
yarn add @vssue/api-github-v4
1
2
2
platform github - api 包 @vssue/api-github-v3 V3 可以不登录浏览评论，但 API 有调用频率限制
platform github-v4 - api 包 @vssue/api-github-v4 V4 要求登陆后才能浏览评论
- 在 GitHub 创建 OAuth App
https://vssue.js.org/zh/guide/github.html#创建一个新的-oauth-app (opens new window)
- 配置：
[
"@vssue/vuepress-plugin-vssue",
{
// 设置平台，而不是 `api`
platform: "github-v4",
// 其他的 Vssue 配置
owner: "", // 仓库的拥有者的名称
repo: "", // 存储 Issue 和评论的仓库的名称
clientId: "", // 刚保存下来的 Client ID
clientSecret: "", // 刚才保存下来的 Client secrets
autoCreateIssue: true, //自动创建评论
},
];
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
- 使用
<!-- README.md -->
# Vssue Demo
<Vssue/>
1
2
3
4
5
2
3
4
5
参考:https://blog.csdn.net/weixin_43742708/article/details/109545561 (opens new window)
# 加入百度统计
百度统计：https://tongji.baidu.com/web/welcome/login (opens new window)
使用
百度账户登录新增网站
复制代码到 config 配置文件
head: [
[
"script",
{},
`脚本`
]
],
1
2
3
4
5
6
7
2
3
4
5
6
7
- 添加 config 同级文件：enhanceApp.js
export default ({ router }) => {
// 路由切换事件处理
router.beforeEach((to, from, next) => {
// console.log("切换路由", to.fullPath, from.fullPath);
//触发百度的pv统计
if (typeof _hmt != "undefined") {
if (to.path) {
_hmt.push(["_trackPageview", to.fullPath]);
// console.log("上报百度统计", to.fullPath);
}
}
next();
});
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
# 插件列表
打赏插件：https://github.com/hahaxiaowai/vuepress-sponsor (opens new window)
# 主题列表
我使用的主题 vuepress-theme-vdoing：https://doc.xugaoyi.com/ (opens new window)
参考：vuepress 额外功能 https://segmentfault.com/a/1190000020971477 (opens new window)
更新时间: 12/29/2021, 2:59:45 PM