halo-dev / plugin-comment-widget

通用的 Halo 2.0 评论组件插件

plugin-comment-widget

Halo 2.0 的通用评论组件插件，为前台提供完整的评论解决方案。

使用方式

1. 下载，目前提供以下两个下载方式：
   • GitHub Releases：访问 Releases 下载 Assets 中的 JAR 文件。
   • Halo 应用市场：https://halo.run/store/apps/app-YXyaD。
2. 安装，插件安装和更新方式可参考：https://docs.halo.run/user-guide/plugins。

需要注意的是，此插件需要主题进行适配，不会主动在内容页加载评论组件。

开发环境

git clone [email protected]:halo-dev/plugin-comment-widget.git

# 或者当你 fork 之后

git clone [email protected]:{your_github_id}/plugin-comment-widget.git

cd path/to/plugin-comment-widget

./gradlew pnpmInstall

# 启动一个 Docker 容器作为开发环境并自动加载此插件
./gradlew haloServer

Halo 插件的详细开发文档可查阅 插件开发。

主题适配

接入

接入文档可参考 自定义标签。

自定义样式

虽然目前不能直接为评论组件编写额外的样式，但可以通过一系列的 CSS 变量来自定义部分样式，开发者可以根据需求自行在主题中添加这些 CSS 变量，让评论组件和主题更好地融合。

目前已提供的 CSS 变量：

变量名	描述
--halo-comment-widget-base-color	基础文字颜色
--halo-comment-widget-base-info-color	非重要突出文字
--halo-comment-widget-base-border-radius	基础元素的圆角
--halo-comment-widget-base-font-size	基础字体大小
--halo-comment-widget-base-line-height	基础行高
--halo-comment-widget-base-font-family	基础字体族
--halo-comment-widget-component-avatar-rounded	头像的圆角大小
--halo-comment-widget-component-avatar-size	头像大小
--halo-comment-widget-component-form-input-bg-color	表单输入背景颜色
--halo-comment-widget-component-form-input-color	表单输入文字颜色
--halo-comment-widget-component-form-input-border-color	表单输入边框颜色
--halo-comment-widget-component-form-input-border-color-focus	表单输入焦点时边框颜色
--halo-comment-widget-component-form-input-box-shadow-focus	表单输入焦点时的阴影
--halo-comment-widget-component-form-button-login-bg-color	登录按钮背景颜色
--halo-comment-widget-component-form-button-login-bg-color-hover	登录按钮悬停背景颜色
--halo-comment-widget-component-form-button-login-border-color	登录按钮边框颜色
--halo-comment-widget-component-form-button-submit-bg-color	提交按钮背景颜色
--halo-comment-widget-component-form-button-submit-color	提交按钮文字颜色
--halo-comment-widget-component-form-button-submit-border-color	提交按钮边框颜色
--halo-comment-widget-component-form-button-submit-border-color-hover	提交按钮悬停边框颜色
--halo-comment-widget-component-form-button-emoji-color	表情按钮颜色
--halo-comment-widget-component-comment-item-action-bg-color-hover	评论项操作悬停背景颜色
--halo-comment-widget-component-comment-item-action-color-hover	评论项操作悬停颜色
--halo-comment-widget-component-pagination-button-bg-color-hover	分页按钮悬停背景颜色
--halo-comment-widget-component-pagination-button-bg-color-active	分页按钮活动状态背景颜色
--halo-comment-widget-component-pagination-button-border-color-active	分页按钮活动状态边框颜色
--halo-comment-widget-component-emoji-picker-rgb-color	表情选择器颜色
--halo-comment-widget-component-emoji-picker-rgb-accent	表情选择器强调颜色
--halo-comment-widget-component-emoji-picker-rgb-background	表情选择器背景颜色
--halo-comment-widget-component-emoji-picker-rgb-input	表情选择器输入颜色
--halo-comment-widget-component-emoji-picker-color-border	表情选择器边框颜色
--halo-comment-widget-component-emoji-picker-color-border-over	表情选择器悬停边框颜色

点击查看 CSS 代码模板

