修bug
之前给分类卡片做放大动画效果的时候，发现左边和上边会超出框外导致水平裁切（好难描述的情况已尽力），于是当时问了AI怎么解决，最后写了overflow: visible，动画效果是正常了但是导致手机网页出现一些无法滚动显示的问题
改不好于是把动画效果去掉了把这一行删了……回归质朴
此外调整了一下电脑网页图片基础大小，调到了满意的尺寸
之前做了相册，但是又有被爬走喂AI的忧虑，于是前几天把相册页面下线了……
背景图
经过三个月我终于想起来要把这图画完了！主角是我OC，其他人临时捏的
防止以后会换，把这一刻保存一下吧
是的，头像还没画完，有空一定……
归档页加入标签云
因为发现首页的标签云组件会有显示不全的问题（主要是我不喜欢右侧栏会滑动，所以限制了tag显示数），于是把这个功能加在了归档页里
如下代码加在</header>下面即可：
1<div class="tag-cloud-section widget tagCloud">
2 <h2 class="section-title widget-header">TAGS</h2>
3
4 <div class="widget-content">
5 <div class="tagCloud-tags">
6 {{ range .Site.Taxonomies.tags }}
7 <a href="{{ .Page.RelPermalink }}">
8 {{ .Page.Title }}
9 </a>
10 {{ end }}
11 </div>
12 </div>
13</div>手机网页文章目录按钮
DeepSeek帮写的，更改相应代码即可
1{{ define "body-class" }}
2 article-page
3 {{/*
4 Enable the right sidebar if
5 - Widget different from 'TOC' is enabled
6 - TOC is enabled and not empty
7 */}}
8 {{- $HasWidgetNotTOC := false -}}
9 {{- $TOCWidgetEnabled := false -}}
10 {{- range .Site.Params.widgets.page -}}
11 {{- if ne .type "toc" -}}
12 {{ $HasWidgetNotTOC = true -}}
13 {{- else -}}
14 {{ $TOCWidgetEnabled = true -}}
15 {{- end -}}
16 {{- end -}}
17
18 {{- $TOCManuallyDisabled := eq .Params.toc false -}}
19 {{- $TOCEnabled := and (not $TOCManuallyDisabled) $TOCWidgetEnabled -}}
20 {{- $hasTOC := ge (len .TableOfContents) 100 -}}
21 {{- .Scratch.Set "TOCEnabled" (and $TOCEnabled $hasTOC) -}}
22
23 {{- .Scratch.Set "hasWidget" (or $HasWidgetNotTOC (and $TOCEnabled $hasTOC)) -}}
24
25 {{/* 添加一个类标识文章页面有TOC */}}
26 {{ if (and $TOCEnabled $hasTOC) }}has-toc{{ end }}
27{{ end }}
28
29{{ define "main" }}
30 {{ partial "article/article.html" . }}
31
32 {{ if .Params.links }}
33 {{ partial "article/components/links" . }}
34 {{ end }}
35
36 {{ partial "article/components/related-content" . }}
37
38 {{ if not (eq .Params.comments false) }}
39 {{ partial "comments/include" . }}
40 {{ end }}
41
42 {{ partialCached "footer/footer" . }}
43
44 {{ partialCached "article/components/photoswipe" . }}
45
46 {{/* 添加手机端TOC按钮 */}}
47 {{ if .Scratch.Get "TOCEnabled" }}
48 <button class="toc-toggle hamburger hamburger--spin" type="button" id="toggle-toc" aria-label="Toggle table of contents">
49 <span class="hamburger-box">
50 <span class="hamburger-inner"></span>
51 </span>
52 </button>
53 {{ end }}
54{{ end }}
55
56{{ define "right-sidebar" }}
57 {{ if .Scratch.Get "hasWidget" }}{{ partial "sidebar/right.html" (dict "Context" . "Scope" "page") }}{{ end}}
58{{ end }} 1<!-- 手机网页汉堡包目录 -->
2<script>
3 document.addEventListener('DOMContentLoaded', function () {
4 const tocToggle = document.getElementById('toggle-toc');
5
6 if (tocToggle) {
7 const rightSidebar = document.querySelector('.sidebar.right-sidebar');
8
9 // 1. 滚动显示/隐藏按钮
10 function updateButtonVisibility() {
11 const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
12 const showThreshold = 200;
13
14 if (scrollTop > showThreshold) {
15 tocToggle.classList.add('visible');
16 } else {
17 // 如果侧边栏是打开的，不要隐藏按钮
18 if (!rightSidebar || !rightSidebar.classList.contains('show')) {
19 tocToggle.classList.remove('visible');
20 }
21 }
22 }
23
24 // 防抖函数
25 function debounce(func, wait) {
26 let timeout;
27 return function () {
28 const context = this;
29 const args = arguments;
30 clearTimeout(timeout);
31 timeout = setTimeout(() => func.apply(context, args), wait);
32 };
33 }
34
35 // 监听滚动
36 window.addEventListener('scroll', debounce(updateButtonVisibility, 100));
37
38 // 初始检查
39 setTimeout(updateButtonVisibility, 500);
40
41 // 2. 侧边栏控制逻辑
42 if (rightSidebar) {
43 // 创建遮罩层
44 const mask = document.createElement('div');
45 mask.className = 'toc-mask';
46 document.body.appendChild(mask);
47
48 // 切换显示/隐藏
49 tocToggle.addEventListener('click', function () {
50 this.classList.toggle('is-active');
51 rightSidebar.classList.toggle('show');
52 mask.classList.toggle('show');
53 document.body.classList.toggle('no-scroll');
54
55 // 点击时确保按钮可见
56 this.classList.add('visible');
57 });
58
59 // 点击遮罩层关闭
60 mask.addEventListener('click', function () {
61 tocToggle.classList.remove('is-active');
62 rightSidebar.classList.remove('show');
63 this.classList.remove('show');
64 document.body.classList.remove('no-scroll');
65 });
66
67 // ESC键关闭
68 document.addEventListener('keydown', function (e) {
69 if (e.key === 'Escape' && rightSidebar.classList.contains('show')) {
70 tocToggle.classList.remove('is-active');
71 rightSidebar.classList.remove('show');
72 mask.classList.remove('show');
73 document.body.classList.remove('no-scroll');
74 }
75 });
76 }
77 }
78 });
79</script> 1/* 手机端TOC按钮 - 右下角 */
2.toc-toggle {
3 position: fixed;
4 right: 20px;
5 bottom: 20px;
6 z-index: 1001;
7 background: var(--card-background);
8 border-radius: 50%;
9 width: 50px;
10 height: 50px;
11 display: none;
12 align-items: center;
13 justify-content: center;
14 box-shadow: var(--shadow-l2);
15 border: 1px solid var(--border-color);
16 cursor: pointer;
17 opacity: 0;
18 transform: translateY(20px);
19 transition: opacity 0.3s ease, transform 0.3s ease;
20}
21
22/* 显示状态 */
23.toc-toggle.visible {
24 opacity: 1;
25 transform: translateY(0);
26}
27
28/* 手机端：只在有TOC的文章页面显示按钮和侧边栏 */
29@media (max-width: 768px) {
30 body.has-toc .toc-toggle {
31 display: flex;
32 }
33
34 /* 右侧边栏改为抽屉式 */
35 body.has-toc .sidebar.right-sidebar {
36 display: block !important;
37 position: fixed;
38 top: 0;
39 right: -320px;
40 width: 300px;
41 height: 100vh;
42 z-index: 1000;
43 transition: right 0.3s ease;
44 background: var(--card-background);
45 box-shadow: var(--shadow-l2);
46 overflow-y: auto;
47 padding: 20px;
48 }
49
50 body.has-toc .sidebar.right-sidebar.show {
51 right: 0;
52 }
53
54 /* 遮罩层 */
55 .toc-mask {
56 position: fixed;
57 top: 0;
58 left: 0;
59 right: 0;
60 bottom: 0;
61 background: rgba(0, 0, 0, 0.5);
62 z-index: 999;
63 opacity: 0;
64 visibility: hidden;
65 transition: all 0.3s ease;
66 }
67
68 .toc-mask.show {
69 opacity: 1;
70 visibility: visible;
71 }
72}目前来说效果还是比较简陋和粗暴，还会受网页加载速度影响，但我实在是不会改了，如果有更好的代码可以让我抄请务必告诉我……
NeoDB短代码
我的Hugo版本是v0.150.0，尝试抄了很多Neodb短代码都有网络连接丢失等问题，于是拷打DeepSeek生成了一个……！
也放一下作业，希望对遇到同样困难的人有帮助
1{{ $dbUrl := .Get 0 }}
2{{ $customContent := trim .Inner " \n\r" }}
3
4<!-- 解析 item_uuid -->
5{{ $itemUuid := "" }}
6{{ if (findRE `.*neodb\.social\/.*\/(.*)` $dbUrl) }}
7{{ $itemUuid = replaceRE `.*neodb\.social\/.*\/(.*)` "$1" $dbUrl }}
8{{ end }}
9{{ $uniqueId := (print "neodb-card-" $itemUuid) }}
10{{ $apiUrl := "" }}
11
12{{ if (findRE `^.*neodb\.social\/.*` $dbUrl) }}
13{{ $dbPath := replaceRE `.*neodb.social\/(.*\/.*)` "$1" $dbUrl }}
14{{ $apiUrl = print "https://neodb.social/api/" $dbPath }}
15{{ else }}
16{{ $apiUrl = print "https://neodb.social/api/catalog/fetch?url=" $dbUrl }}
17{{ end }}
18
19<div class="db-card" id="{{ $uniqueId }}">
20 <div class="db-card-subject">
21 <div class="db-card-post">
22 <img src="" alt="加载中..." id="{{ $uniqueId }}-img" style="max-width: 100%; height: auto;">
23 </div>
24 <div class="db-card-content">
25 <div class="db-card-title">
26 <a href="{{ $dbUrl }}" class="cute" target="_blank" rel="noreferrer" id="{{ $uniqueId }}-title">
27 加载中...
28 </a>
29 </div>
30 <div class="db-card-abstract" id="{{ $uniqueId }}-content">
31 {{ if $customContent }}
32 {{ $customContent | safeHTML }}
33 {{ else }}
34 <p>正在加载数据...</p>
35 {{ end }}
36 </div>
37 </div>
38 <div class="db-card-cate" id="{{ $uniqueId }}-category">...</div>
39 </div>
40</div>
41
42<script>
43 document.addEventListener('DOMContentLoaded', function () {
44 const cardId = '{{ $uniqueId }}';
45 const apiUrl = '{{ $apiUrl }}';
46
47 if (!apiUrl) return;
48
49 // 前端获取数据
50 fetch(apiUrl)
51 .then(response => {
52 if (!response.ok) {
53 throw new Error(`HTTP error! status: ${response.status}`);
54 }
55 return response.json();
56 })
57 .then(data => {
58 // 更新标题
59 const titleEl = document.getElementById(cardId + '-title');
60 if (titleEl && data.title) {
61 titleEl.textContent = data.title;
62 }
63
64 // 更新图片
65 const imgEl = document.getElementById(cardId + '-img');
66 if (imgEl && data.cover_image_url) {
67 imgEl.src = data.cover_image_url;
68 imgEl.alt = data.title || '封面图片';
69 }
70
71 // 更新内容（如果没有自定义内容）
72 const contentEl = document.getElementById(cardId + '-content');
73 const customContent = '{{ $customContent }}';
74 if (contentEl && !customContent.trim() && data.brief) {
75 contentEl.innerHTML = data.brief;
76 }
77
78 // 更新分类
79 const cateEl = document.getElementById(cardId + '-category');
80 if (cateEl && data.category) {
81 cateEl.textContent = data.category;
82 }
83 })
84 .catch(error => {
85 console.error('Failed to fetch NeoDB data:', error);
86 // 可以显示错误信息或保持默认状态
87 });
88 });
89</script>上述代码在<img src=""这一行中双引号内可以加上想要用作加载时的占位图片的链接
（外链用网址即可，
（也可以使用本地图片，将图片放在项目文件夹\stastic路径下，写上该文件夹内的路径即可，如src="/image/neodb.jpg"）
1{{ <neodb "https://neodb.social/tv/season/6tPYnexDe3m2y8m4U5YqiW"> }}
2测试
3{{ </neodb> }}效果：
