博客详情页面引入Valine系统+LeanCloud

关于Valine评论系统

来自官网

由于某些原因，src目录将从v1.4.0后暂停更新.GitHub release (latest by date) Cdnjs npm downloads build DocsValine 诞生于2017年8月7日，是一款基于LeanCloud的快速、简洁且高效的无后端评论系统。理论上支持但不限于静态博客，目前已有Hexo、Jekyll、Typecho、Hugo、Ghost、Docsify 等博客和文档程序在使用Valine。

特性

• 快速
• 安全
• Emoji
• 无后端实现
• MarkDown 全语法支持
• 轻量易用
• 文章阅读统计
• Valine - 一款快速、简洁且高效的无后端评论系统。

在文章详情页面引入Valine

/* 评论配置 */
onMounted(() => {
  let decodeArticleId = decryData(route.params.articleId) + ''
  new Valine({
    el: '#detailsComments',
    appId: 'appid',
    appKey: 'appkey',
    placeholder: "你是我一生只会遇见一次的惊喜 ...",
    master: '515f1b6b5b8',
    tagMeta: ["博主", "小伙伴", "访客"],
    avatar: 'monsterid',
    enableQQ: true,
    path: decodeArticleId,
  })
})

 <div id="detailsComments" class="luox-comment-box"></div>

比较需要注意的就是添加一个path属性 为评论的唯一标识，最好是当前文章的id，与之对应的是在LeanCloud中的url字段

:::danger 注意
如果之前页面没有使用path字段，需要为特定页面设置一个path字段，不然会引起混乱
:::