hexo-discuss

1.0.0-beta.0 • Public • Published

Logo

一款简单,安全,免费的评论系统 | A simple, safe, free comment system

Docs Version Dev Version Downloads QQ MIT License

Install

npm install hexo-discuss --save

Configure

将配置文件写入 Hexo 的配置文件_config.yml

# Discuss 评论系统
## https://discuss.js.org/
discuss:
  enable: true # 是否启动评论系统
  siblingEl: ".pagination-post" # 如果你没有适合‘el’挂载的 DOM 元素,你可以在这里创建一个
  el: "#Discuss-Comments" # 评论挂载的 DOM 元素
  serverURLs: # 评论服务端地址
  location: # 注入的位置
  page: # 注入哪些页面
  ## 加载的js版本,建议把@latest替换成指定版本如:@0.2.5
  source: https://cdn.jsdelivr.net/npm/discuss@latest/dist/Discuss.js
  ## 更多配置: https://discuss.js.org/Quick-Start.html#%E5%AE%A2%E6%88%B7%E7%AB%AF-client
  options:
  # 举例
  # options:
  #   path: location.pathname
  #   lang: en_US

siblingEl

假设你的 hexo 博客 html 基本结构是如下

<html>
  <head>
    <!-- ... -->
    <title>xxx</title>
    <!-- ... -->
  </head>
  <body>
    <nav>
      <!-- ... -->
    </nav>
    <main>
      <article>
        <div class="post-title"></div>
        <div class="post-meta"></div>
        <div class="post-content"></div>
        <div class="post-copyright"></div>
        <!-- 该标签可能不存在 <div class="post-comment"></div> -->
        <!-- ... -->
      </article>
    </main>
    <footer>
      <!-- ... -->
    </footer>
  <body>
</html>

如上 html 结构,你的网站没有<div class="post-comment"></div>可以存放评论的 DOM 元素怎么办?

我们提供了一个配置选项siblingEl,可以帮你自动生成一个用于存放评论的 DOM 元素

如果你的 hexo 主题已有预留给评论系统挂载的 DOM 元素,那么可以忽略该配置,留空即可

# _config.yml
# Discuss 评论系统
## https://discuss.js.org/
discuss:
  enable: true
  siblingEl: ".post-copyright" # 使用css的class选择器写法,选择某个 DOM 元素
  el: "#Discuss-Comments" # 评论需要挂载的 DOM 元素 (可以是id选择器,也可以是class选择器)
  # 为了易于理解,已将其它配置省略

最后执行hexo g的到的 html 结构如下

会自动帮你创建一个 DOM 元素

<html>
  <head>
    <!-- ... -->
    <title>xxx</title>
    <!-- ... -->
  </head>
  <body>
    <nav>
      <!-- ... -->
    </nav>
    <main>
      <article>
        <div class="post-title"></div>
        <div class="post-meta"></div>
        <div class="post-content"></div>
        <div class="post-copyright"></div>
        <div id="Discuss-Comments"></div>
        <!-- 该标签可能不存在 <div class="post-comment"></div> -->
        <!-- ... -->
      </article>
    </main>
    <footer>
      <!-- ... -->
    </footer>
  <body>
</html>

location

location选项可以让评论插入到网站的哪个位置

默认值 描述
head_begin 注入在 <head> 之后
head_end 注入在 </head> 之前
body_begin 注入在 <body> 之后
body_end 注入在</body> 之前

page

page选项可以让评论插入到网站的哪哪些页面

默认值 描述
default 注入到每个页面
home 只注入到主页(is_home()true 的页面)
post 只注入到文章页面(is_post()true 的页面)
page 只注入到独立页面(is_page()true 的页面)
archive 只注入到归档页面(is_archive()true 的页面)
category 只注入到分类页面(is_category()true 的页面)
tag 只注入到标签页面(is_tag()true 的页面)
自定义的 layout 名称 如果你知道是什么的话,你可以填写该选项,如果你不知道,那么很可能该插件无法注入评论系统

Dependencies (0)

    Dev Dependencies (0)

      Package Sidebar

      Install

      npm i hexo-discuss

      Weekly Downloads

      2

      Version

      1.0.0-beta.0

      License

      MIT

      Unpacked Size

      9.7 kB

      Total Files

      4

      Last publish

      Collaborators

      • lete114