一款简单,安全,免费的评论系统 | A simple, safe, free comment system
Install
npm install hexo-discuss --save
Configure
将配置文件写入 Hexo 的配置文件_config.yml
discuss:
enable: true
siblingEl: ".pagination-post"
el: "#Discuss-Comments"
serverURLs:
location:
page:
source: https://cdn.jsdelivr.net/npm/discuss@latest/dist/Discuss.js
options:
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>
</article>
</main>
<footer>
</footer>
<body>
</html>
如上 html 结构,你的网站没有<div class="post-comment"></div>
可以存放评论的 DOM 元素怎么办?
我们提供了一个配置选项siblingEl
,可以帮你自动生成一个用于存放评论的 DOM 元素
如果你的 hexo 主题已有预留给评论系统挂载的 DOM 元素,那么可以忽略该配置,留空即可
discuss:
enable: true
siblingEl: ".post-copyright"
el: "#Discuss-Comments"
最后执行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>
</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 名称 | | 如果你知道是什么的话,你可以填写该选项,如果你不知道,那么很可能该插件无法注入评论系统 |