chore: migrate comment providers & add mobile-hero style intro

source/_posts/comment-artalk.md

@@ -0,0 +1,88 @@
+---
+title: Artalk
+date: 2024-09-20 16:48:23
+categories: 评论
+tags:
+#sticky:
+#cover:
+toc: true
+excerpt: "为 Kratos : Rebirth 主题添加 Artalk 评论系统支持"
+---
+
+## 官方介绍
+
+一款简洁的自托管评论系统
+
+- 开源仓库: https://github.com/ArtalkJS/Artalk
+- 配置文档: https://artalk.js.org/zh/guide/deploy.html
+
+## 配置说明
+
+### 引入的新文件
+
+请将下述文件放置于 source 目录中的合适位置，在此处我们使用的是 `comments` 目录。
+
+```js artalk.js
+(() => {
+  const loadComments = async () => {
+    if (typeof Artalk === "undefined") {
+      setTimeout(loadComments, 100);
+    } else {
+      const container = document.getElementById('artalk-container');
+      if (!container) {
+        return;
+      }
+      const path = container.getAttribute("data-path");
+      const siteName = document.querySelector('meta[property="og:site_name"]').getAttribute("content");
+      Artalk.init({
+        el: '#artalk-container',
+        pageKey: path,
+        server: '<您的 Artalk 服务器地址>',
+        site: siteName,
+      });
+    }
+  };
+
+  window.loadComments = loadComments;
+  window.addEventListener('pjax:success', () => {
+    window.loadComments = loadComments;
+  });
+})();
+```
+
+需要替换的内容：
+
+- `<您的 Artalk 服务器地址>` 需要替换成您的 Artalk 服务器地址，例如 `http://artalk.example.com:8080`。
+
+### 更新的配置项
+
+需要更新 `comments` ，**设置为**以下内容：
+
+```yml
+comments:
+  core:
+    enable_at:
+      - post
+      - page
+    template:
+      _shared: <div id="artalk-container" class="kr-comments lazy-load" data-path="$PATH"></div>
+```
+
+需要更新 `additional_injections` ，**加入**以下内容：
+
+```yml
+additional_injections:
+  head: |
+    <link href="<您的 Artalk 服务器地址>/dist/Artalk.css" rel="stylesheet" />
+  after_footer: |
+    <script src="<您的 Artalk 服务器地址>/dist/Artalk.js"></script>
+    <script src="/comments/artalk.js"></script>
+```
+
+需要替换的内容：
+
+- `<您的 Artalk 服务器地址>` 需要替换成您的 Artalk 服务器地址，例如 `http://artalk.example.com:8080`。
+
+假设您把上述的文件放置在 source 目录的 comments 目录中，且您的站点配置为根目录模式，那么您应当可以通过上述的路径 `/comments/artalk.js` 访问到对应的文件。如果您使用的是其他配置，您需要对应调整这个路径。
+
+当您配置完成后重启 Hexo ，您应当可以看见正在加载的 Artalk 实例。预祝您使用愉快。

source/_posts/comment-changyan.md

