halo-theme-dream 博客主题对应的博客评论组件，适用于 Halo 博客系统。非常完善的一个博客插件，支持图片上传、显示评论弹幕功能。

一、预览

预览地址：https://blog.nineya.com

二、使用指南

1. 进入后台 -> 系统 -> 博客设置 -> 评论设置
2. 将 评论模块 JS 修改为：https://unpkg.com/halo-comment-dream@latest/dist/halo-comment.min.js

三、自定义配置

如果你需要自定义该评论组件，下面提供了一些属性：

| 属性 | 说明 | 默认值 | 可选 | | ------------------ | ------------------------------------------------------------ | ------------------------------ | -------------------------- | | autoLoad | 是否自动加载评论列表 | true | true false | | showUserAgent | 是否显示评论者的 UA 信息 | true | true false | | priorityQQAvatar | 是否优先展示QQ头像 | false | true false | | getQQInfo | 昵称输入框输入QQ号自动获取QQ昵称和邮箱 | false | true false | | commentHtml | 开启html内容，启用后有被 XSS 恶意代码注入的风险，建议同时开启评论审核。 | false | true false | | loadingStyle | 评论加载样式 | default | default circle balls | | unfoldReplyNum | 评论的回复列表默认展开的回复数量 | 10 | 大于 0 的正整数 | | night | 评论模块以黑暗模式初始化样式 | localStorage 中 night 的值 | true false | | replyDescSoft | 评论的二级回复是否采用按时间从晚到早排序 | false | true false | | enableImageUpload | 开启评论区图片上传功能 | false | true false | | enableBulletScreen | 开启评论弹幕 | false | true false | | imageUploadApi | 接受图片上传的后端 api 地址 | undefined | url 路径 | | anonymousUserName | 匿名评论的用户昵称，配置后允许用户匿名评论 | undefined | 用户名 | | avatarLoading | 头像加载动画 | assets/img/loading.svg | 图片路径 | | enableBloggerOperation| 如果博主已登录，允许博主直接在评论区进行操作 | false | true false | | defaultAvatar | 默认头像，当头像加载失败时显示 | assets/img/avatar.svg | 图片路径 |

配置方法：

在引入评论组件的页面加上：

<script>
var configs = {
    autoLoad: true,
    showUserAgent: true
}
</script>

修改评论组件标签加上：

:configs="configs"

示例：

<halo-comment id="${post.id?c}" type="post" :configs="configs">

<halo-comment id="${sheet.id?c}" type="sheet" :configs="configs">

<halo-comment id="${journal.id?c}" type="journal" :configs="configs">

四、使用指南

4.1 Vue 方式

适用于基于 Vue 开发的主题，否则不能通过 :configs 的方式指定配置

新建 comment.ftl：

<#macro comment target,type>
    <#if !post.disallowComment!false>
        <script src="//cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
        <script src="${options.comment_internal_plugin_js!'//unpkg.com/halo-comment-dream@latest/dist/halo-comment.min.js'}"></script>
        <script>
        var configs = {
            autoLoad: true,
            showUserAgent: true
        }
        </script>
        <halo-comment id="${target.id?c}" type="${type}" :configs="configs"/>
    </#if>
</#macro>

然后在 post.ftl / sheet.ftl 中引用：

post.ftl：

<#include "comment.ftl">
<@comment target=post type="post" />

sheet.ftl：

<#include "comment.ftl">
<@comment target=sheet type="sheet" />

4.2普通方式

非 Vue 则需要直接将 JSON 格式的配置写入到 configs 属性。

新建 comment.ftl：

<#macro comment target,type>
    <#if !post.disallowComment!false>
        <script src="//cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
        <script src="${options.comment_internal_plugin_js!'//unpkg.com/halo-comment-dream@latest/dist/halo-comment.min.js'}"></script>
        <halo-comment id="${target.id?c}" type="${type}" configs='{"autoLoad": true,"showUserAgent": true}'/>
    </#if>
</#macro>

然后在 post.ftl / sheet.ftl 中引用：

post.ftl：

<#include "comment.ftl">
<@comment target=post type="post" />

sheet.ftl：

<#include "comment.ftl">
<@comment target=sheet type="sheet" />

五、进阶配置

5.1 通过主题进行配置

可以将 configs 中的属性通过 settings.yaml 保存数据库中，以供用户自行选择，如：

settings.yaml：

...

comment:
  label: 评论设置
  items:
    autoLoad:
      name: autoLoad
      label: 自动加载评论
      type: radio
      data-type: bool
      default: true
      options:
        - value: true
          label: 开启
        - value: false
          label: 关闭
    showUserAgent:
      name: showUserAgent
      label: 评论者 UA 信息
      type: radio
      data-type: bool
      default: true
      options:
        - value: true
          label: 显示
        - value: false
          label: 隐藏

...

那么我们需要将上面的 script 改为下面这种写法：

<script>
var configs = {
    autoLoad: ${settings.autoLoad!},
    showUserAgent: ${settings.showUserAgent!}
}
</script>

5.2 使用明亮/黑暗模式

评论模块支持明亮和黑暗两种模式，默认通过 localStorage 中 night 的值来初始化评论模块的模式。

动态切换模式的 js 方法：

// isNight为要切换到的模式，true表示黑暗模式
isNight = true 
$("halo-comment").each(function () {
    const shadowDom = this.shadowRoot.getElementById("halo-comment");
    $(shadowDom)[`${isNight ? "add" : "remove"}Class`]("night");
})
// 存储模式配置，用于打开网页时评论区的初始化
localStorage.setItem('night', isNight);

5.3 实现图片上传

本插件支持文件上传功能，后端文件上传接口需要基于以下报文格式实现。

• 请求类型：POST

• 请求报文（multipart/form-data）：

| 参数 | 说明 | | :---: | -------------------- | | image | 上传图片文件的文件流 |

• 响应报文（application/json）：

| 参数 | 说明 | | :---------: | ---------------------------------- | | code/status | 错误状态码，响应成功的码值为 200 | | message | 错误信息 | | data.name | 文件名 | | data.url | 访问图片的url |

5.4 暂停弹幕

允许主题通过 stop-bullet-screen 属性暂停弹幕，添加该属性后弹幕将被暂停，删除属性后可继续进行属性轮播。

实现示例如下：

const applyStopBulletScreen = (stopBulletScreenValue) => {
    $('halo-comment[bullet-screen]').each(function () {
    const shadowDom = this.shadowRoot.getElementById("halo-comment");
    if (stopBulletScreenValue) {
      $(shadowDom).attr('stop-bullet-screen', 'true');
    } else {
      $(shadowDom).removeAttr('stop-bullet-screen');
    }
  })
  localStorage.setItem('stop-bullet-screen', stopBulletScreenValue);
}
$bulletScreen.on('click', () => {
  let stopBulletScreen = localStorage.getItem('stop-bullet-screen') || false;
  applyStopBulletScreen(stopBulletScreen.toString() !== 'true')
});

5.5 设置主题色

评论模块支持为明亮/黑暗模式分别指定一个主题色，默认明亮模式的主题色为 #50bfff，黑暗模式的主题色为 #5d93db，你可以通过 --theme 属性在你的主题指定一个主题色。

html {
  --theme: #50bfff;
}

六、说明

1. configs 可以不用配置。
2. 具体主题开发文档请参考：https://halo.run/develop/theme/ready.html。

七、打赏项目

感谢您对本项目的喜爱，您的打赏是对本项目最好的支持！本项目所有打赏收益将全部投入到支付宝公益项目，捐赠记录在关于我的中可见，一起为公益事业加油。