zoukankan      html  css  js  c++  java
  • 博客使用 utterances 作为评论系统

    utterances 是一款基于 GitHub issues 的评论工具。

    相比同类的工具 gitment、gitalk 以及 disqus 评论工具,优点如下:

    1. 极其轻量
    2. 加载非常快
    3. 配置比较简单

    博之前客一直使用 disqus ,这个工具配置也比较简单,也是免费的。但是,广告多,而且加载也比较慢。

    体验了一把 utterances 后,马上切换到 utterances。

    安装 utterances

    utterances 的安装相当简单,因为出品了一个 Github App。

    首先安装这个 App ,选择要关联评论的仓库。可以选择所有仓库,也可以只选择一个仓库。选择一个仓库比较安全。

    安装完成就是配置成功了,是不是非常简单。

    使用 utterances

    在你要使用评论的地方,插入以下代码:

    <script src="https://utteranc.es/client.js"
            repo="nusr/blog"
            issue-term="pathname"
            theme="github-light"  
            crossorigin="anonymous"
            async>
    </script>
    

    nusr/blog 是你配置允许访问的仓库,格式为 user-name/repo-name

    或者动态创建 script 标签:

    <script type="text/javascript">
        (function() {
            // 匿名函数,防止污染全局变量
            var utterances = document.createElement('script');
            utterances.type = 'text/javascript';
            utterances.async = true;
            utterances.setAttribute('issue-term','pathname')
            utterances.setAttribute('theme','github-light')
            utterances.setAttribute('repo','nusr/blog')
            utterances.crossorigin = 'anonymous';
            utterances.src = 'https://utteranc.es/client.js';
            // content 是要插入评论的地方
            document.getElementById('content').appendChild(utterances);
        })();
    </script>
    

    我的博客是使用 Hugo 搭建的,可以参考我的配置 config.toml

    配置 utterances

    utterances 可以配置主题,评论映射。

    主题 theme 选项如下:

    1. github-light
    2. github-dark
    3. github-dark-orange
    4. icy-dark
    5. dark-blue
    6. photon-dark

    评论 issue-term 映射配置选项如下:

    1. pathname
    2. url
    3. title
    4. og:title
    5. issue-number
    6. specific-term

    更多配置查看 https://utteranc.es/

    首发 https://nusr.github.io/

  • 相关阅读:
    状态压缩DP 不断学习中。。。。。。
    程序员技术练级攻略(转)
    SQL Server 2008安装提示1608错误的解决方法
    Delphi字符串指针操作
    一个Python练习
    Android开发中的svn问题
    Python使用正则表达式替换源码前序号
    百度地图之Hello world !
    用Python写的一个简单的端口扫描程序
    android地图定位
  • 原文地址:https://www.cnblogs.com/stevexu/p/10808134.html
Copyright © 2011-2022 走看看