@@ -0,0 +1,77 @@
+---
+title: 畅言云评论
+date: 2024-09-20 16:48:23
+categories: 评论
+tags:
+#sticky:
+#cover:
+toc: true
+excerpt: "为 Kratos : Rebirth 主题添加 畅言云评论 评论系统支持"
+---
+
+## 官方介绍
+
+国内最大，操作简单，完全免费的智能评论管理平台。
+
+- 官方网站: https://changyan.kuaizhan.com/
+
+## 配置说明
+
+### 引入的新文件
+
+请将下述文件放置于 source 目录中的合适位置，在此处我们使用的是 `comments` 目录。
+
+```js changyan.js
+(() => {
+  const loadComments = async () => {
+    const container = document.getElementById('SOHUCS');
+    if (container) {
+      window.changyan.api.config({
+        appid: '<您的 APPID>',
+        conf: '<您的 Conf>',
+      });
+
+      const d = document, s = d.createElement('script');
+      s.src = 'https://changyan.kuaizhan.com/upload/changyan.js';
+      s.charset = 'utf-8';
+      s.type = 'text/javascript';
+      (d.head || d.body).appendChild(s);
+    }
+  };
+
+  window.loadComments = loadComments;
+  window.addEventListener('pjax:success', () => {
+    window.loadComments = loadComments;
+  });
+})();
+```
+
+需要替换的内容：
+
+- `<您的 APPID>` 和 `<您的 Conf>` 需要替换成您根据 畅言云评论 官方文档中描述的内容获取的信息。
+
+### 更新的配置项
+
+需要更新 `comments` ，**设置为**以下内容：
+
+```yml
+comments:
+  core:
+    enable_at:
+      - post
+      - page
+    template:
+      _shared: <div id="SOHUCS" class="kr-comments lazy-load" sid="$PATH"></div>
+```
+
+需要更新 `additional_injections` ，**加入**以下内容：
+
+```yml
+additional_injections:
+  after_footer: |
+    <script src="/comments/changyan.js"></script>
+```
+
+假设您把上述的文件放置在 source 目录的 comments 目录中，且您的站点配置为根目录模式，那么您应当可以通过上述的路径 `/comments/changyan.js` 访问到对应的文件。如果您使用的是其他配置，您需要对应调整这个路径。
+
+当您配置完成后重启 Hexo ，您应当可以看见正在加载的 畅言云评论 实例。预祝您使用愉快。

source/_posts/comment-disqus.md

