mkdir blog && cd blog // 创建目录
npm init // 初始化包管理器
npm install -D vuepress // 安装vuepress
复制代码

{
  "scripts": {
    "dev": "vuepress dev . --open --host \"localhost\"",
    "build": "vuepress build ."
  }
}
复制代码

npm install vuepress-theme-reco@1.5.7 --save-dev
复制代码

module.exports = {
    title: 'Blog Title', // Blog的标题，会显示在页面左上角的位置
    description: '描述',
    dest: 'public', // 打包输出产物
    thteme: 'reco', // 选用主题
    head: [], // 头元素
    themeConfig: { // 主题配置
        record: '备案信息',
        recordLink: '备案跳转链接',
        startYear: '2017', // 项目开始时间，只用写年份
        nav: [ // 导航栏
         {
             text: "Home", // item text
             link: "/", // item path
             icon: "reco-home" // item icon
         },
         ...
        ],
        friendLink: [ // 友链
            { title: 'juejin', desc: '稀土掘金', logo: '..', link: 'xxx'}
        ],
        search: true, // 是否开启搜索
        authorAvatar: '...jpg', // 作者头像
        mode: 'auto', // 默认 auto，auto 跟随系统，dark 暗色模式，light 亮色模式
        modePicker: false,  // 默认 true，false 不显示模式调节按钮，true 则显示
    },
    locales: { ... }, // 多语言
}
复制代码

plugins: [
    ...
    ["@vuepress-reco/back-to-top"] // reco 内置
    ...
]
复制代码

npm install vuepress-plugin-meting --save
复制代码

plugins: [
    ...
    [
        "meting",
        {
            meting: {
                 // 网易
                 server: "netease",
                 // 读取歌单
                 type: "playlist",
                 mid: "2859214503",
            },
            // 不配置该项的话不会出现全局播放器
            aplayer: {
              // 吸底模式
              fixed: true,
              mini: true,
              // 自动播放
              autoplay: false,
              // 歌曲栏折叠
              listFolded: true,
              // 颜色
              theme: "#ccc",
              // 播放顺序为随机
              order: "random",
              // 初始音量
              volume: 0.1,
              // 关闭歌词显示
              lrcType: 0,
            },
            mobile: {
              // 手机端去掉cover图
              cover: false,
            },
        },
    ]
    ...
]
复制代码

npm install @vuepress\plugin-medium-zoom --save
复制代码

plugins: [
    ...
    [
      "@vuepressplugin-medium-zoom",
      {
        selector: ".page img",
        delay: 1000,
        options: {
          margin: 24,
          background: "rgba(25,18,25,0.9)",
          scrollOffset: 40,
        },
      },
    ],
    ...
]
复制代码

npm install @vuepress-reco/vuepress-plugin-kan-ban-niang --save
复制代码

plugins: [
    ...
    [
      //先安装在配置， 
      "@vuepress-reco/vuepress-plugin-kan-ban-niang",
      {
        theme: [
          "blackCat",
          "whiteCat",
          "haru1",
          "haru2",
          "haruto",
          "koharu",
          "izumi",
          "shizuku",
          "wanko",
          "miku",
          "z16",
        ],
        clean: false,
        messages: {
          welcome: "我是HoMeTown欢迎你的关注 ",
          home: "去首页看看吧~",
          theme: "好吧，希望你能喜欢我的其他小伙伴。",
          close: "再见哦",
        },
        width: 240,
        height: 352,
      },
    ],
    ...
]
复制代码