utterances 🔮

更新: 2024/7/5 字数: 0 字时长: 0 分钟

基于 GitHub issue 构建的轻量级评论小部件

可以将 GitHub issue用于博客评论、wiki 页面等

下面是我的博客应用utterances的效果图

数据类型与基础

运作方式

加载 utterances 时，GitHub issue 搜索API用于查找与页面关联的问题

如果我们找不到与页面匹配的问题，没问题，utterances-bot 将在有人第一次发表评论时自动创建问题

若要发表评论，用户需要授权 utterance app 使用 GitHub OAuth 流代表他们发布

或者，用户可以直接在 GitHub issue 发表评论

应用方式

官方脚本挂载

以下是如何应用utterances到你的网页上的脚本标签

javascript

<script src="https://utteranc.es/client.js" //引入Utterances
        repo="your-name/your-repo" //这指定了Utterances应该使用哪个仓库创建issue来存储评论
        issue-term="pathname" //这是Utterances用来匹配issue的搜索条件
        theme="github-light" //设定评论框使用的主题
        crossorigin="anonymous" //一个安全特性，指示浏览器在请求跨域脚本时不带任何cookies
        async>  
</script>

async: 表示脚本异步加载，不会被阻塞在当前的文档解析，可以在解析HTML时提前加载脚本

vue脚本挂载

vue

<script lang="ts" setup> 
import { onMounted } from 'vue' 

onMounted(() => { 
    const utterScript = document.createElement('script') 

    utterScript.src = 'https://utteranc.es/client.js' //指向Utterances的JavaScript文件
    utterScript.async = true 
    utterScript.crossOrigin = 'anonymous' //设置async和crossOrigin属性，确保脚本异步加载并跨域

    utterScript.setAttribute('repo', 'your-name/your-repo') //请替换为你自己的用户名和用户仓库路径
    utterScript.setAttribute('issue-term', 'pathname') //评论将基于当前页面的URL路径进行匹配
    utterScript.setAttribute('label', 'utterances')
    utterScript.setAttribute('theme', 'preferred-color-scheme') //设定评论框使用的主题

    // 通过CSS选择器.comment查询DOM元素，这是Utterances将被注入的位置
    const commentContainer = document.querySelector('.comment')
    if (commentContainer)
        commentContainer.appendChild(utterScript) 
})
</script>

<template>
    <div /> 
</template>

整个代码块定义了一个Vue组件，使用TypeScript并利用Vue 3的setup函数，以编程方式动态地创建和插入utterances评论框

这个组件在组件加载完成后，将自动挂载utterances评论系统，无需手动添加HTML脚本标记

这种方法使得集成更加灵活，并且能够更好地与Vue组件的生命周期和其他特性集成

优势

集成简单：utterances可以通过简单的JavaScript脚本标签嵌入到网页中，易于设置和集成
基于GitHub Issues：利用了现有的GitHub Issues基础设施，为开发者和用户提供了熟悉的交互界面
实时更新：与GitHub Issues同步，评论状态和讨论会实时反映在仓库的Issues页面上
安全：作为静态脚本加载，无需担心服务器端的代码执行，增强了安全性
主题定制：支持多种主题，包括暗黑模式，能够适应不同用户的偏好
跨平台：适用于各种静态站点生成器和Web框架，如Jekyll、Hexo、Vue.js等
社区支持：由于建立在GitHub上，utterances有活跃的社区支持和不断更新的特性

局限

依赖GitHub：由于完全依赖于GitHub，如果GitHub服务出现问题，utterances也会受到影响
功能限制：与传统评论系统相比，utterances的功能可能相对有限，例如缺少一些高级的评论管理和分析工具
隐私考虑：尽管utterances不收集个人信息，但所有评论都存储在GitHub Issues中，用户需要注意个人信息的暴露
自定义程度：与一些高度可定制的评论系统相比，utterances的自定义程度可能较低
可能的性能影响：加载外部脚本可能会稍微影响页面加载时间，尤其是在网络条件不佳的情况下

总结

utterances是一个现代的、基于GitHub仓库的评论系统，它提供了一些显著的优势和潜在的局限
总体而言，utterances是一个轻量级且用户友好的选择，特别是对于那些已经使用GitHub并希望在其项目或博客上添加评论系统的开发者
对于需要更多高级功能或深度定制的场景，可能需要考虑其他解决方案

如果你发现这篇指南有用，或者有改进建议，请随时联系我们或参与讨论。🎉 🎉 🎉

本站公告

utterances 🔮 ​

运作方式 ​

应用方式 ​

官方脚本挂载 ​

vue脚本挂载 ​

优势 ​

局限 ​

总结 ​

utterances 🔮

运作方式

应用方式

官方脚本挂载

vue脚本挂载

优势

局限

总结