:root {

  --halo-comment-widget-base-color: ;
  --halo-comment-widget-base-info-color: ;
  --halo-comment-widget-base-border-radius: ;
  --halo-comment-widget-base-font-size: ;
  --halo-comment-widget-base-line-height: ;
  --halo-comment-widget-base-font-family: ;
  --halo-comment-widget-component-avatar-rounded: ;
  --halo-comment-widget-component-avatar-size: ;
  --halo-comment-widget-component-form-input-bg-color: ;
  --halo-comment-widget-component-form-input-color: ;
  --halo-comment-widget-component-form-input-border-color: ;
  --halo-comment-widget-component-form-input-border-color-focus: ;
  --halo-comment-widget-component-form-input-box-shadow-focus: ;
  --halo-comment-widget-component-form-button-login-bg-color: ;
  --halo-comment-widget-component-form-button-login-bg-color-hover: ;
  --halo-comment-widget-component-form-button-login-border-color: ;
  --halo-comment-widget-component-form-button-submit-bg-color: ;
  --halo-comment-widget-component-form-button-submit-color: ;
  --halo-comment-widget-component-form-button-submit-border-color: ;
  --halo-comment-widget-component-form-button-submit-border-color-hover: ;
  --halo-comment-widget-component-form-button-emoji-color: ;
  --halo-comment-widget-component-comment-item-action-bg-color-hover: ;
  --halo-comment-widget-component-comment-item-action-color-hover: ;
  --halo-comment-widget-component-pagination-button-bg-color-hover: ;
  --halo-comment-widget-component-pagination-button-bg-color-active: ;
  --halo-comment-widget-component-pagination-button-border-color-active: ;
  --halo-comment-widget-component-emoji-picker-rgb-color: ;
  --halo-comment-widget-component-emoji-picker-rgb-accent: ;
  --halo-comment-widget-component-emoji-picker-rgb-background: ;
  --halo-comment-widget-component-emoji-picker-rgb-input: ;
  --halo-comment-widget-component-emoji-picker-color-border: ;
  --halo-comment-widget-component-emoji-picker-color-border-over: ;
}

配色切换方案

根据上面提供的 CSS 变量，也可以通过定义 CSS 变量的方式为评论组件提供动态切换配色的功能。

以下是实现示例，你可以根据需求自行修改选择器或者媒体查询。

@media (prefers-color-scheme: dark) {
  .color-scheme-auto,
  [data-color-scheme='auto'] {
    color-scheme: dark;
    
    --halo-comment-widget-base-color: #ffffff;
    --halo-comment-widget-base-info-color: #64748b;
    --halo-comment-widget-component-form-input-bg-color: #475569;
    --halo-comment-widget-component-form-input-color: #ffffff;
    --halo-comment-widget-component-form-input-border-color: #495056;
    --halo-comment-widget-component-form-input-border-color-focus: #65a3ff;
    --halo-comment-widget-component-form-input-box-shadow-focus: 0 0 0 0.15em #1c3966;
    --halo-comment-widget-component-form-button-login-bg-color: #334155;
    --halo-comment-widget-component-form-button-login-bg-color-hover: #475569;
    --halo-comment-widget-component-form-button-login-border-color: #475569;
    --halo-comment-widget-component-form-button-submit-border-color: #475569;
    --halo-comment-widget-component-form-button-submit-border-color-hover: #64748b;
    --halo-comment-widget-component-form-button-emoji-color: #cbd5e1;

    --halo-comment-widget-component-comment-item-action-bg-color-hover: #475569;
    --halo-comment-widget-component-comment-item-action-color-hover: #94a3b8;

    --halo-comment-widget-component-pagination-button-bg-color-hover: #475569;
    --halo-comment-widget-component-pagination-button-bg-color-active: #475569;
    --halo-comment-widget-component-pagination-button-border-color-active: #475569;

    --halo-comment-widget-component-emoji-picker-rgb-color: 222, 222, 221;
    --halo-comment-widget-component-emoji-picker-rgb-accent: 58, 130, 247;
    --halo-comment-widget-component-emoji-picker-rgb-background: 21, 22, 23;
    --halo-comment-widget-component-emoji-picker-rgb-input: 0, 0, 0;
    --halo-comment-widget-component-emoji-picker-color-border: rgba(255, 255, 255, 0.1);
    --halo-comment-widget-component-emoji-picker-color-border-over: rgba(255, 255, 255, 0.2);
  }
}

