• 博客使用 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/

  • 相关阅读:
    spring-102-spring全注解快速实现事务
    spring-101-springAOP
    spring-201-springmvc基于MappingJacksonValue 实现JSONP
    啥是JSONP---转
    request.getSession(boolean create)的正确使用姿势
    spring-003-Resource资源
    spring-002-Ioc bean配置
    spring-001-Ioc 顶层容器
    为企业提供免费代码安全扫描服务(每月限一次)
    圆满完成平安科技Web安全与App应用安全测试培训!
  • 原文地址:https://www.cnblogs.com/stevexu/p/10808134.html
Copyright © 2020-2023  润新知