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} 为自己的实际地址和站点名。

Giscus

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

一键部署

点击可一键部署至 Vercel

你可以 fork 我的仓库后部署至 vercel ，至于 vercel 的访问问题，应该不用我多教了叭。

不知道怎么把 reply 提出来，欢迎 PR Enjoy！

环境变量

设置 vercel 的环境变量，都是必选，设置完记得重新部署。

• GITHUB_CATEGORY_ID :你可以在 Giscus 中填写你的仓库和分类找到 data-category-id 注意是id不是名称！
• GITHUB_TOKEN :Github 设置中新建一个 Token，权限给 repo （似乎不给也行？）主要是不用 Token 的话 Github 对访问频率的限制会比较大。

新建 giscus_latest_comment.js

位于 theme/source/js/services/ 下

主题配置中引入

data_services:
  ...
  giscus:
    js: /js/services/giscus_latest_comment.js

如何使用

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

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

More

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

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

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

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