.color-scheme-dark,
.dark,
[data-color-scheme='dark'] {
  color-scheme: dark;

  --halo-comment-widget-base-color: #ffffff;
  --halo-comment-widget-base-info-color: #64748b;
  --halo-comment-widget-component-form-input-bg-color: #475569;
  --halo-comment-widget-component-form-input-color: #ffffff;
  --halo-comment-widget-component-form-input-border-color: #495056;
  --halo-comment-widget-component-form-input-border-color-focus: #65a3ff;
  --halo-comment-widget-component-form-input-box-shadow-focus: 0 0 0 0.15em #1c3966;
  --halo-comment-widget-component-form-button-login-bg-color: #334155;
  --halo-comment-widget-component-form-button-login-bg-color-hover: #475569;
  --halo-comment-widget-component-form-button-login-border-color: #475569;
  --halo-comment-widget-component-form-button-submit-border-color: #475569;
  --halo-comment-widget-component-form-button-submit-border-color-hover: #64748b;
  --halo-comment-widget-component-form-button-emoji-color: #cbd5e1;

  --halo-comment-widget-component-comment-item-action-bg-color-hover: #475569;
  --halo-comment-widget-component-comment-item-action-color-hover: #94a3b8;

  --halo-comment-widget-component-pagination-button-bg-color-hover: #475569;
  --halo-comment-widget-component-pagination-button-bg-color-active: #475569;
  --halo-comment-widget-component-pagination-button-border-color-active: #475569;

  --halo-comment-widget-component-emoji-picker-rgb-color: 222, 222, 221;
  --halo-comment-widget-component-emoji-picker-rgb-accent: 58, 130, 247;
  --halo-comment-widget-component-emoji-picker-rgb-background: 21, 22, 23;
  --halo-comment-widget-component-emoji-picker-rgb-input: 0, 0, 0;
  --halo-comment-widget-component-emoji-picker-color-border: rgba(255, 255, 255, 0.1);
  --halo-comment-widget-component-emoji-picker-color-border-over: rgba(255, 255, 255, 0.2);
}

此外，为了让主题可以更加方便的适配暗黑模式，此插件也提供了一套暗黑模式的配色方案，主题可以直接使用此方案，而不需要自己去适配暗黑模式，适配方式如下：

1. 在 html 或者 body 标签添加 class：
   1. color-scheme-auto：自动模式，根据系统的暗黑模式自动切换。
   2. color-scheme-dark / dark：强制暗黑模式。
   3. color-scheme-light / light：强制明亮模式。
2. 在 html 或者 body 标签添加 data-color-scheme 属性：
   1. auto：自动模式，根据系统的暗黑模式自动切换。
   2. dark：强制暗黑模式。
   3. light：强制明亮模式。

作为组件使用

此插件的 UI 部分采用 Lit Element 编写，并最终编译为 Web Component，所以理论上可以在任何 JS 框架中使用。这非常适用于将 Halo 作为 Headless CMS 使用的场景。例如使用 Vue、React 等框架编写网站，并调用 Halo 的 API 来渲染网页，这个时候文章评论的解决方案就可以直接使用此组件。

安装：

pnpm install @halo-dev/comment-widget

Vue

在 Vue 组件中使用时，需要在 Vue 的编译选项中设置将此组件标记为非 Vue 组件，以下是 Vite 的配置示例：

import vue from '@vitejs/plugin-vue'

export default {
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: (tag) => tag === 'comment-widget'
        }
      }
    })
  ]
}

然后在 SFC 中使用即可：

<script setup>
import '@halo-dev/comment-widget'
import '@halo-dev/comment-widget/var.css';
</script>

<template>
  <comment-widget
    baseUrl="https://demo.halo.run"
    group="content.halo.run"
    kind="Post"
    version="v1alpha1"
    name="e0507f6f-88bb-4d3c-a90a-a88aba222035"
  ></comment-widget>
</template>

React

import "@halo-dev/comment-widget";
import "@halo-dev/comment-widget/var.css";

function App() {
  return (
    <>
      <comment-widget
        baseUrl="https://demo.halo.run"
        group="content.halo.run"
        kind="Post"
        version="v1alpha1"
        name="e0507f6f-88bb-4d3c-a90a-a88aba222035"
      ></comment-widget>
    </>
  );
}

