Stellar展示最新评论

twikoo

新建 twikoo_latest_comment.js

位于 theme/source/js/services/ 下

基于 1.27.0 ，写的一坨，佬轻喷😭

主题配置中引入

Stellar 1.27.0 版本，内置服务配置转移到 data_services 中，在主题配置文件的 data_services 下引入脚本

data_services:
  ...
  twikoo:
    js: /js/services/twikoo_latest_comment.js

至此配置完成

如何使用

在 _data/widgets.yml 中创建小组件，示例

latest_comment:
  layout: timeline
  title: 最新评论
  api: https://comment.weekdaycare.cn # 此处为 Twikoo 函数，末尾不要加 /
  type: twikoo
  limit: 16 # 限制获取数量，默认为 10
  hide: reply # 是否隐藏回复，不填默认不隐藏

waline

新建 waline_latest_comment.js

位于 theme/source/js/services/ 下

源自 Luoxue 的 waline_latest_comment.js

使用方法同 twikoo(没有reply参数) 但是有一个小小的 bug 就是他不像 twikoo 一样可以返回纯文本数据，他返回的是一段 HTML，所以评论里的表情就没有约束显得贼大，佬在下面给了 CSS 调整方案

虽然 js 里可以转化成纯文本，但是不够 elegant！（我写的代码也是一坨

主题配置中引入

Stellar 1.27.0 版本，内置服务配置转移到 data_services 中，在主题配置文件的 data_services 下引入脚本

data_services:
  ...
  waline:
    js: /js/services/waline_latest_comment.js

如何使用

在 _data/widgets.yml 中创建小组件，示例

latest_comment:
  layout: timeline
  title: 最新评论
  api: xxxxxxx # 此处为 Waline 函数，末尾不要加 /
  type: waline
  limit: 16 # 限制获取数量，默认为 10

Artalk

新建 artalk_latest_comment.js

位于 theme/source/js/services/ 下

源自 Thun888 佬做的脚本

主题配置中引入

data_services:
  ...
  artalk:
    js: /js/services/artalk_latest_comment.js

如何使用

在 _data/widgets.yml 中创建小组件，示例

latest_comment:
  layout: timeline
  title: 最新评论
  api: https://{artalk_url}/api/v2/stats/latest_comments?site_name={sitename}
  type: artalk
  limit: 16 # 限制获取数量，默认为 10

自行替换其中的 {artalk_url} {sitename} 为自己的实际地址和站点名。

基于 Github 的评论区

使用 discussion 或者 issue 作为博客评论的都可以用，由于 github 没有直接给出 Discussions 的 REST API ，但是相对的给出了使用 GraphQL API 调用的方法，所以我又来垒屎山了😶‍🌫️

新建 action 工作流

Fork 我的仓库（给个小星星最好啦🥰）

现在也不用 Fork 了，我已经将写好的 Action 发布到 Marketplace 中了。

找到你的评论区仓库，然后在仓库中新建一个 workflow 工作流位于 .github/workflows/comment.yml ，写入以下信息。

name: Fetch Comments

on:
  issue_comment:
    types: [created, edited, deleted]
  discussion_comment:
    types: [created, edited, deleted]

jobs:
  fetch_comments:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout repository
        uses: actions/checkout@v3

      - name: Fetch Comments
        uses: weekdaycare/issue-discussion-generator@v1.0
        with:
          discussion_enable: # 'true'
          issue_enbale: # 'true'
          category_id: # 'DIC_kwDONhvWjc4ClfPP' 
          limit: '20' # 默认为 10
          github_token: ${{ secrets.GITHUB_TOKEN }}
          github_repo: ${{ github.repository }}

      - name: Git config
        run: |
          git config --global user.name 'github-actions[bot]'
          git config --global user.email 'github-actions[bot]@users.noreply.github.com'
  
      - name: Commit changes
        run: |
          cd output
          git add .
          git commit -m "📬 $(date +"%Y年%m月%d日-%H时%M分") GitHub Action 推送"
          git push --force https://x-access-token:${{ secrets.GITHUB_TOKEN }}@github.com/${{ github.repository }}.git HEAD:comment

你只需要配置 4 个选项，如果你是使用基于 discussion 的评论区如 Giscus，请将 discussion_enable 设置为 'true' 同时填入对应的 category_id ，如果你是使用基于 issue 的评论区如 beaudar utterances，请将 issue_enbale 设置为 'true' ，limit 限制获取的数量

GITHUB_CATEGORY_ID :你可以在 https://giscus.app/ 中找到 data-category-id 注意是 ID 不是名称！

然后打开仓库的 Action 读写权限，抓取到的文件会在 comment 分支中。

新建 github_latest_comment.js

位于 theme/source/js/services/ 下

主题配置中引入

data_services:
  ...
  github:
    js: /js/services/github_latest_comment.js

如何使用

在 _data/widgets.yml 中创建小组件，示例

latest_comment:
  layout: timeline
  title: 最新评论
  api: https://raw.github.com/xxx # 你的 json 文件地址
  type: giscus
  limit: 16 # 限制获取数量，这是客户端，刚刚是服务端

End

至此，已经集成了大部分常用的评论区了，Waline Twikoo Artalk Giscus Beadur Utterances，本来只是从今年3月份开始为twikoo适配的，没想到后面越来越多，到现在基本已经支持常用评论区，其实代码比较简单，没什么技术含量，但是做出来的时候还是很有成就感的。历时9个月，这篇帖子也终于要完结了，应该不会有大的更新了（出bug的话另说），如果你有更多好玩想法，欢迎在评论区和我交流，也可以在评论区留下你的成功案例，我会去瞄瞄的

More

关于共用评论的链接跳转问题，没有想到好的解决方法。多个页面共用应该跳转到哪一个页面？如何获取该页面的url？

客户端在请求评论的时候会传入 comment_id ，在共用评论的页面 comment_id 为我们手动设置的值。所以目前的方案是在不改变原来评论请求代码的情况下，将 comment_id 设置为指定的url路径，比如 comment_id: '/posts/1/index.html' ，但是这个方法有个坏处是对于已有的评论的，我们需要手动去数据库更改 url 十分麻烦。

感谢各位大佬们的脚本制作以及反馈问题的朋友，有你们在社区就更加活跃！

这个时候就不得不拿出我的老图了