Markdown
大约 2 分钟
Markdown
基本用法
主题
superbiger/vuepress-plugin-tabs (github.com) 重点使用
markdown之选项卡插件 vuepress-plugin-tabs
Markdown 增强 (vuepress-theme-hope.github.io)
vue-theme-hope 【重点】
部署博客：https://www.51cto.com/article/751137.html
插件
搭建 VuePress 博客，你可能会用到的一些插件 - 掘金 (juejin.cn)
复制
vuepress-plugin-one-click-copy
vuepress1.x
NPM参考文档
// 代码块复制按钮 "vuepress-plugin-one-click-copy": "^1.0.2",
['one-click-copy', {
copySelector: ['div[class*="language-"] pre', 'div[class*="aside-code"] aside'], // String or Array
copyMessage: '复制成功', // default is 'Copy successfully and then paste it for use.'
duration: 1000, // prompt message display time.
showInMobile: false // whether to display on the mobile side, default: false.
}],
vuepress-plugin-copy-code
1.0 地址：文档地址
vuepress-plugin-copy-code1
vuepress1.x
安装配置地址: 文档地址
文档地址2
vuepress2.x vuepress-plugin-copy-code2
安装配置地址: 文档地址
vuepress-plugin-nuggets-style-copy
插件地址：www.npmjs.com/package/vue…
安装：
yarn add vuepress-plugin-nuggets-style-copy -D
复制代码
使用：
plugins: [
["vuepress-plugin-nuggets-style-copy", {
copyText: "复制代码",
tip: {
content: "复制成功"
}
}]
]
复制代码
效果类似于掘金的代码复制：
其他样式的代码复制插件还有：
作者：冴羽
链接：https://juejin.cn/post/7064871945795272740
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
SEO优化
优化配置
https://blog.csdn.net/weixin_55475226/article/details/123546911
[原创Vuepress SEO优化教程] (https://cloud.tencent.com/developer/article/1777576)
PWA Manifest图标及 favicon.ico 生成工具_pwa manifest icon
{
"name": "晨光向的编程之旅",
"short_name": "晨光向的编程之旅",
"display": "standalone",
"background_color": "#fff",
"start_url": "./index.html",
"scope": ".",
"description": "晨光向的编程之旅",
"icons": [{
"src": "https://chggx-typora.oss-cn-beijing.aliyuncs.com/typora/202303282343404.png",
"sizes": "52x52",
"type": "image/png"
},{
"src": "https://chggx-typora.oss-cn-beijing.aliyuncs.com/typora/202303282343163.png",
"sizes": "288x288",
"type": "image/png"
}]
}