文档章节

手把手教你使用issue作为博客评论系统

jump--jump
 jump--jump
发布于 06/18 23:40
字数 872
阅读 40
收藏 0

自从上周在阮一峰的 每周分享第 60 期 看到了可以将 GitHub 的 issue 当作评论系统,插入第三方网页的 JS 库——utterances。我就对此“魂牵梦绕”。个人博客使用的是VuePress

TLDR (不多废话,先看效果)

之前是使用了 Valine 作为博客的评论系统。

valine

下图是改为 utterances 风格。

utterances

utterances 介绍及使用

utterances 是基于github issue,拥有多种主题的开源免费小组件。

1.首先我们所需要的 github 存储库必须是公开的,而不是私有的,这样我们的读者才可以查看以及发表评论。

2.我们必须在 github 上进行安装 utterances,首先我们访问 utterances应用程序 然后点击 Install 按钮进行安装。

index

3.在这里可以选择可以关联的存储库,可以选择我们所拥有的库(也包括未来建立的库)或者某一个仓库,这里我们只选择某一个需要进行评论的库,这样比较好。

select

4.安装完成即可,随后我们访问utterances应用程序就不再是安装而是是执行配置项目。

index2

select2

5.此时服务端配置已经完成,现在我们可以进行客户端的操作,也就是 blog 端。在blog端我们只需要添加以下这段脚本就可以直接运行。

<script 
// 加载的客户端脚本
    src="https://utteranc.es/client.js"
// repo 就是访问的仓库,格式 用户名/仓库名
// 个人就是 repo="wsafight/personBlog"
        repo="[ENTER REPO HERE]"

// 选定的当前blog 与 issue 之间的关系
// 个人使用的是不会自动创建的 issue-number,每个issue都有自己的number。该选项是使用特定的issue
        issue-term="pathname"
// 主题为  github-light 还有其他主题可以选择        
        theme="github-light"
        crossorigin="anonymous"
        async>
</script>

6.因为我的博客是采用 VuePress,所以在 markdown 中是无法使用 script 脚本的。我们就需要编写写一个 vue 组件。(组件的文件路径为 [blog name]/.vuepress/components/)

// Utterances 组件
<template>
    <div id="comment"></div>
</template>
<script>
export default {
  name: 'Utterances',
  props: {
    // 传入的 issue-number  
    id: Number
  },
  methods: {
    initValine () {
        // 建立脚本以及属性
        const utterances = document.createElement('script');
        utterances.type = 'text/javascript';
        utterances.async = true;
        utterances.setAttribute('issue-number', this.id)
        utterances.setAttribute('theme','github-light')
        utterances.setAttribute('repo',`wsafight/personBlog`)
        utterances.crossorigin = 'anonymous';
        utterances.src = 'https://utteranc.es/client.js';

        // comment 是要插入评论的地方
        window.document.getElementById('comment').appendChild(utterances);

    }
  },
  mounted: function(){
    // 每次挂载时候,进行初始化
    this.initValine()
  }
}
</script>

7.最后。在 md 文档中直接使用上面编写的组件

## 参考资料
[高性能JS-DOM](https://www.cnblogs.com/libin-1/p/6376026.html)   
[imba 性能篇](http://imba.io/guides/advanced/performance)

// 可以在 md 文档中直接使用组件
<Utterances :id="1"/>

utterances其他配置项

主题 Theme 选项如下,我们可以选择各色主题:

  • Github Light
  • Github Dark
  • Github Dark Orange
  • Icy Dark
  • Dark Blue
  • Photon Dark

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

  • pathname
  • url
  • title
  • og:title
  • issue-number
    issue-term="1"
    特定number的issue,不会自动创建,个人使用该方案
  • specific-term

鼓励一下

如果你觉得这篇文章不错,希望可以给与我一些鼓励,在我的 github 博客下帮忙 star 一下。 博客地址

参考文档

utteranc 文档
博客使用 utterances 作为评论系统

© 著作权归作者所有

jump--jump

jump--jump

粉丝 13
博文 8
码字总数 12473
作品 0
杭州
程序员
私信 提问
手把手教你完成一个数据科学小项目(8):Emoji提取与分布图谱

前言 请先阅读“中国年轻人正带领国家走向危机”,这锅背是不背? 一文,以对“手把手教你完成一个数据科学小项目”系列有个全局性的了解。 本系列代码统一开源在GitHub:DesertsX/gulius-p...

古柳_Deserts_X
2018/08/29
0
0
Angular 实战教程 - Today 系列文章目录

Angular 实战教程 - Today 系列文章目录 发布于 10:15 文章被以下专栏收录

小温
2018/07/18
0
0
手把手教你完成一个数据科学小项目(9):情感分析与词云

前言 请先阅读“中国年轻人正带领国家走向危机”,这锅背是不背? 一文,以对“手把手教你完成一个数据科学小项目”系列有个全局性的了解。 本系列代码统一开源在GitHub:DesertsX/gulius-p...

古柳_Deserts_X
2018/09/04
0
0
用 GitHub Issue 取代多说,是不是很厉害?

摘要: 别了,多说,拥抱Gitment。 2017年6月1日,多说正式下线,这多少让人感觉有些遗憾。在比较了多个博客评论系统,我最终选择了Gitment作为本站的博客评论系统: UI简洁,适合我的博客风格...

Fundebug
2017/06/21
0
0
用ISSO自建静态博客的评论系统

自从多说倒闭之后,静态博客的博主们就比较难受了——没有评论的博客,如死水一潭,了无生机。 有人迅速切换到了网易云跟帖,结果不久就传来也要关门的消息;倒是友言还在苟延残喘,我前段时...

weishu
2017/08/30
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Linux的基本命令

目录的操作命令(增删改查) 增: mkdir 目录名称; 查: ls 可以看到该目录下的所有的目录和文件 ls -a,可以看到该目录下的所有文件和目录,包括隐藏的 ls -l,可以看到该目录下的所有目录和...

凹凸凸
今天
2
0
在古老unix中增加新用户

Installing 4.3 BSD Quasijarus on SIMH 目标:要在4.3BSD中新增加用户dmr,指定目录/home/dmr,uid为10 gid=31(guest组,系统已建立) 4.3BSD还没有adduser或useradd 直接修改/etc/passwd...

wangxuwei
今天
2
0
Bootstrap(六)表单样式

基本样式 所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好...

ZeroBit
昨天
3
0
SSL 证书格式转换

SSL 证书格式转换 不同服务器情况下,需要不同的证书格式。 比如 pem 转 pfx。 pem在window 平台下可以导入,但是无法正常使用。 需要转换成pfx。 推荐在线转换工具,由中国数字证书网站提供...

DrChenXX
昨天
2
0
HAProxy

xx

Canaan_
昨天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部