博客的相关配置

MuYan2021-04-16web

reco 主题 1.x

最近询问博客相关配置的人比较多（其实当前博客内就有相关文档与说明，但是需要自行查询与关联）, 鉴于一一回复的效率太过低效，所以这边写了一篇简略的说明。

博客相关技术栈等


vuepress-plugin-meting: 音乐播放器。
# vuepress-reco/vuepress-plugin-kan-ban-niang: 看板娘
vuepress-plugin-nuggets-style-copy： 代码复制功能
vuepress-plugin-auto-sidebar： 自动生成侧边栏分组
vuepress/last-updated（依托于 git commit）： 文章最后更新时间转换
vuepress-plugin-dynamic-title： 趣味标题插件
vue-canvas-effect（Bubbles）： 气泡
vuepress-plugin-permalink-pinyin：中文转换为音译链接插件
typed.js：一个 JavaScript 打字动画库

敲重点：

主题的 lastUpdated 配置是基于 git commit 的，建议安装 vuepress/last-updated、moment 进行转换，以下内容含有相关配置信息。
配置了 last-updated 相关配置后，不要忘记进行 config.js 的 locales 的设置，不然可能出现时间不对问题（跟语言、时区相关）。

// config.js
module.exports = {
  locales: {
    "/": {
      lang: "zh-CN", // 仅供参考，具体 lang 配置根据自己需求定义
    },
  },
};

plugins 相关配置

// config.js
const moment = require("moment");
module.exports = {
  locales: {
    "/": {
      lang: "zh-CN",
    },
  },
  plugins: [
    // 自动生成侧边栏的插件
    [
      "vuepress-plugin-auto-sidebar",
      {
        collapse: {
          open: true,
        },
      },
    ],
    // 文章最后更新时间转换
    [
      "@vuepress/last-updated",
      {
        transformer: (timestamp, lang) => {
          moment.locale(lang);
          return moment(timestamp).format("YYYY-MM-DD HH:mm:ss");
        },
      },
    ],
    [
      "dynamic-title",
      {
        // Icon 建议根据自身需求选择
        showIcon: "/favicon.ico",
        showText: "",
        hideIcon: "/failure.ico",
        hideText: "(●—●)不要走啊，再看看！",
        recoverTime: 2000,
      },
    ],
    // 复制代码功能
    [
      "vuepress-plugin-nuggets-style-copy",
      {
        copyText: "复制代码",
        tip: {
          content: "复制成功!",
        },
      },
    ],
    // 音乐播放器
    [
      "meting",
      {
        meting: {
          // 网易
          server: "netease",
          // 读取歌单列表
          type: "playlist",
          mid: "网易云歌单id",
        },
        // 不配置该项的话不会出现全局播放器
        aplayer: {
          // 吸底模式
          fixed: true,
          mini: true,
          // 自动播放
          autoplay: true,
          // 歌曲栏折叠
          listFolded: true,
          // 颜色
          theme: "#f9bcdd",
          // 播放顺序为随机
          order: "random",
          // 初始音量
          volume: 0.1,
          // 关闭歌词显示
          lrcType: 0,
        },
        mobile: {
          // 手机端去掉cover图
          cover: false,
        },
      },
    ],
    // 看板娘
    [
      "@vuepress-reco/vuepress-plugin-kan-ban-niang",
      {
        clean: true,
      },
    ],
    // 中文转换为音译链接插件
    [
      "permalink-pinyin",
      {
        lowercase: true,
        separator: "-",
      },
    ],
  ],
};

气泡 (Bubbles)，首页气泡效果

需要将主题源码本地化open in new window，并自行修改对应源码

npm i vue-canvas-effect -D

后续配置参考

注：vue-canvas-effectopen in new window

留言功能\留言板

留言功能是该主题内置功能 valine 评论，相关文档
留言板模块（基于留言功能），无需修改对应源码，只需配置相关信息，留言板放至项目根目录。

于项目根目录新建 messageboard.md, 内容如下，date 时间可自行定义

---
title: 留言板
date: 2020-10-15
sidebar: false
subSidebar: false
isShowComments: true
---

## 欢迎大家在此留下你的建议和意见

配置 config.js 的对应信息

// config.js
module.exports = {
  nav: [
    {
      text: "留言板",
      icon: "reco-suggestion",
      link: "/messageboard", // messageboard 只是自行新建的文件名，可自行命名，建议使用小写字母
    },
  ],
};