✦ 粉刷匠04 ✦ 布局样式更新

1509字
阿拉霍洞开
包括评论通知、域名邮箱、博文固定目录、主页列表样式修改等

都要忘记自己改过什么了还好有草稿……下次一定不攒了。

Waline 评论迁移

因为修改了一些文章的 slug 导致评论看不到了！在 爱海 这里看到评论迁移，迅速打开 Leancloud 修改了更新后的 url，评论又回来啦～

waline 的评论追踪的是博客链接，一旦 URL 更换，评论就会无法显示，但此时的评论依旧还储存在数据库里，管理员后台也可以看到，因此我们可以在 Leancloud 的【数据存储→结构化数据→comment】里修改每条评论所指向的 URL 地址。

Waline 评论通知

我设置的是 telegram，按照 官方文档 配置好环境变量，然后记得重新部署。（之前折腾好多遍都收不到通知，搜索一番发现是更改环境变量的话需要重新部署！）

如何重新部署：前往项目的 Deployments 面板，点击最近的 Production 记录进入部署详情，Visit 按钮右边的三个点，点击 Redeploy 即可。

域名邮箱

Dynadot 上可以快速注册域名对应的邮箱，但需要进行一些配置才能收到邮件，跟随 Dynadot 官方步骤遇到的问题是 CNAME 与 TXT 冲突，换成 ANAME 就好了。解决办法来自这里： CNAME 记录与 MX/TXT 记录冲突的解决方法

再用域名邮箱去注册一下 gravatar ，设置一个头像，就可以在评论区矫捷地四处流窜了 (‘ω’✌︎ )

文章外部链接后添加小图标

新建 layout/_default/_markup/render-link.html，根据 Hugo Stack主题装修笔记 中的 reference 添加了代码，更改了 svg 图标，图标来自 heroicons 。

<a href="{{- .Destination | safeURL -}}"{{ with .Title}} title="{{- . -}}"{{ end }} target="_blank">{{- .Text | safeHTML -}}{{if strings.HasPrefix .Destination "http" -}}

<span style="white-space: nowrap;">

<svg width="em" height="em" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-6">

<path stroke-linecap="round" stroke-linejoin="round" d="m4.5 19.5 15-15m0 0H8.25m11.25 0v11.25" />

</svg>

</span>

{{end }}

</a>

添加右侧固定目录

思路就是制作右侧目录块，在文章主体范围内进行引用，并规定布局。

修改 _default/single.html，如果还有其他规定博文样式的文件记得也要修改。

<div class="article-content">
<div class="content" itemprop="articleBody">

{{ .Content}}

</div>
{{ if .Site.Params.tocInline }}
<div class="toc-right" id="toc">
<div class="toc-title">ㆆᵕㆆ…</div>
{{ partial "toc.html" . }}
</div>

{{ end }}

</div>

<style> 

.article-content {
display: flex; /* 设置布局 */
gap: 20px;
}

.content{

flex: 3;
position: relative; /* 确保内容区的定位 */
min-width: 0;
margin-right: 20px;
}

.toc-right {
flex: 1;
position: sticky;
top: 0; /* TOC 从页面顶部开始固定 */
align-self: flex-start; /* 防止 TOC 被其他内容推动 */
min-width: 0;
}

</style>

layouts 新建 partials/toc.html，使用以下来自 GPT 的代码：

<div class="toc">

{{ .TableOfContents }}

</div>

<style>

.toc {
font-size:rem;
line-height:1.1rem;
}

.toc-title {
font-size: 1.3em; /* 或其他你想要的字号 */
font-weight: bold; /* 使文字加粗 */
color:#5A68DF;
margin-top: 1em;
}

.toc-right {
margin-left: 10px;
}

.toc-right a{
text-decoration: none;
color:#525ecb;
}

/* 改变悬停时链接的颜色 */

.toc a:hover {
color:lighten($color-accent-2, 10%);
}

.toc ul {
padding-left: 10px;
font-size: 1.1em;
list-style-type: none;
list-style-position:inside;
}

.toc ul ul { //三级目录
padding-left:15px;
margin-top:10px;
font-size:em;
}


@media (max-width: 768px) {
.toc-right {
display: none; # 移动端不显示
}

}

</style>

图片轮播有时会被边界切割，问题不大之后想起来再修 x

主页列表样式修改

之前主页列文章只有日期和标题，想要和 archive 界面不一样。

credit to Chatgpt 和 Fuji 主题 。

layouts 新建 partials/preview.html 和 post-meta.html，代码分别为：

<div class="post-preview">

<h1 class="post-item">

<span><a href="{{ .Permalink }}">{{ if .Title }} {{- .Title -}} {{ else }} {{print "Untitled" -}}{{ end }}</a></span>

</h1>

<div class="post-meta">
{{ partial "post-meta.html" . }}
</div>

<div class="post-description">
{{ .Description }}
</div>
</div>


<style>

.post-preview{
margin:75px 20px;
}

.post-description{
font-size: em;
}

</style>

<div class="post-meta-container">

<span class="post-meta-item">

<i class="fas fa-paw"></i>{{ .Date.Format "2006-01-02" }}

</span>


<span class="post-meta-item">

<i class="fa fa-fish"></i>{{ .WordCount }} 字

</span>


{{ if not .Site.Params.hideNoTagList }}

{{ if .Params.tags }}

<span class="post-meta-item">

<i class="fas fa-hashtag"></i>

{{ range .Params.tags }}

<a href="{{ "tags/" | relURL }}{{ . | urlize }}">{{ . }}</a>

{{ end }}

</span>

{{ end }}

{{ end }}


</div>


<style>

.post-meta-container{
margin: 10px 0;
color:#71717a;
padding-left: 0px;
}

.post-meta-item {
margin-right: 20px; /* 控制每个meta项之间的间距 */
font-size:em;
}

.post-meta-item a {
color: #71717a; /* 标签链接的颜色 */
}

.post-meta-item i {
margin-right: 5px; /* 控制图标与文本之间的间距 */
}

</style>

在 index.html 中添加：


{{ $showAllPostsOnHomePage := false }}

{{ if (isset .Site.Params "showallpostsonhomepage") }}

{{ $showAllPostsOnHomePage = .Site.Params.ShowAllPostsOnHomePage }}

{{ end }}


{{ $mainPosts := (sort ( where site.RegularPages "Type" "in" site.Params.mainSections ) "Date" "desc") }}

<div class="preview-list">

{{ range (.Paginate $mainPosts).Pages }}

{{ partial "preview.html" . }}

{{ end }}

</div>


{{ partial "pagination.html" . }}

然后在 config.toml 中设置 paginate = 3，即一页显示几篇。可能也不用引用 pagination.html，应该可以直接设置显示数量，但暂时不想改了先这样！

友链界面

抄了 小鱼的装修笔记 ！(⸝⸝⸝･ - ･⸝⸝⸝)◞♥︎ 简单修改了一下颜色和样式，喜欢每次刷新都是不同的顺序。

Umami 访问统计

跟官方文档做不知道为什么总出错，先用简单的 Umami Cloud ，注册登陆添加地址，复制 tracking code 粘贴到 baseof.html 中，保存刷新，出现统计数据，完成！

虽然几乎没有看过统计但后来又根据 这篇博文 在 vercel 上配置好了。

ㆆᵕㆆ…