有一天我看到了passivestar的博客，发现他把 Bluesky 的评论集成到了博客内，但是看到文末项目的使用对我来说太过复杂和繁琐。
因此我在Lou的启发下，想结合Hugo模板尽量方便地在网站内使用
接下来我以当前使用的 Stack 主题为例
首先我想向原先的评论系统一样在正文下方单开一个card，复制 single.html 到 layouts\_default，并在28至34行处插入代码
single.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
| {{ define "body-class" }}
article-page
{{/*
Enable the right sidebar if
- Widget different from 'TOC' is enabled
- TOC is enabled and not empty
*/}}
{{- $HasWidgetNotTOC := false -}}
{{- $TOCWidgetEnabled := false -}}
{{- range .Site.Params.widgets.page -}}
{{- if ne .type "toc" -}}
{{ $HasWidgetNotTOC = true -}}
{{- else -}}
{{ $TOCWidgetEnabled = true -}}
{{- end -}}
{{- end -}}
{{- $TOCManuallyDisabled := eq .Params.toc false -}}
{{- $TOCEnabled := and (not $TOCManuallyDisabled) $TOCWidgetEnabled -}}
{{- $hasTOC := ge (len .TableOfContents) 100 -}}
{{- .Scratch.Set "TOCEnabled" (and $TOCEnabled $hasTOC) -}}
{{- .Scratch.Set "hasWidget" (or $HasWidgetNotTOC (and $TOCEnabled $hasTOC)) -}}
{{ end }}
{{ define "main" }}
{{ partial "article/article.html" . }}
<!-- 在文章内容和页脚之间插入评论系统 -->
{{ with .Params.bsky_post }}
{{ if . }}
{{ partial "comments/bsky-comments.html" . }}
{{ end }}
{{ end }}
{{ if .Params.links }}
{{ partial "article/components/links" . }}
{{ end }}
{{ partial "article/components/related-content" . }}
{{ if not (eq .Params.comments false) }}
{{ partial "comments/include" . }}
{{ end }}
{{ partialCached "footer/footer" . }}
{{ partialCached "article/components/photoswipe" . }}
{{ end }}
{{ define "left-sidebar" }}
{{ if (.Scratch.Get "TOCEnabled") }}
<div id="article-toolbar" style="position: sticky;top: 5px;z-index: 0;">
<a href="{{ .Site.BaseURL | relLangURL }}" class="back-home">
{{ (resources.Get "icons/back.svg").Content | safeHTML }}
<span>{{ T "article.back" }}</span>
</a>
</div>
{{ else }}
{{ partial "sidebar/left.html" . }}
{{ end }}
{{ end }}
{{ define "right-sidebar" }}
{{ if .Scratch.Get "hasWidget" }}{{ partial "sidebar/right.html" (dict "Context" . "Scope" "page") }}{{ end}}
<!-- {{/* {{ $topImg := resources.Get ("img/cover.jpg") }}
{{ $topImg := $topImg.Resize "40x" }}
<a id="back-to-top" href="#">
<img src="{{ $topImg.RelPermalink }}" />
</a> */}} -->
{{ end }}
|
在layouts\partial\comments处创建文件 bsky-comments.html
1
2
3
| <script type="module" src="https://esm.sh/gh/loueed/[email protected]/comments"></script>
<!-- <script type="module" src="https://cdn.jsdelivr.net/gh/Siya-33/[email protected]/js/bsky-comments.js"></script> -->
<bsky-comments post="{{ . }}" ></bsky-comments>
|
第一行是原作者的js文件，第二行是我稍微修改之后的，你也可以下载后放到自己的仓库里去
我主要调整了些style，以及给具体评论也添加了链接跳转
之后在文章开头的参数里加上一行bsky_post: <data-bluesky-uri>
这个uri地址你可以从帖子的嵌入代码里找
如果你只想修改js文件中的几个style参数的话，以下可以作为参考，具体html的类名建议自己F12查看bsky-comments.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
| <!-- <script type="module" src="https://esm.sh/gh/loueed/[email protected]/comments"></script> -->
<script type="module" src="https://cdn.jsdelivr.net/gh/Siya-33/[email protected]/js/bsky-comments.js"></script>
<bsky-comments post="{{ . }}" ></bsky-comments>
<style>
bsky-comments {
--background-color: var(--card-background);
--text-color: var(--card-text-color-main);
--link-color: var(--code-text-color);
--comment-meta-color: #5E9595;
--error-color: red;
--reply-border-color: transparent;
--button-background-color: var(--code-background-color);
--author-avatar-border-radius: 100%;
}
</style>
<!-- custom style -->
<!-- <script>
document.addEventListener('DOMContentLoaded', function() {
const bskyComments = document.querySelector('bsky-comments');
if (bskyComments) {
const style = document.createElement('style');
style.textContent = `
comments {
border-radius: var(--card-border-radius);
}
`;
bskyComments.shadowRoot.appendChild(style);
}
});
</script> -->
|
目前还没将这个功能pull到原主题，因为和原来的评论系统有点割裂，需要单独加一个参数而不是放到provider里，暂时好像只能这样做。
还有点可惜的是这个js现在不能显示该帖子的点赞数，过滤评论之类的功能都没有提及的那个项目完善，不过对我来说小巧易用就行。
好处也有，以前的文章先不用管了哈哈
。。。第一次部署的时候把bluesky简写成bsky了🥲
致谢
Cover:負けヒロインが多すぎる！
BlueSky API文档
@Lou
@passivestar
@Cory Zue