export default App;

plugin-comment-widget's Issues

插件初始化失败

我第一次访问有评论插件的页面的时候会报错CommentWidget is not defined，再次刷新页面或者点击页面，又会正常渲染，不知道是主题问题还是插件问题。

一个页面有多个评论组件时位置错乱

当页面中有多篇文章同时展示评论组件时，所有评论组件会全部展示在第一个评论组件的位置。
https://github.com/halo-sigs/plugin-comment-widget/blob/main/src/main/java/run/halo/comment/widget/DefaultCommentWidget.java#L48-L61

评论组件字体样式会覆盖主题默认的字体样式

可以发现 字体样式和其他地方是不一致的

目前可以用，但是为啥填写了网址网站，头像或者名字却没有超链接？

目前可以用，但是为啥填写了网址网站，头像或者名字却没有超链接？
类似wordpress一样，点名字或者头像，可以超链接他自己写的网站呢
要不然，我这边无法及时互动呀，哥哥！~

是否可以介入 G头像的那个，写邮箱为了头像，或者现在很多评论体系需要写QQ，自动获取头像的那个？

建议：网址哪里可以写也可以不写，不强制，写的话，名字超链接上，不写的话，就没超链接。

这样可以吗，非常感谢~ 新人小白，敬上！

补充： 此插件是一个通用的评论组件插件，主题需要针对此类型插件做适配。Halo 为模板引擎提供了专门的标签（<halo:comment />），只需要在必要的位置添加此标签即可。

目前不懂，自用默认主题，什么也不用配置就好用。

使用 Ctrl + Enter 提交评论时会触发两次接口请求

/kind bug

希望为已有该站账号的链接设置 nofollow 标识避免被搜索引擎抓取

如标题所述

因为目前被抓取的无效链接太多了，希望可以优化一下

参考：https://developers.google.com/search/docs/crawling-indexing/qualify-outbound-links?hl=zh-cn

/kind improvement

希望点击评论图标后编辑器能展示在可视区域

目前如果点击屏幕下方的评论图标后, 虽然展开了编辑框, 但是需要滚动才能看到, 建议显示编辑框时自动滚动到可视区域

/kind improvement

单个页面有多个评论组件时，实现按需加载。

问题描述

当前情况下，当单个页面有多个评论区域时，所有的评论区会在页面加载的时候一次性全部请求并处理，非常耗费资源。如下图所示

问题期望

实现按需加载，例如，当评论组件可视时，再进行资源的请求与加载。

BUG: 2.0.0打开表情面板时高度出现样式问题

默认主题

dream主题

• 高度过长，部分位置被footer部分遮挡

希望评论编辑框可以增加隐藏评论的设置

如在打开表情面板的图标旁边增加隐藏评论的设置以便即使审核通过后也不展示在主题端,只有评论者和管理员可见

/kind feature

评论登录状态无法登出

点击注销后登录状态一直会显示Anonymous User用户

评论区域大小问题

在写主题的时候为了计算rem方便，有时候会将font-size设置为62.5% 这样则会导致评论区和搜索框偏小的问题呢，评论模块我可以手动暴露一个font-size 出来整体调整，但是对评论似乎是无效的，这个有什么好的处理方法吗？

评论回复在前端无法显示

回复在console已审核，但在文章里不显示，但能看到有一条回复

希望支持快捷键发送评论

使用 2.0.0 最新版本评论时发现无法使用快捷键发送评论，希望添加。

/kind feature

PJAX 下，comment 首次请求会出错

有得主题用了pjax会有问题，导致评论加载不出来

评论功能字数过多异常

评论字数过长或者太多，查询会oom，建议限制长度，或者分段查询，缩略... （容易被恶意刷评）
展示框异常，如果很长一段评论完成后，框体不会缩小，被撑的很大

将 script 移动至 head 标签，以解决主题使用 pjax 或者同页面多评论组件（瞬间）的问题

目前评论组件的扩展方式是在需要的地方加载如下代码：

