Stellar展示最新评论

twikoo

新建 twikoo_new.js

位于 theme/source/js/services/ 下

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

主题配置中引入

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

data_services:
  ...
  twikoo:
    js: /js/services/twikoo_new.js

至此配置完成

如何使用

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

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

waline

新建 waline_new.js

位于 theme/source/js/services/ 下

源自 Luoxue 的 waline_new.js

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

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

主题配置中引入

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

data_services:
  ...
  waline:
    js: /js/services/waline_new.js

如何使用

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

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

Artalk

新建 artalk_new.js

位于 theme/source/js/services/ 下

源自 Thun888 佬做的脚本

主题配置中引入

data_services:
  ...
  artalk:
    js: /js/services/artalk_new.js

如何使用

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

new_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

由于 github 没有直接给出 Discussions 的 REST API ，但是相对的给出了使用 GraphQL API 调用的方法，所以我又来垒屎山了😶‍🌫️

一键部署

点击可一键部署至 Vercel

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

环境变量

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

• GITHUB_CATEGORY_ID :你可以在 https://giscus.app/ 中填写你的仓库和分类找到 data-category-id 注意是id不是名称！
• GITHUB_TOKEN :Github 设置中新建一个 Token，权限给 repo 和 discussion (这个应该不用选，自测)

新建 giscus_new.js

位于 theme/source/js/services/ 下

主题配置中引入

data_services:
  ...
  giscus:
    js: /js/services/giscus_new.js

如何使用

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

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

More

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

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