实装博客评论区的二三事 | 一片痴心俱成灰
logo

一片痴心俱成灰

实装博客评论区的二三事

2022-04-29 Views 砺石录603字3 min read繁

有的人开完博客半年才开放评论，这是为什么呢，小编也不知道。

前不略

无意中发现可以引用Mastodon嘟文串充当博客评论区[1]，我：这就是我想要的评论区！！

但是捏但是捏，在hugo上成功设置完，发现人家比较愚笨，不知道怎么在Gridea上实现……于是又翻了翻有没有更符合我口味的选择[2]，Matrix协议的Cactus Comments感觉也不错。可是我给bot发消息它不回复我！按经验帖[3]说的应该会提示一句Created site <YOUR-SITE-NAME> for you 🚀才对……

那好吧

选择比较成熟的Waline安装！

主要参考了以下两篇文章：

这边采用的服务分别是
数据库：MongoDB
服务端：Railway

修改显示部分

<script src="https://cdn.jsdelivr.net/npm/@waline/client@2.0.0"></script>
<script>
const locale = {
	placeholder: '通过审核的评论才会显示^^',
	sofa: '这里空荡荡的……',
};
    Waline({
      // 前略
	  emoji: [
	  'https://cdn.jsdelivr.net/gh/norevi/blob-emoji-for-waline@2.0/blobs-gif',
	  'https://cdn.jsdelivr.net/gh/norevi/blob-emoji-for-waline@2.0/blobs-png',
  	  'https://cdn.jsdelivr.net/gh/norevi/waline-blobcatemojis@1.0/blobs',
	  'https://cdn.jsdelivr.net/gh/walinejs/emojis/alus',
	  'https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/weibo',
	  'https://cdn.jsdelivr.net/gh/yominokuni/my-emoji-for-waline@latest/acfun_emoji/',
	  'https://cdn.jsdelivr.net/gh/yominokuni/my-emoji-for-waline@latest/%E5%92%AA%E5%AD%90%E9%B1%BC/',
	  'https://cdn.jsdelivr.net/gh/yominokuni/my-emoji-for-waline@latest/penchan/',
	  'https://cdn.jsdelivr.net/gh/yominokuni/my-emoji-for-waline@latest/poinko/',
	  ],
	  wordLimit: 500,
	  path: location.pathname,
      locale,
});

</script>

    :root {
  /* 主题色 */
  --waline-theme-color: #F3969A;
  --waline-active-color: #FFA3A3;
  --waline-info-bgcolor: #FAF9F7;
  --waline-bgcolor-light: #FAF9F7;
  --waline-disable-bgcolor: #FAF9F7;
  --waline-badge-color: #42C7AD;
  dark: auto;
}
.wl-power a{
    color: var(--waline-theme-color)!important;
}	
.wl-nick {
color: #e42b2b!important;
}

.wl-content .vemoji, .wl-content .wl-emoji  {
        width: auto!important;
		max-width: 8em !important;
        max-height: 4.5em !important;
		margin:.5em;
	}
.wl-emoji-popup .wl-tabs {
		height: 2.5em !important;
}
.wl-emoji-popup .wl-emoji {
    max-width: 2em !important;
    max-height: 3.5em !important;
}
.wl-card {
    border-bottom: 0;
}
.wl-card .wl-quote {
    border-left: 0;
}
.wl-cards .wl-user .verified-icon {
 display:none;
}

.wl-editor {
    font-family: 'Noto Serif SC';
}
.wl-header input {
    font-family: 'Noto Serif SC';
}

v2版本中修改默认头像是在环境变量里。
设置GRAVATAR_STR 为https://seccdn.libravatar.org/avatar/{{mail|md5}}?d=retro即可。

20220510更新，把版本号指定了，免得一更新css又废了【

参考链接：

  1. Adding comments to your static blog with Mastodon ↩︎

  2. Various ways to include comments on your static site ↩︎

  3. Cactus Comments: a solution respecting privacy for the websites built with Hugo ↩︎

EOF