<div id="${domId}"></div>
<script src="/plugins/PluginCommentWidget/assets/static/comment-widget.iife.js?version=${version}"></script>
<link rel="stylesheet" href="/plugins/PluginCommentWidget/assets/static/style.css?version=${version}" />
<script>
  CommentWidget.init(
    "#${domId}",
    {
      group: "${group}",
      kind: "${kind}",
      name: "${name}"
    }
  );
</script>

目前通过反馈会有两个问题：

1. 如果主题使用了 pjax 库，那么在切换页面之后将无法加载 script 文件，导致无法正常 CommentWidget.init
2. 如果主题的同一个页面需要多个评论组件（比如瞬间），那么 script[src=/plugins/PluginCommentWidget/assets/static/comment-widget.iife.js] 将出现多次，实际上只需要 CommentWidget.init 的函数即可。

所以期望改进评论组件加载的位置，将其放置在全局的 head 标签中，目前插件资源设置了浏览器缓存并且可以设置 defer 防止阻塞页面渲染，所以性能不会是个问题。

评论展示

halo2.9 评论插件1.7.0 友连1.3.1

友连 页面 评论展示未知

请问下评论存储在哪里？

rt，mysql中没看到评论相关的表或者记录

Gravatar 能自定义镜像服务器吗?

已知Gravatar无法显示

添加查看或者显示发表评论的ip和端口号

公安备案交互式网站时，可能对发表评论时的ip和端口有记录要求。

使用评论插件和搜索插件之后，网页启动非常慢

使用评论插件和搜索插件之后

关闭插件之后

使用过腾讯云和又拍云的全站加速，效果并不是很好，（也有可能是我方法不对）想问问有什么解决办法吗？
打开网站要20多秒实在是受不了。

匿名评论无法看到发送的待审核评论

Your current Halo version

2.11

Describe this feature

当设置为开放注册，默认为访客时，访客身份评论后可以看到自己发送的评论，并提示待审核中。当设置不开放注册，并开放匿名评论时，匿名用户评论后不能像访客身份一样看到自己发送的评论，但实际后台中是有此评论的，可能会让匿名用户困惑是否成功评论。所以是否能让匿名评论也像访客评论一样可以显示并提示待审核中。

Additional information

No response

建议：支持站长自己管理评论表情包

现在使用的评论插件只有默认的emoji表情，建议在后续的评论插件可以允许站长（或者网站管理员）添加和管理图片表情包，以增加互动趣味性。

或者提供几套好看的表情包也可以

无法正常发送评论

halo版本
v2.3.0

评论插件
v1.3.0

问题描述
点击提交评论后，提交按钮一直loading，不回调。去后台发现评论已提交。

评论回复展示顺序与后端不一致

Halo 版本

2.2.0 development

插件版本

1.2.0 development

问题描述

后端展示的评论回复顺序与插件前端展示的评论顺序不一致。

后端如图所示：

前端如图所示：

个人认为应该同后端所示，按评论创建时间从上往下正序排列。

/kind bug

希望评论编辑框同时只能打开一个

如题,希望评论编辑框实例同一个评论列表内只存在一个,打开新的编辑框时关闭之前的或者定位到当前位置显示

/kind improvement

鼠标挪到选择表情面板会变透明的问题

如图:

/kind improvement

期望可以显示具体的评论时间

如图，目前评论和回复的时间是以相对时间显示的，期望同时支持显示年月日形式的时间。

/kind feature

评论区在白天/黑夜模式切换后的样式问题

评论区在白天/黑夜模式手动切换后，样式不能跟随适配，需要手动刷新之后才能适配，这是插件的问题还是主题的问题？
如图所示，黑夜->白天之后，一些样式依旧是暗色，并且红框内的用户名因为是白色而无法查看。

后台管理的页面和文章设置不允许评论无效

给文章或者自定义页面设置不允许评论打开页面后，还是显示了评论区域并且可以发布，请问如何解决

评论列表需要显示审核状态

如图，目前支持在访客登录之后显示自己的评论，但没有显示正在审核的状态，期望添加。

增加 autosize 来自动扩充编辑区域

问题描述

评论的编辑区域默认情况下，如果输入的文本超过当前行数，将会展示一个滚动条，如下所示：

期望结果

期望能够使用 autosize 来让评论区域自动扩充，如下所示：

