vuepress-theme-reco 博客主题使用

前提

安装vuepress

安装vuepress-theme-reco

安装

npm install vuepress-theme-reco --save-dev

引用

// .vuepress/config.js

module.exports = {
  theme: 'reco'
}  

优秀插件安装

插件安装

//内置插件不需要下载安装，直接引用就可以
npm install  <pagkageName> -D   //或  yarn add <pagkageName> -D

//pagkageName 为插件全称


eg.
//1.音乐播放器
npm install @vuepress-reco/vuepress-plugin-bgm-player -D
//2.樱花特效
npm install vuepress-plugin-sakura -D
//3.动态title
npm install vuepress-plugin-dynamic-title -D

插件引用

// .vuepress/config.js

module.exports = {
  theme: 'reco',
  plugins: [
    //音乐播放器
    ['@vuepress-reco/vuepress-plugin-bgm-player',
      {
        audios: [
            {
                name: '강남역 4번 출구',
                artist: 'Plastic / Fallin` Dild',
                url: 'https://assets.smallsunnyfox.com/music/2.mp3',
                cover: 'https://assets.smallsunnyfox.com/music/2.jpg'
            },
            {
                name: '用胳膊当枕头',
                artist: '최낙타',
                url: 'https://assets.smallsunnyfox.com/music/3.mp3',
                cover: 'https://assets.smallsunnyfox.com/music/3.jpg'
            }
        ],
        position: {
            left: '10px',
            bottom: '10px',
            'z-index': '999999'
        },
        autoShrink: true,
        floatPosition: 'left',
        floatStyle: {
            bottom: '80px',
            'z-index': '999999'
        }
     }],
    //动态标题
    ["dynamic-title",{
        showIcon: "https://www.zpzpup.com/assets/image/favicon.ico",
        showText: "欢迎回来 O(∩_∩)O~",
        hideIcon: "https://www.zpzpup.com/assets/image/favicon.ico",
        hideText: "失联中。。。快回来~",
        recoverTime: 2000
    }]
  ]
}  

参考

vuepress-theme-reco一款简洁而优雅的 vuepress 博客 & 文档 主题。https://vuepress-theme-reco.recoluan.com/介绍 | vuepress-theme-reco一款简洁而优雅的 vuepress 博客 & 文档 主题。https://vuepress-theme-reco.recoluan.com/views/1.x/

优秀案例

优秀博客案例 | vuepress-theme-reco一款简洁而优雅的 vuepress 博客 & 文档 主题。https://vuepress-theme-reco.recoluan.com/views/other/theme-example.html