Hugo|月球基地年度报告

总结陈词部分

建站第364天，我的博客也迎来第245次GitHub推送，这实在是个惊人的数字，在我一年前决定搭建自己的博客的时候，我并没有想到自己的热情能够坚持这么久。那时候我熬了小半个月的夜不停改代码，因为不好意思去打扰别人，靠搜索引擎和chatGPT一个人默默啃下所有需要增改的部分，在焦头烂额的时候向朋友发送一大堆骚扰消息，然后又继续坐回电脑面前。现在想起来，好像就在昨天。

好在这种付出在某种程度上算是一劳永逸，后来我能够比较得心应手地改造我的网站，还学会了使用chatGPT创造属于自己的页面，给我的小铁块和PC们打造出一个赛博专用展柜（请看我的小铁块赛博展柜和调查员绝密档案！作业在自定义展柜页面）。好友说我简直像个小天才，我确实有点为自己感到骄傲，但这是因为我比别人更聪明吗？好像也不是，我想自己只是难得地，在这件事上花了心思钻研。这不是一件多么复杂、多么困难的事，它需要的只是耐心和细心，甚至可以说是世界上为数不多的，只要愿意投入时间和精力，就一定会获得回报的事情之一。它给我带来的信心是：如果我可以只凭自己做到这种程度，那么我或许也能做到更多的别的事。

但在这里说“只凭自己”也算是一种夸大。我只是在这过程中几乎没有向他人发问、没有与他人交流，并不代表我未曾接受过他人的帮助。博客，或者说任何一种类似的形式，它们其中一部分魅力就在于此，虽是对己身记忆的忠实记录，读者却不仅仅是未来的自己。在我建站时便有许多朋友以过去式的形态向我伸出援手，而我自己的经验帮助到了更多后来的其他人（这里请看我的其他作业：建站基础指南和短代码合集），时不时会收到感谢的留言，时不时会发现自己的博客文章被引用，实在是奇妙的感受。

缺憾，以及未来的计划

严格说来，我并没有把自己的博客利用得太好。我只是搭了个装饰精美的框架，而填入的内容却乏善可陈。我常觉得时日空空无甚可记，时间就那样在我恍惚如梦中溜走，不留下任何痕迹。朋友们的博客总是精彩纷呈，而我既很难按规律地去记录日常，也活得毫无实感到极少能够真正去感受什么，甚至在我以为我喜爱，我擅长的领域，思绪都常常难以捕捉，呈于纸面的也皆是无味和平庸。于是一年到头，话题最终还是回到我一开始建站时谈论的那两点上：我既没什么创作热情，也没什么创作才能，该怎么办才好？坦白说，就算到现在我也没想到什么合适的解决方案。但时不时写点什么也总好过什么都不写，对吧？

新一年想要改动的部分暂时不多，大概除了勤更新以外没什么别的愿望，倒是有想法做更多的展柜放进Tag墙链接里玩玩看。朋友前几天提到想要文章内置翻页功能，感觉也可以试着研究研究。当然最要紧的还是waline早日修复博主无法收到新增评论的邮件通知这个Bug，我翻遍github也没找到生效的解决方法，实在是太折磨人了。

附赠的实用性部分：一些新改动

新的返回顶部按钮

时隔一年终于用上了大家都说好的返回顶部按钮！和原来的文字比起来稍微有点美中不足的是在主页面会有点和没有滚动条的右边栏打架（但鼠标放上去还是能不那么灵敏地滚动的），以及没有点击时向上跳一下的动画了，不过精致度还是略微提升了一些。作业来自Hugo｜自定义 hugo-theme-Stack，我自己对大小及颜色做了些微的改动，这里放的是原来的版本。

实现方法如下

在layouts/partials/footer/custom.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
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104


<!--返回顶部按钮 -->
<a href="#" id="back-to-top" title="返回顶部"></a>

<!--返回顶部CSS -->
<style>
  #back-to-top {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 55px;
    width: 55px;
    height: 55px;
    border-radius: 7px;
    background-color: rgba(64, 158, 255, 0.5);
    box-shadow: var(--shadow-l2);
    font-size: 30px;
    text-align: center;
    line-height: 50px;
    cursor: pointer;
  }

  #back-to-top:before {
    content: ' ';
    display: inline-block;
    position: relative;
    top: 0;
    transform: rotate(135deg);
    height: 10px;
    width: 10px;
    border-width: 0 0 2px 2px;
    border-color: var(--back-to-top-color);
    border-style: solid;
  }

  #back-to-top:hover:before {
    border-color: #2674e0;
  }

  /* 在屏幕宽度小于 768 像素时，钮位置调整 */
  @media screen and (max-width: 768px) {
    #back-to-top {
      bottom: 20px;
      right: 20px;
      width: 40px;
      height: 40px;
      font-size: 10px;
    }
  }

  /* 在屏幕宽度大于等于 1024 像素时，按钮位置调整 */
  @media screen and (min-width: 1024px) {
    #back-to-top {
      bottom: 20px;
      right: 40px;
    }
  }

  /* 在屏幕宽度大于等于 1280 像素时，按钮位置调整 */
  @media screen and (min-width: 1280px) {
    #back-to-top {
      bottom: 20px;
      right: 55px;
    }
  }

  /* 目录显示时，隐藏按钮 */
  @media screen and (min-width: 1536px) {
    #back-to-top {
      visibility: hidden;
    }
  }