手机端样式问题

1.手机端Emoji列表有一半显示不出来。
2.手机端，用户登录的情况下，名字过长，或者屏幕宽度过小会造成样式混乱

请求提供原始js文件

请问源码中的comment-widget.iife.js文件为什么是压缩格式的？可以提供原始的js文件吗？谢谢。

评论组件是否可以增加 Gravatar 源设置

评论组件是否可以支持 Gravatar 源设置以便匿名用户评论时可以根据邮箱地址显示头像,或者增加没有头像时的默认头像选项设置如根据名称生成等策略

/kind feature

评论邮件提醒报错

你好，首先我不太确定这个错误和评论插件是否有关系，麻烦帮我看看；
我在测试评论邮件提醒功能的时候，在文章下留评论可以收到邮件提醒，在自定义页面留下评论，halo的日志报告了一个错误，邮件提醒未能收到，但是后台可以看到已经增加了待审核评论；
在文章下的评论后台审核时会显示属于哪一篇文章，而在自定义页面下的评论对应位置却显示未知
以下是错误代码

ERROR 7 --- [ task-22] .a.i.SimpleAsyncUncaughtExceptionHandler : Unexpected exception occurred invoking async method: public void run.halo.app.content.comment.CommentNotificationReasonPublisher.onNewComment(run.halo.app.event.post.CommentCreatedEvent)

java.util.NoSuchElementException: No value present
at java.base/java.util.Optional.orElseThrow(Unknown Source) ~[na:na]
at run.halo.app.content.comment.CommentNotificationReasonPublisher$NewCommentOnPageReasonPublisher.publishReasonBy(CommentNotificationReasonPublisher.java:161) ~[classes/:2.13.0]
at run.halo.app.content.comment.CommentNotificationReasonPublisher.onNewComment(CommentNotificationReasonPublisher.java:64) ~[classes/:2.13.0]
at java.base/jdk.internal.reflect.DirectMethodHandleAccessor.invoke(Unknown Source) ~[na:na]
at java.base/java.lang.reflect.Method.invoke(Unknown Source) ~[na:na]
at org.springframework.aop.support.AopUtils.invokeJoinpointUsingReflection(AopUtils.java:351) ~[spring-aop-6.1.4.jar:6.1.4]
at org.springframework.aop.framework.ReflectiveMethodInvocation.invokeJoinpoint(ReflectiveMethodInvocation.java:196) ~[spring-aop-6.1.4.jar:6.1.4]
at org.springframework.aop.framework.ReflectiveMethodInvocation.proceed(ReflectiveMethodInvocation.java:163) ~[spring-aop-6.1.4.jar:6.1.4]
at org.springframework.aop.framework.CglibAopProxy$CglibMethodInvocation.proceed(CglibAopProxy.java:765) ~[spring-aop-6.1.4.jar:6.1.4]
at org.springframework.aop.interceptor.AsyncExecutionInterceptor.lambda$invoke$0(AsyncExecutionInterceptor.java:113) ~[spring-aop-6.1.4.jar:6.1.4]
at java.base/java.util.concurrent.FutureTask.run(Unknown Source) ~[na:na]
at java.base/java.util.concurrent.ThreadPoolExecutor.runWorker(Unknown Source) ~[na:na]
at java.base/java.util.concurrent.ThreadPoolExecutor$Worker.run(Unknown Source) ~[na:na]
at java.base/java.lang.Thread.run(Unknown Source) ~[na:na]

【BUG】关于评论审核和邮件通知

1. 用户 A 留下评论审核后显示在了页面上，用户 B 回复了用户 A 的评论，这条回复并没有审核通过，但是用户 A 却收到了评论回复的邮件提醒，个人觉得应该改为审核通过后在进行邮件提醒

2. 希望评论后加一个“等待审核通过”的提示语，当开启评论审核后用户的评论不会直接显示在页面上，评论后没有任何提示，容易出现“我刚才是不是评论失败了”的错觉

3. 现在只有一级评论才会对站长进行邮件提醒，当用户 B 回复了用户 A 站长并不知情，这里建议回复也加上站长邮件提醒，否则不能及时审核

评论是否考虑增加富文本功能

如题，支持更多的文本样式、超链接、插入图片等功能。

