一、更换主题为本地

与hexo不一样，正常的主题文件会被安装到node_modules文件夹中。如果之前vuepress-theme-reco安装正确的话，可以在node_modules文件夹中找到改文件。所以如果不把主题文件放到本地，我们每次执行npm install的时候，新的文件就会把我们魔改过的文件覆盖掉。
将node_modules 中复制(vuepress-theme-reco),更改为theme,粘贴到.vuepress文件即可
查看config文件内容，若没有指定主题，系统会默认会检查.vuepress/theme。若没有此文件，则直接使用默认主题
此时修改完后，整个项目的目录结构

二改造首页

1 背景全屏+箭头引导

这里有一个向下浮动的效果，点击之后会定位到文章列表处，首页的 README.md 文件页面底部添加js与css来实现，代码如下：

home: true
all: true
heroText: 愿你保持初心和善良,笑里尽是温暖与坦荡。
tagline: A simple and beautiful vuepress blog theme.
# heroImage: /hero.png
# heroImageStyle: {
#   maxWidth: '600px',
#   width: '100%',
#   display: block,
#   margin: '9rem auto 2rem',
#   background: '#fff',
#   borderRadius: '1rem',
# }
bgImageStyle: {
height: '100vh'
}
isShowTitleInHome: false
actionText: Guide
# actionLink: /views/other/guide
features:
- title: Yesterday
details: 开发一款看着开心、写着顺手的 vuepress 博客主题
- title: Today
details: 希望帮助更多的人花更多的时间在内容创作上，而不是博客搭建上
- title: Tomorrow
details: 希望更多的爱好者能够参与进来，帮助这个主题更好的成长
---
<style>
.anchor-down {
    display: block;
    margin: 12rem auto 0;
    bottom: 45px;
    width: 20px;
    height: 20px;
    font-size: 34px;
    text-align: center;
    animation: bounce-in 5s 3s infinite;
    position: absolute;
    left: 50%;
    bottom: 30%;
    margin-left: -10px;
    cursor: pointer;
}
@-webkit-keyframes bounce-in{
    0%{transform:translateY(0)}
    20%{transform:translateY(0)}
    50%{transform:translateY(-20px)}
    80%{transform:translateY(0)}
    to{transform:translateY(0)}
}
.anchor-down::before {
    content: "";
    width: 20px;
    height: 20px;
    display: block;
    border-right: 3px solid #fff;
    border-top: 3px solid #fff;
    transform: rotate(135deg);
    position: absolute;
    bottom: 10px;
}
.anchor-down::after {
    content: "";
    width: 20px;
    height: 20px;
    display: block;
    border-right: 3px solid #fff;
    border-top: 3px solid #fff;
    transform: rotate(135deg);
}
</style>

<script>
export default {
    mounted () {
    // 删除原主题中的箭头
        const yuanDown = document.getElementsByClassName('down-arrow')
        yuanDown[0].style.display = 'none'

        // 添加新的箭头
        const ifJanchor = document.getElementById("JanchorDown"); 
        ifJanchor && ifJanchor.parentNode.removeChild(ifJanchor);
        let a = document.createElement('a');
        a.id = 'JanchorDown';
        a.className = 'anchor-down';
        document.getElementsByClassName('hero')[0].append(a);
        let targetA = document.getElementById("JanchorDown");
        targetA.addEventListener('click', e => { // 添加点击事件
            this.scrollFn();
        })
    },
    methods: {
        scrollFn() {
            const windowH = document.getElementsByClassName('hero')[0].clientHeight; // 获取窗口高度
            document.documentElement.scrollTop = windowH; // 滚动条滚动到指定位置
        }
    }
}
</script>

2 导航栏，颜色切换

修改theme中的代码数据，添加自己的组件 theme/components/Navbar 中的组件

3 加入看板

vuepress-theme-reco.recoluan.com/views/plugi…

使用插件vuepress-plugin-kan-ban-niang

● 安装

yarn add @vuepress-reco/vuepress-plugin-kan-ban-niang //引入依赖
//或者
pnpm install  @vuepress-reco/vuepress-plugin-kan-ban-niang

● 修改config的配置

module.exports = {
  plugins: 
  [
        [
            "@vuepress-reco/vuepress-plugin-kan-ban-niang",
            {
                theme: ["whiteCat"],
                clean: true,
                modelStyle: {
                    position: "fixed",
                    right: "65px",
                    bottom: "0px",
                    zIndex: 99999,
                    pointerEvents: 'none'
                }
            }
        ]
    ]
}

4 加入音乐插件（bgm player）

yarn add @vuepress-reco/vuepress-plugin-bgm-player -D
//或者
npm install @vuepress-reco/vuepress-plugin-bgm-player -D

修改config配置

module.exports = {
  plugins: 
  [
        [
            '@vuepress-reco/vuepress-plugin-bgm-player',
            {
              audios: [
                {
                  name: 'LOSER',
                  artist: '최낙타',
                  url: 'https://assets.smallsunnyfox.com/music/3.mp3',
                  cover: 'https://assets.smallsunnyfox.com/music/3.jpg'
                }
              ] ,
              // 是否默认缩小
              autoShrink: true ,
              // 缩小时缩为哪种模式
              shrinkMode: 'float',
              // 悬浮窗样式
              floatStyle:{ bottom: '10px', 'z-index': '999999' }
            }
          ]
    ]
}

5 加入进度条nprogress

一个基于 nprogress (opens new window)的进度条插件。

yarn add  @vuepress/plugin-nprogress -D
//或者
npm install -D @vuepress/plugin-nprogress

使用：直接添加到plugins中即可

["@vuepress/nprogress"]

6 修改光标效果

yarn add  vuepress-plugin-cursor-effects -D
//或者
npm install -D vuepress-plugin-cursor-effects

进行简单的配置。

plugins: [
  ['cursor-effects', {
    size: 2, // size of the particle, default: 2
    shape: 'star', // ['star' | 'circle'], // shape of the particle, default: 'star'
    zIndex: 999999999, // z-index property of the canvas, default: 999999999
	}]
]

三、总结

github上很多可用的插件，我们可以直接搜索查询自己想使用的插件即可。

也可查看官网进行对应的配置

大家快去配置自己的播客吧！

vuePress 自定义博客----自定义配置