代码拉取完成，页面将自动刷新
适用于 Halo 的评论组件。
⚠️ 当前仓库已不再维护，Halo 2.x 的官方评论模块可查阅：https://github.com/halo-sigs/plugin-comment-widget
进入后台 -> 系统 -> 博客设置 -> 评论设置
将 评论模块 JS 修改为：https://unpkg.com/halo-comment-normal@latest/dist/halo-comment.min.js
如果你需要自定义该评论组件，下面提供了一些属性：
| 属性 | 说明 | 默认值 | 可选 |
|---|---|---|---|
| autoLoad | 是否自动加载评论列表 | true |
true false
|
| showUserAgent | 是否显示评论者的 UA 信息 | true |
true false
|
| loadingStyle | 评论加载样式 | default |
default circle balls
|
配置方法：
在引入评论组件的页面加上：
<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">
新建 comment.ftl：
<#macro comment target,type>
<#if !post.disallowComment!false>
<script src="//cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.min.js"></script>
<script src="${options.comment_internal_plugin_js!'//cdn.jsdelivr.net/npm/halo-comment-normal@1.1.1/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" />
一般在主题制作过程中，我们可以将 head 部分抽出来作为宏模板，如：https://github.com/halo-dev/halo-theme-anatole/blob/master/module/macro.ftl，那么我们就可以将所需要的依赖放在 head 标签中：
<head>
...
<#if is_post?? && is_sheet??>
<script src="//cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.min.js"></script>
<script src="${options.comment_internal_plugin_js!'//cdn.jsdelivr.net/npm/halo-comment-normal@1.1.1/dist/halo-comment.min.js'}"></script>
<script>
var configs = {
autoLoad: true,
showUserAgent: true
}
</script>
</#if>
...
</head>
然后在 post.ftl/sheet.ftl 中引用：
post.ftl：
<#if !post.disallowComment!false>
<halo-comment id="${post.id?c}" type="post" :configs="configs"/>
</#if>
sheet.ftl：
<#if !sheet.disallowComment!false>
<halo-comment id="${sheet.id?c}" type="sheet" :configs="configs"/>
</#if>
可以将 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>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。