congerh commented 4 years ago

自托管Utterances教程：基于Github Issues的轻量级博客评论系统 - ConGerh Blog

本文主要介绍基于Github Issues的轻量级博客评论系统Utterances。文章前半部分主要介绍Utterances的配置与使用，后半部分主要介绍如何利用近年来流行的Serverless化平台，自托管Utterances。

koktlzz commented 3 years ago

您好，请问如何调整评论区出现的位置呢？

congerh commented 3 years ago

Utterances会在页面中<script src="https://utteranc.es/client.js" ...></script>所在位置生成如下代码

<div class="utterances" ...>
    <iframe class="utterances-frame" ...>
    ...
    </iframe>
</div>

你可以使用.utterances和.utterances-frame选择器修改布局。

koktlzz commented 3 years ago

明白了，十分感谢！

congerh commented 3 years ago

参照博主的文章部署成功了，特地来感谢下，但是想问下博主这个评论区加载动画是如何实现的

在评论区的位置有一个“加载中”的图标，当评论区加载完成时便会覆盖此图标（图标此时不可见，看起来就像是加载完成了），你需要调整图标位置并利用z-index等确保图标被覆盖。

图标用的是Font Awesome里的fa-spinner，使用fa-pulse或fa-spin类选择器可以使它呈现旋转的动画，你也可以使用animation自定义动画。

以下是个简单的例子。 HTML：

<div class="loading">
    <i class="fa fa-spinner fa-pulse fa-2x"></i>
</div>
<script src="https://utteranc.es/client.js" ...></script>

CSS：

.loading {
    margin-top: 100px;
    z-index: -1;
}

yhrwd commented 2 years ago

emmmmmmmmmmmm

elkan1788 commented 2 years ago

想请教一下，在参考 utterances 官方站点配置后，可以正常显示评论框： Hugo NexT，但是提交时却没有任何的响应，F12查看了下出现 401 状态码，这里何呢？

BeyondSword commented 2 years ago

写得非常详细呀，回头完整地尝试一下，目前只做了最初步的配置，给博主点赞

shenweiyan commented 2 years ago

创建 GitHub App 的时候有个填写域名，请问一下这个域名是怎么和 GitHub App 进行绑定的？是在域名解析添加一个 cname 绑定到 username,github.io ？

aiba51 commented 1 year ago

用一段时间就不能用了，登录就返回博客主页，这是什么原因？

RachaelCresci commented 1 year ago

有时间试一下

chemtour commented 2 months ago

看看好用吗

congerh / comments