@@ -0,0 +1,87 @@
+---
+title: Disqus
+date: 2024-09-20 16:48:23
+categories: 评论
+tags:
+#sticky:
+#cover:
+toc: true
+excerpt: "为 Kratos : Rebirth 主题添加 Disqus 评论系统支持"
+---
+
+{% alertbar warning "
+
+这个文档由 V2 的实现迁移过来，无法保证是否完整正确；如果遇到任何问题，欢迎随时 [开启一个 issue](https://github.com/kratos-rebirth/ecosystem/issues/new) 来跟进。
+
+" %}
+
+## 官方介绍
+
+The #1 way to build your audience
+
+- 官方网站: https://disqus.com/
+
+## 配置说明
+
+### 引入的新文件
+
+请将下述文件放置于 source 目录中的合适位置，在此处我们使用的是 `comments` 目录。
+
+```js disqus.js
+(() => {
+  const loadComments = async () => {
+    if (typeof DISQUS === "undefined") {
+      setTimeout(loadComments, 100);
+    } else {
+      const container = document.getElementById('disqus_thread');
+      if (!container) {
+        return;
+      }
+      DISQUS.reset({
+        reload: true,
+        config: function () {
+          this.page.url = container.getAttribute("data-full-path");
+          this.page.identifier = container.getAttribute("data-path");
+        }
+      });
+    }
+  };
+
+  window.loadComments = loadComments;
+  window.addEventListener('pjax:success', () => {
+    window.loadComments = loadComments;
+  });
+})();
+```
+
+### 更新的配置项
+
+需要更新 `comments` ，**设置为**以下内容：
+
+```yml
+comments:
+  core:
+    enable_at:
+      - post
+      - page
+    template:
+      _shared: <div id="disqus_thread" class="kr-comments lazy-load" data-path="$PATH" data-full-path="$PATH_FULL"></div>
+```
+
+需要更新 `additional_injections` ，**加入**以下内容：
+
+```yml
+additional_injections:
+  after_footer: |
+    <script src="https://<您的站点实例缩略名>.disqus.com/embed.js"></script>
+    <script async id="dsq-count-scr" src="https://<您的站点实例缩略名>.disqus.com/count.js"></script>
+    <script src="/comments/disqus.js"></script>
+```
+
+需要替换的内容：
+
+- `<您的站点实例缩略名>` 需要替换成您在 Disqus 设置的具体的站点实例短ID，例如 `candiblog` 。
+
+假设您把上述的文件放置在 source 目录的 comments 目录中，且您的站点配置为根目录模式，那么您应当可以通过上述的 `/comments/disqus.js` 访问到对应的文件。如果您使用的是其他配置，您需要对应调整这个路径。
+
+当您配置完成后重启 Hexo ，您应当可以看见正在加载的 Disqus 实例。预祝您使用愉快。

source/_posts/comment-disqusjs.md

@@ -0,0 +1,95 @@
+---
+title: DisqusJS
+date: 2024-09-20 16:48:23
+categories: 评论
+tags:
+#sticky:
+#cover:
+toc: true
+excerpt: "为 Kratos : Rebirth 主题添加 DisqusJS 评论系统支持"
+---
+
+{% alertbar warning "
+
+这个文档由 V2 的实现迁移过来，无法保证是否完整正确；如果遇到任何问题，欢迎随时 [开启一个 issue](https://github.com/kratos-rebirth/ecosystem/issues/new) 来跟进。
+
+" %}
+
+## 官方介绍
+
+纯前端、超轻量级的「评论基础模式」实现：使用 Disqus API 渲染评论列表
+
+- 开源仓库: https://github.com/SukkaW/DisqusJS
+- 配置文档: https://github.com/SukkaW/DisqusJS?tab=readme-ov-file#%E5%AE%89%E8%A3%85%E5%92%8C%E4%BD%BF%E7%94%A8
+
+## 配置说明
+
+### 引入的新文件
+
+请将下述文件放置于 source 目录中的合适位置，在此处我们使用的是 `comments` 目录。
+
+```js disqusjs.js
+(() => {
+  let disqusjs = null;
+  const loadComments = async () => {
+    if (typeof DisqusJS === "undefined") {
+      setTimeout(loadComments, 100);
+    } else {
+      const container = document.getElementById('disqusjs');
+      if (!container) {
+        return;
+      }
+      disqusjs = new DisqusJS({
+        shortname: '<您的站点实例缩略名>',
+        identifier: container.getAttribute("data-path"),
+        url: container.getAttribute("data-full-path"),
+        apikey: '<您的 Disqus API Key>',
+      });
+      disqusjs.render(container);
+    }
+  };
+
+  window.loadComments = loadComments;
+  window.addEventListener('pjax:before', () => {
+    // 销毁 DisqusJS 实例
+    disqusjs.destroy();
+  });
+  window.addEventListener('pjax:success', () => {
+    window.loadComments = loadComments;
+  });
+})();
+```
+
+需要替换的内容：
+
+- `<您的站点实例缩略名>` 需要替换成您在 Disqus 设置的具体的站点实例短ID，例如 `candiblog` 。
+- `<您的 Disqus API Key>` 需要替换成您从 Disqus 处申请得到的 API Key。
+
+### 更新的配置项
+
+需要更新 `comments` ，**设置为**以下内容：
+
+```yml
+comments:
+  core:
+    enable_at:
+      - post
+      - page
+    template:
+      _shared: <div id="disqusjs" class="kr-comments lazy-load" data-path="$PATH" data-full-path="$PATH_FULL"></div>
+```
+
+需要更新 `additional_injections` ，**加入**以下内容：
+
+```yml
+additional_injections:
+  head: |
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/browser/styles/disqusjs.css">
+  after_footer: |
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/browser/disqusjs.es2015.umd.min.js"></script>
+    <script src="/comments/disqusjs.js"></script>
+```
+
+假设您把上述的文件放置在 source 目录的 comments 目录中，且您的站点配置为根目录模式，那么您应当可以通过上述的 `/comments/disqusjs.js` 访问到对应的文件。如果您使用的是其他配置，您需要对应调整这个路径。
+
+当您配置完成后重启 Hexo ，您应当可以看见正在加载的 DisqusJS 实例。预祝您使用愉快。