用户登录弹窗添加注册功能

评论的用户登录弹窗添加注册功能

请问这个插件如何判断评论是否成功

如题，想要实现一些用户评论后的功能，但是不知道有什么办法判断评论是否成功，似乎没看到绑定相应的成功事件

新增最近评论的接口

查询所有文章评论最新的几条

{
  "page": 1,
  "size": 2,
  "total": 5,
  "items": [
    {
      "spec": {
        "raw": "222",
        "content": "222",
        "owner": {
          "kind": "Email",
          "name": "[email protected]",
          "displayName": "test",
          "annotations": {
            "website": "https://airbozh.cn"
          }
        },
        "userAgent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36 Edg/110.0.1587.41",
        "ipAddress": "127.0.0.1",
        "approvedTime": "2023-02-13T18:18:50.635073600Z",
        "priority": 0,
        "top": false,
        "allowNotification": true,
        "approved": true,
        "hidden": false,
        "subjectRef": {
          "group": "content.halo.run",
          "version": "v1alpha1",
          "kind": "Post&size=20&page=1",
          "name": "5fb642fc-a828-4149-a9ab-479baaf9dcff"
        }
      },
      "status": {
        "unreadReplyCount": 0,
        "hasNewReply": false
      },
      "apiVersion": "content.halo.run/v1alpha1",
      "kind": "Comment",
      "metadata": {
        "finalizers": [
          "comment-protection"
        ],
        "name": "5c0998a9-fae8-4b93-b442-69a6d841cc3c",
        "annotations": {},
        "version": 2,
        "creationTimestamp": "2023-02-13T18:18:50.635073600Z"
      }
    },
    {
      "spec": {
        "raw": "qweqwe",
        "content": "qweqwe",
        "owner": {
          "kind": "Email",
          "name": "[email protected]",
          "displayName": "test",
          "annotations": {
            "website": "https://airbozh.cn"
          }
        },
        "userAgent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36 Edg/110.0.1587.41",
        "ipAddress": "127.0.0.1",
        "approvedTime": "2023-02-13T18:05:04.899478700Z",
        "priority": 0,
        "top": false,
        "allowNotification": true,
        "approved": true,
        "hidden": false,
        "subjectRef": {
          "group": "content.halo.run",
          "version": "v1alpha1",
          "kind": "Post&size=20&page=1",
          "name": "5fb642fc-a828-4149-a9ab-479baaf9dcff"
        }
      },
      "status": {
        "unreadReplyCount": 0,
        "hasNewReply": false
      },
      "apiVersion": "content.halo.run/v1alpha1",
      "kind": "Comment",
      "metadata": {
        "finalizers": [
          "comment-protection"
        ],
        "name": "84569789-311b-447c-8635-42de47f507a4",
        "annotations": {},
        "version": 2,
        "creationTimestamp": "2023-02-13T18:05:04.900475Z"
      }
    }
  ],
  "first": true,
  "last": false,
  "hasNext": true,
  "hasPrevious": false,
  "totalPages": 3
}

使用 Lit Element 重构评论组件

期望能够和 https://github.com/halo-dev/plugin-search-widget 一样，使用 Lit Element 重构评论的 UI，以获得更小的体积和更好的移植性。

Ref halo-dev/plugin-search-widget#17

希望所有评论可以默认展开

如果评论再有回复，现在默认是需要再点一下的，希望能够默认评论全部展开或者加个开关之类的。另外希望评论显示时间是具体的时间而不是相对于现在的时间~

Halo2.12.4环境Earth主题1.7.1下评论链接错误问题

Halo2.12.4环境Earth主题1.7.1下评论者网站url跳转错误，点击评论者头像链接跳转的目标网址是当前站点地址+archive +评论者站点地址的格式，如图所示

PC端回复使用emoj表情包，无法选中

环境：PC端
现象：回复评论之后，再点击回复选择emoj就会出现问题：图层展示无法选中
截图：

评论无法分行

评论无法分行，添加的空格会被自动删除

想要更改输入框的提示文字，比如placeholder

可以修改吗，还是不能修改

无法注册

用户无法注册 全是一样的名字 一样的头像

增加 comment-item-meta-info 颜色变量支持

增加变量以适配主题颜色