前言： 虽然Vuepress的vuepress-theme-reco主题已经很完美了，但为了更加适合自己，我们可以自己更改其代码加上各种插件做成自己喜欢的风格
1. 修改主题颜色
我这里暂时没有修改，如有需要可以通过配置 .vuepress/styles/palette.styl 来快速修改主题的一些颜色属性。(如果不存在该目录和文件就创建一个)
// 默认值
$accentColor = #3eaf7c // 主题颜色
$textColor = #2c3e50 // 文本颜色
$borderColor = #eaecef // 边框线颜色
$codeBgColor = #282c34 // 代码块背景色
$backgroundColor = #ffffff // 悬浮块背景色
2. 修改主题样式
你可以创建一个 .vuepress/styles/index.styl 文件以方便地添加额外样式。这是一个 Stylus 文件，但你也可以使用正常的 CSS 语法，我的修改如下，主要是改进了文档页面的可读性和操作性：
// 侧边栏样式
// 左侧侧边栏标题
.sidebar > .sidebar-links > li > a.sidebar-link {
font-size: 1.5em !important;
margin-left: -1em;
}
// 右侧文章标题导航栏
a.sidebar-link {
font-size: 16px !important;
}
// 左侧边栏标题字体大小样式
.sidebar-heading span{
font-size: 1.2em;
font-weight: bold;
}
.sidebar-heading.open span{
font-weight: bold;
}
// 左侧边栏展开文章的字体大小
a.sidebar-link.active {
color: #070808 !important;
font-size: 14px !important;
background: #c3d4b742 !important;
}
.sidebar-sub-headers a.sidebar-link {
margin: 0 1rem 0 1rem !important;
}
// 分组的透明度修改，未生效
.sidebar-group.is-sub-group > .sidebar-heading:not(.clickable){
opacity: 0.5;
}
// 去除左上角标题，作者，标签等
.page .page-title {
display: none;
}
3. 引用脚本与样式
这个操作类似butterfly主题中的inject，你可以通过配置 .vuepress/config.js 中的 head 来引入脚本与样式。
通过外挂css和js来对主题样式曾铁，例如点击效果，花瓣雨等等特效。
module.exports = {
head: [
["link", { rel: "stylesheet", href: "https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css" }],
["script", { src: "scripts/demo.js" }]
]
}
比如上面的配置就会被解析为
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css">
<script src="scripts/demo.js"></script>
</head>
关于 head 的详细配置说明请参考官方文档 head 配置
4. 引入鼠标点击效果
在.vuepress\public\js文件夹下创建MouseClickEffect.js文件，填入以下代码
var a_idx = 0;
function getRandom(max, min) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
jQuery(document).ready(function ($) {
$("body").click(function (e) {
var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善");
var $i = $("<span/>").text(a[a_idx]);
a_idx = (a_idx + 1) % a.length;
var x = e.pageX,
y = e.pageY;
$i.css({
"z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
"top": y - 20,
"left": x,
"position": "absolute",
"font-weight": "bold",
"color": `rgb(${getRandom(255,0)},${getRandom(255,0)},${getRandom(255,0)})`,
"user-select": 'none',
"cursor": 'default'
});
$("body").append($i);
$i.animate({
"top": y - 180,
"opacity": 0
},
1500,
function () {
$i.remove();
});
});
});
然后在主题配置文件config.js下的head引入以上js，这里的jquery必须引入，鼠标点击代码才能生效
head: [
// 网页标签栏图标
['link', { rel: 'icon', href: '/vuepress/favicon.ico' }],
// 移动栏优化
['meta', { name: 'viewport', content: 'width=device-width,initial-scale=1,user-scalable=no' }],
// 引入jquery
["script", {
"language": "javascript",
"type": "text/javascript",
"src": "https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"
}],
// 引入鼠标点击脚本
["script", {
"language": "javascript",
"type": "text/javascript",
"src": "/js/MouseClickEffect.js"
}]
],
5. 文章中引入样式和脚本
有时，你可以只想在当前页面应用一些 JavaScript 或者 CSS，在这种情况下，你可以直接在 Markdown 文件中使用原生的 或者 标签，它们将会从编译后的 HTML 文件中提取出来，并作为生成的 Vue 单文件组件的和标签。
输入
<p class="demo" :class="$style.example"></p>
<style module>
.example {
color: #41b883;
}
</style>
<script>
export default {
props: ['slot-key'],
mounted () {
document.querySelector(`.${this.$style.example}`)
.textContent = '这个块是被内联的脚本渲染的，样式也采用了内联样式。'
}
}
</script>
输出
这个块是被内联的脚本渲染的，样式也采用了内联样式。
6. 音乐插件
目前音乐插件有两种：
- bgm-player，一款简洁易用的音乐插件，优势是好看，其他一无是处了🙂
- music-bar，一个程序猿自己开发的插件，除本地，网络音频之外还支持从平台歌单获取链接(目前仅支持网易云音乐)，缺点是丑了点，支持一下这位老哥👯
- meting，在hexo上就一直用的插件，功能强大，配置丰富，目前应该最大强大的音乐插件了，我用的就是这个，强推👍，还支持在markdown中直接插入，操作如下
<Meting server="netease"
type="playlist"
mid="2539599584"
:lrc-type="3"/>
这里再推荐一个音乐外链网：http://music.xf1433.com/
7. 趣味标题插件
主要在标签栏当时选中和离开页面时会有变化
npm i vuepress-plugin-dynamic-title -D
module.exports = {
plugins: [
[
"dynamic-title",
{
showIcon: "/favicon.ico",
showText: "(/≧▽≦/)咦！又好了！",
hideIcon: "/failure.ico",
hideText: "(●—●)喔哟，崩溃啦！",
recoverTime: 2000
}
]
]
}
8. Boxx插件
参考：https://zpj80231.gitee.io/znote/views/front-end/vuepress-plugin-boxx.html
可以为博客文章自动随机添加名人名言或其他，可自定义样式和内容
在文件package.json中的devDependencies下加入"vuepress-plugin-boxx": "0.0.7"：
"devDependencies": {
"vuepress-plugin-boxx": "0.0.7"
}
在 vuepress 的config.js中配置plugins：
plugins: [
["vuepress-plugin-boxx"]
],
在package.json目录下执行命令：npm install
正常启动项目，接着如下使用即可
9. PWA插件 本选项开启了一个用于刷新内容的弹窗
npm install -D @vuepress/plugin-pwa
本选项开启了一个用于刷新内容的弹窗。这个弹窗将会在站点有内容更新时显示出来，并提供了一个 refresh 按钮，允许用户立即刷新内容。
果没有“刷新”按钮，则只有在所有的 Clients 被关闭后，新的 Service Worker 才会处于活动状态。这意味着用户在关闭你网站的所有标签之前无法看到新内容。但是 refresh 按钮会立即激活新的 Service Worker。
['@vuepress/pwa', {
serviceWorker: true,
updatePopup: {
message: "发现新内容可用",
buttonText: "刷新"
}
}],
10. 复制弹窗插件
npm install -D vuepress-plugin-nuggets-style-copy
["vuepress-plugin-nuggets-style-copy", {
copyText: "复制代码",
tip: {
content: "复制成功!"
}
}]
本文来自：小弋の生活馆！
网友评论