</style>

<!--返回顶部JS -->
<script>
  function backToTop() {
    document.documentElement.scrollIntoView({
      behavior: 'smooth',
    })
  }

  window.onload = function () {
    let scrollTop =
      this.document.documentElement.scrollTop || this.document.body.scrollTop
    let totopBtn = this.document.getElementById('back-to-top')
    if (scrollTop > 0) {
      totopBtn.style.display = 'inline'
    } else {
      totopBtn.style.display = 'none'
    }
  }

  window.onscroll = function () {
    let scrollTop =
      this.document.documentElement.scrollTop || this.document.body.scrollTop
    let totopBtn = this.document.getElementById('back-to-top')
    if (scrollTop < 200) {
      totopBtn.style.display = 'none'
    } else {
      totopBtn.style.display = 'inline'
      totopBtn.addEventListener('click', backToTop, false)
    }
  }
</script>

移动端也有目录啦!并且更新了一下自定义图标

作业来自github的好心人分享，页面里写的非常详细，我就不在这里复制粘贴了。

调整了waline评论区的字号

近期收到一些朋友关于评论区字号太小的反馈，我自己也越看越不顺眼，遂改之。这部分改动因人而异，也就不放出代码了。

1月3日更新:归档界面文章按年份折叠！

写完总结没几天就看见爱海在博客归档界面使用了超棒的按年份折叠按钮！好简洁，好清爽，好心动，立马找爱海要作业来抄！具体请见爱海的作业，我想要在文章展开后保留stack主题原本设置的样式，又觉得手动设置一年一年难免有些繁琐，于是在chatGPT的帮助下稍微修改了一下代码，把爱海的作业和原本的样式相结合了。

实现方法如下

将layouts/_default/archives.html的header标签后的部分修改为:

 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
74
75
76
77
78
79
80


    {{ $pages := where .Site.RegularPages "Type" "in" .Site.Params.mainSections }}
    {{ $notHidden := where .Site.RegularPages "Params.hidden" "!=" true }}
    {{ $filtered := ($pages | intersect $notHidden) }}
  
    {{ range $filtered.GroupByDate "2006" }}
      {{ $id := lower (replace .Key " " "-") }}
      {{ $groupPages := .Pages }}
      {{ if $groupPages }}
        <div class="archives-group" id="{{ $id }}">
          <h2 class="archives-date section-title">
            <a href="{{ $.RelPermalink }}#{{ $id }}">{{ .Key }}</a>
            <button class="collapsible" onclick="toggleArchive('{{ $id }}')">&#9656;</button>
          </h2>
          <div class="article-list--compact" id="archive-{{ $id }}">
            {{ range $groupPages }}
              {{ partial "article-list/compact" . }}
            {{ end }}
          </div>
        </div>
      {{ end }}
    {{ end }}
  
    <style>
      .archives-group {
        margin-bottom: 20px;
      }
  
      .archives-date {
        display: flex;
        align-items: center;
      }
  
      .collapsible {
        background-color: var(--card-background);
        color: var(--card-text-color-main);
        font-weight: bold;
        font-size: 14px;
        padding: 10px;
        border: 1px solid transparent;
        border-radius: 8px;
        box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
        outline: none;
        cursor: pointer;
        margin-left: 10px; /* 调整按钮到年份的右侧 */
      }
  
      .collapsible::before {
        content: '点我展开';
        color: var(--card-text-color-main);
        font-weight: bold;
      }
  
      .collapsible.open::before {
        content: '▼';
      }
  
      .collapsible:hover {
        background-color: var(--card-background);
      }
    </style>
  
    <script>
      document.addEventListener('DOMContentLoaded', function () {
        var archiveLists = document.querySelectorAll('.article-list--compact');
        archiveLists.forEach(function (archiveList) {
          archiveList.style.display = 'none';
        });
      });
  
      function toggleArchive(archiveId) {
        var archiveList = document.getElementById('archive-' + archiveId);
        archiveList.style.display = (archiveList.style.display === 'none' || archiveList.style.display === '') ? 'block' : 'none';
  
        var button = document.querySelector('.archives-group#' + archiveId + ' .collapsible');
        button.classList.toggle('open', archiveList.style.display === 'block');
      }
    </script>
      
  {{ partialCached "footer/footer" . }}
  {{ end }} 

这里我将HTML代码、CSS样式以及JavaScript代码都放在了同一个文件内，有需求将它们分开来的朋友可以自行分离。