halo-comment-normal
Advanced tools
适用于 Halo 的评论组件。
进入后台 -> 系统 -> 博客设置 -> 评论设置
将 评论模块 JS 修改为：https://cdn.jsdelivr.net/npm/halo-comment-normal@1.2.0/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>
FAQs
halo-comment-normal > 适用于 Halo 的评论组件。
The npm package halo-comment-normal receives a total of 27 weekly downloads. As such, halo-comment-normal popularity was classified as not popular.
We found that halo-comment-normal demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
/Security News
A long-running Go typosquat impersonated the popular shopspring/decimal library and used DNS TXT records to execute commands.
Research
Active npm supply chain attack compromises @antv packages in a fast-moving malicious publish wave tied to Mini Shai-Hulud.
Security News
/Research
Socket detected malicious node-ipc versions with obfuscated stealer/backdoor behavior in a developing npm supply chain attack.