小驿搭建（四）——配置Valine评论

Kelmory 6/24/2021 前端VuePress

# 配置vuepress评论插件——Valine

Vuepress提供了一个插件API，由此出发，Vuepress社区里大量的贡献者制作了很多实用或是美观的插件，插件列表请参考Github仓库 (opens new window)。因为只需要一个简单的博客，这里只以配置评论功能为主要案例。

首先了解一一下插件的使用方法（参考官方文档 (opens new window)）。一方面插件通常是以包的方式发布到npm管理库或是自行开发，故而对于需要使用包的插件而言，安装是第一步。有时，你会遇到node版本较低（<10.0）导致部分包不兼容（如mkdirp）的问题，需要首先升级node，这一步骤在清除cache时会有警告，但对于这个博客是没有影响的；对于其他对全局有特殊依赖的项目，应当谨慎操作：

# reference: https://askubuntu.com/questions/426750/how-can-i-update-my-nodejs-to-the-latest-version
$ sudo npm cache clean -f
$ sudo npm install -g n
$ sudo n stable

更新node后就可以放心在项目依赖中添加插件包啦：

# install the plugin with yarn
$ yarn add -D @mr-hope/vuepress-plugin-comment
# update all packages
$ yarn install

另一方面，可以看到，插件有两种使用方法：通过require使用项目内js文件和通过包的字符串名称('vuepress-plugin-XXX'或'XXX')使用发布到npm的包，

// .vuepress/config.js
module.exports = {
    plugins: [
        // 以下是引用示例
        require('./my-plugin.js'),  // use local
        'vuepress-plugin-comment',  // use package
        'mplay',                    // pkg abbr
        '@org/vuepress-plugin-xxx', // specified pkg
    ]
}

配置了vuepress之后，还需要在插件内部进行配置，具体请参考各个插件的文档，此处以vuepress-plugin-comment为例。在注册了LeanCloud个人版之后即可在此处填入你的appId和appKey，这样就可以调试使用了。

    plugins: {
        '@maginapp/vuepress-plugin-katex': {
            delimiters: 'dollars'
        },
        '@mr-hope/vuepress-plugin-comment': {
            options: {
                type: "valine",
                appId: "", // your appId
                appKey: "", // your appKey
            }
        },
    },

Kelforest

Choose mode