Giter Site home page Giter Site logo

halo-comment-normal's Introduction

halo-comment-normal

适用于 Halo 的评论组件。

npm

使用指南

  1. 进入后台 -> 系统 -> 博客设置 -> 评论设置

  2. 评论模块 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/[email protected]/dist/vue.min.js"></script>
        <script src="${options.comment_internal_plugin_js!'//cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/vue.min.js"></script>
        <script src="${options.comment_internal_plugin_js!'//cdn.jsdelivr.net/npm/[email protected]/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>

说明

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

halo-comment-normal's People

Contributors

dependabot[bot] avatar johnniang avatar lilgg avatar ruibaby avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.