Hugo|月球基地开发历程

为什么是Hugo？

一直以来我都希望能找到一个平台，可以让我随意地记录一切，无论是发布长文或短句，还是展示图片和文章，都不需要考虑别的任何事，没有审核、没有字数和容量限制、没有热度和流量指标，就只是最纯粹的书写和存放。当然，最好还能足够好看。

我曾经尝试过使用wordpress建站，但我在搭建的时候，总觉得不够流畅，我也没有分享自己文章的习惯，总是自己悄悄写、悄悄反刍，因此我只把它作为了一个存放随笔的仓库。平台难找，云储存的方式却有很多。当我日常的随笔逐渐以纯纯写作+坚果云同步为主后，我就没再使用过wordpress。

另外，我也一直对Markdown的写作模式很感兴趣，但总是因为各种原因没有尝试过。在日常的SNS平台变成长毛象之后，我在tl上偶然看到了象友对Hugo的安利，也偷偷溜进不少象友的博客参观了一番，得出的结论是：这不就是我心目中十分理想的那个平台吗！写作方式也是Markdown，我好喜欢！我好想要！

于是，我的Hugo之旅正式开始了。

作业大合集

我对代码一窍不通，但好在我不怕折腾，也不怕学习和尝试新的知识，我有搜索引擎，还很幸运地找到了许多乐于分享教程的博主。

我先把他们的站点放在这里，之后具体提到某份作业时也会进一步引用单独的文章链接。还有一些比较好用的功能性网站，也一并放在这里，供看到的朋友参考。

因为全文会很长，所以在这里折叠一下。

博客站点

夏夏的博客，我对Hugo博客的最初印象就来自夏夏，是很简约但很漂亮的站点，也正是偷偷点进去夏夏的博客好几遍之后我才下定决心要开始建站的！最初我只能找到官方文档，但顺着夏夏发的教程摸到了很多别的博客，很感谢夏夏！
塔塔的博客！塔塔，我的Hugo之光！可以说我在搭建博客时大部分内容都来自塔塔的文章，真的非常感谢她！塔塔的博客也是简约又精致的风格。有点好笑的是我在抄了她好几天作业后才在长毛象上偶然遇见她，发现她给我碎碎念博客搭建历程的嘟文点了好多星星。点进主页才发现，原来这就是塔塔，是那个塔塔耶！总觉得有种很奇妙的缘分。
小鱼的博客，她的文章都很有意思，博客也装修得好漂亮！在我搭建博客的过程中小鱼还再次进行了主题更换，感觉小鱼每次更换装修都改得很有意思，之前的闪闪stack主题也给了我很多启发！
吕楪的博客，她的博客添加了很多有趣的小部件，从鼠标指针到打字机特效都超可爱！我照抄了不少作业，很多有意思的短代码也来自她，感谢她的分享！
XR_G的博客，他的博客装修笔记也对我帮助很大，滚动条美化、返回顶部按钮等都是我从他的笔记里学到的，感谢！他添加的转场特效也好特别！很好看！不过我暂时还没有学会这个（没有找到别的动画资源啦）。
木木木木木的博客，是很厉害的大佬！做了很多厉害的功能，简直像个宝库。不过我其实照抄的不多，有些功能是觉得没必要，有些是没有条件，但推荐大家都去看看！
Mengru的博客，她的博客超级可爱！也写了很多有趣的功能，关于页面的标签墙代码就来自Mengru，我真的爱死这个标签墙啦！右下角的cbox也是抄了她分享的代码，非常感谢她！

功能性网站

Github，Vercel，最基础的部署Hugo两件套。
Waline，Leancloud，在上一条基础上的评论区配置两件套。
Porkbun,我使用的域名购买网站，可以用支付宝支付，界面是英文，价格很便宜，有Free Privacy设置。
Svgviewer，下载svg图标的网站，可以实时编辑svg文件的代码并看到效果，很好用！
chatGPT,是的，你没有看错，是chatGPT。它帮助我解决了很多代码上的问题，我在遇到bug和报错时都会咨询AI（因为我不太好意思去麻烦别人），它总能很好地理解我的意思并给出正确可行的代码，是非常好的编程老师！
一个在线接收验证码的虚拟号码网站，有中文界面，可支付宝支付，价格不贵（应该是兑换的卢布），采用的是先收码后付费的方式，我用它注册过telegram、twitter以及chatGPT，都没有太大的问题，只是telegram记得开密码验证。

Hugo部署

这部分基本上照抄了塔塔写的教程Hugo | 一起动手搭建个人博客吧，塔塔写得已经非常详细，我完全没遇到任何阻碍，只要一步一步跟着来即可。

在主题方面选择了Stack主题，因为在夏夏、小鱼还有塔塔的文章里关于它的教程最多，吕楪和XR_G也都采用了这个主题，想着应该会比较容易上手。

但事实证明，由于经历了数次更新，主题当中的结构和某些代码已经完全不同了。有不少地方都是我连蒙带猜、翻完教程翻issue，最后又求助chatGPT才完成的，这部分在下一节细说。

基础配置与Waline评论系统

首先，感谢每次推送到Github仓库时都认真写Summary的我自己！

在安装完主题后，将themes/hugo-theme-stack中的assets、archetypes、layouts文件夹复制到根目录，这一步的目的是防止后续更新主题时，自定义的修改被覆盖重置。

接下来在根目录下创建static文件夹，如果不需要引入js代码，可以只在static下新建img文件夹，用来存放站点图标等文件；如果像我一样需要后续引入js文件，则需要在static下另外新建js文件夹。

到这一步，就可以正式开始修改各种配置文件了。我使用的是最新的v3.16 Stack主题，下面的一切修改都会以这个版本作为基础。

修改config.yalm

这部分修改很基础，同样可以参考塔塔的教程，同时稍加英文阅读理解即可。

当然，为了添加更多别的功能，之后还需要多次编辑这个文件。

具体的基本修改如下

修改站点信息

将baseurl修改为自己的域名，languageCode改为zh-cn，我不需要多语言模式，因此将languages分支下的英文整部分删去，将zh-cn的weight修改为1，填写title和description。

同样将默认内容语言修改为中文DefaultContentLanguage: zh-cn，将中文计数打开hasCJKLanguage: true。

永久链接中加入年份

修改这部分。

1
2
3


permalinks:
    post: /:year/:slug/
    page: /:slug/

添加站点图标

这部分只要注意作者提供的注释，不要少打/就好，ico文件放在之前新建的static/img中，但在填写文件路径时，static永远可以省去。

我的站点图标来自捏咔“来捏猫猫吧”，后续用搜索引擎随便找了个在线png转ico的网站转换了格式，将文件命名为favicon.ico。

猫猫好可爱！好喜欢猫猫！

1
2
3
4
5
6


    mainSections:
        - post
    featuredImageField: image
    rssFullContent: true
    favicon: /img/favicon.ico
    # e.g.: favicon placed in `static/favicon.ico` of your site folder, then set this field to `/favicon.ico` (`/` is necessary)

增加头像

这里的img/avatar.png需要放在assets/img中，assets同样可以省去，与站点图标的路径区别是，这里的img前不加/。

1
2
3
4
5
6
7


    sidebar:
        emoji: 
        subtitle: 
        avatar:
            enabled: true
            local: true
            src: img/avatar.png

修改版权信息

Waline评论系统

如何部署Waline在Waline的官方文件中已经写得十分详细，使用Vercel部署成功后，只需要再次回到config.yaml填写相关内容即可。

修改内容如下

首先将comments下的enabled改为true，provider改为waline。

接着下滑找到waline的配置部分，因为我在waline中使用了自己的域名，因此我的serverURL是https://example.域名，没有域名使用Vercel给出的链接就好，只是概率会无法在墙内正常使用。

这里我使用了从塔塔的教程里找到的三套Blob系列表情包。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


        waline:
            serverURL: 
            lang: 'zh'
            visitor: false
            pageview: false
            highlight: true
            comment: true
            dark: false
            emoji:
                - https://cdn.jsdelivr.net/gh/norevi/waline-blobcatemojis@1.0/blobs
                - 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
            requiredMeta:
                - 昵称
                - 邮箱
                - 网址(非必填)
            locale:
                admin: 修改为自定义的管理员（也就是博主）。
                placeholder: "在这里写评论框中默认显示的信息。"

修改评论区样式

仍然参照了塔塔的教程进行修改，这里也用到了来自XR_G提供的小Tips：

F12打开浏览器工具，选定元素查看样式和代码，还可以实时修改查看效果，最后在本地文件改动即可。即使是文件中本身没有的元素，也可以从浏览器工具中Copy下来进行修改。

这里放一下在塔塔的教程以外加入的代码部分，放在夜间模式以下，配色请自行修改。

  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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126


    .waline-container .vcount {
        color: #1f7bad;;
    }

    .wl-header label {
        min-width: 40px;
        padding: .75em .5em;
        color: #1f7bad;
        font-size: .75em;
        text-align: center;
    }

    .wl-btn {
        display: inline-block;
        vertical-align: middle;
        min-width: 2.5em;
        margin-bottom: 0;
        padding: .5em 1em;
        border: 1px solid var(--waline-border-color);
        border-radius: .5em;
        background: #57afdb29;
        color: #35728a;
        font-weight: 400;
        font-size: .75em;
        line-height: 1.5;
        text-align: center;
        white-space: nowrap;
        cursor: pointer;
        user-select: none;
        transition-duration: .4s;
        touch-action: manipulation;
    }

    .wl-btn:disabled {
        border-color: var(--waline-border-color);
        background: #57afdb40;
        color: #1f7bad;
        cursor: not-allowed;
    }

    .wl-count {
        flex: 1;
        font-weight: bold;
        font-size: 1.25em;
        color: #1f7bad;
    }

    .wl-sort li.active {
        color: #1f7bad;
    }

    .wl-sort li {
        display: inline-block;
        color: #35728a;
        font-size: .75em;
        cursor: pointer;
    }

    .wl-card .wl-meta>span {
        display: inline-block;
        margin-inline-end: .25em;
        padding: 2px 4px;
        border-radius: .2em;
        background: #f8f8f800;
        color: #43749f;
        font-size: var(--waline-info-font-size);
        line-height: 1.5;
    }

    .wl-card .wl-time {
        margin-inline-end: .875em;
        color: #43749f;
        font-size: .75em;
    }

    .wl-card .wl-quote {
        border-inline-start: 1px dashed transparent;
    }

    .wl-info .wl-text-number {
        color: #43749f;
        font-size: .75em;
    }

    [data-waline] a {
        position: relative;
        display: inline-block;
        color: #1f7bad;
        text-decoration: none;
        word-break: break-word;
        cursor: pointer;
    }
    
    [data-waline] p {
        color: var(--card-text-color-main);
    }

    [data-waline] * {
        box-sizing: content-box;
        line-height: 1.75;
        color: #0098e0b0;
    }

    .wl-power {
        padding: .5em 0;
        color: #1f7badab;
        font-size: var(--waline-info-font-size);
        text-align: right;
    }

    .wl-btn.primary {
        border-color: var(--waline-theme-color);
        background: #1f7bad;
        color: #ffffff;
    }

    .wl-editor:focus, .wl-input:focus {
    background: rgb(0 0 0 / 0%);
    }

    .wl-empty {
        overflow: auto;
        padding: 1.25em;
        color: #1f7bad;
        text-align: center;
   }

自定义站点页面

修改全站字体

把全站的字体改为了思源宋体，忘记是从哪里抄来的了,似乎没有用到塔塔文章里提供的代码……

但还蛮简单的，在layouts/partials/head/custom.html加入以下代码即可（需要新建该文件）。

实现方法如下

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22


<style>
  :root {
    --sys-font-family: "Noto Serif SC";
    --zh-font-family: "Noto Serif SC";
    --base-font-family: "Noto Serif SC";
    --code-font-family: "Noto Serif SC";
    --article-font-family: "Noto Serif SC";
  }
</style>

<script>
  (function () {
    const customFont = document.createElement("link");
    customFont.href =
      "https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700&display=swap";

    customFont.type = "text/css";
    customFont.rel = "stylesheet";

    document.head.appendChild(customFont);
  })();
</script>

修改网页样式

包括选中颜色、行内代码颜色、网页背景色、左边栏选中高亮、头像与站点描述居中显示、超链接显示、代码块样式、分类颜色、目录样式、字号大小等，基本上都来自塔塔的教程一，塔塔的教程二，塔塔的教程三，页面布局修改来自XR_G的博客，我只修改了配色方案和某些具体参数。

因为代码太多就不全放出来了，总之对那一大堆scss文件使劲修改就对了！

但在这里放一个左边栏选中后高亮的代码，来自XR_G的博客，我觉得加上它之后页面有种小小的精致感，我好喜欢。

在layouts/partials/sidebar/left.html的<ol class="menu" id="main-menu">下方添加

1
2
3
4
5


    {{ $currentPage := . }}
    {{ $siteTitle := .Site.Title }}
    {{ range .Site.Menus.main }}
    {{ $active := or (eq $currentPage.Title .Name) (or ($currentPage.HasMenuCurrent "main" .) ($currentPage.IsMenuCurrent "main" .)) }}
    {{ $active := or ($active) (and (eq $currentPage.Title $siteTitle ) (eq .Identifier "home")) }}  

加入返回顶部按钮

基础依然来自XR_G的博客，但由于Stack主题的版本变动，文章中给出的方法已经不再适用，即使成功添加了按钮，在点击时也无法生效，因此最后的解决方法来自chatGPT。

这个方法引入了jQuery代码以监控页面的滚动，美中不足的是这样的返回按钮只能使用默认的文字而无法使用图标，不过我看着也还可以啦。

实现方法如下

在custom.scss添加：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


#myBtn {
  bottom: 20px;
  right: 30px;
  z-index: 99;
  display: none;
  position: fixed;  
  border: 0;
  outline: none;
  cursor: pointer;
  padding: 15px;
  color: #5b93b9;
  background: transparent;
  font-weight: bold;
  transition: transform $hover;
  &:hover {
    transform: translateY(-10px);
  }

在layouts/partials/footer/footer.html的最后添加:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>

<script>
    // When the user scrolls down 20px from the top of the document, show the button
    window.onscroll = function() {scrollFunction()};
    
    function scrollFunction() {
      if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
        document.getElementById("myBtn").style.display = "block";
      } else {
        document.getElementById("myBtn").style.display = "none";
      }
    }
    
    // When the user clicks on the button, scroll to the top of the document
    function topFunction() {
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
    }
</script>

在layouts/partials/head/script.html中添加：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

<script>
    // Check to see if the window is top if not then display button
    $(window).scroll(function() {
    if ($(this).scrollTop()) {
        $('#back-to-top').fadeIn();
    } else {
        $('#back-to-top').fadeOut();
    }
    });

    // Click event to scroll to top
    $('#myBtn').click(function() {
    $('html, body').animate({scrollTop: 0}, 1000);
    return false;
    });
</script>

右边栏独立滚动及后续的问题解决

这个部分是在塔塔的教程一中看到的，不过我跟着照抄一大堆文件之后直接报错，通过请教chatGPT发现，在Stack主题更新后，要实现这个功能不再那么复杂了（也是因为作者写的主题源代码我看不懂也不敢随便动＞︿＜）。

但这个方法也有弊端，我琢磨出了两种各自折衷的解决方案，一起写在下面。

实现方法如下

在config.yaml中的widgets的homepage和page下面都加入- type: toc。
在style.scss里加入以下代码：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


/* 右边栏独立滚动 */
@media (min-width: 992px) {
    .right-sidebar {
      position: sticky;
      top: 70px;
      height: calc(110vh - 70px);
      overflow-y: scroll;
      margin-right: 0px;
      scrollbar-width: none;
      -ms-overflow-style: none;
    }

    ::-webkit-scrollbar {
        display: none;
    }
}

需要注意的是，这段代码中取消了整个网站所有的滚动条显示，即webkit-scrollbar部分，这会导致当自定义分类过多时，在原先的分类卡片大小下，溢出的分类无法在电脑上显示完全，解决方法有两种：

1.调整分类卡片大小（我选择了这个方法）：在assets/scss/partials/layout/list.scss中将article下的width从默认的200修改为165(我试出来的比较适合自己电脑屏幕的尺寸)；

2.将webkit-scrollbar改为display: auto;，这样会保留全部的滚动条，但与此同时右边栏和页面最右边会出现无法消除的空白。

如果能忍受这一点，可以参考下方来自XR_G的博客的代码对滚动条进行美化。

在custom.scss中插入

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


html{
  ::-webkit-scrollbar {
      width: 20px;
    }
    
    ::-webkit-scrollbar-track {
      background-color: transparent;
    }
    
    ::-webkit-scrollbar-thumb {
      background-color: #7e9fc3b8;
      border-radius: 20px;
      border: 6px solid transparent;
      background-clip: content-box;
    }
    
    ::-webkit-scrollbar-thumb:hover {
      background-color: #7e9fc3b8;
    }
}

修改站点icon，添加社交链接

站点icon来自Svgviewer，在左侧输入关键词搜索即可。

我不太会编辑svg文件的代码，但自己胡搞瞎搞也摸索出一些规律：在path前加入stroke= 'currentColor'或是去掉fill= 'none'就可以实现icon与设置的网页配色同步，不过仅限于比较简单的svg文件，再复杂一些的我就不会改了，可以在这个网站上查看修改的效果后再进行下载，保存在assets/icons中。

社交链接在config.yaml的menu中设置即可，简单易懂。我只保留了长毛象的链接，icon同样是在Svgviewer中找到的，感觉蛮可爱。

添加文本样式，加入盘古之白

盘古之白代码来自塔塔的教程，其余的文本样式代码来自吕楪的分享。

包括折叠、缩写、重点文本、文本居中、块引用、一套notice标签块等等，全部照抄就可以啦，我就不在这里赘述了。

另外放一个键盘样式特效，忘记是从哪儿搜集的了，效果是：Ctrl+Alt+Del

实现方法如下

在custom.scss中加入以下内容：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


//键盘标签样式
kbd {
  margin: 0 .1em;
  padding: .1em .6em;
  font-size: .8em;
  color: #242729;
  background: #fff;
  border: 1px solid #adb3b9;
  border-radius: 3px;
  box-shadow: 0px 1px 0 rgba(12, 13, 14, 0.2), 0 0 0 2px #fff inset;
  white-space: nowrap;
  vertical-align: middle;
  font-family: SourceHanSerifSC; //字体可以自己修改
}

修改归档页面及相关文章卡片样式

在归档页面新增加了Tags组件，代码来自小鱼的博客。

实现方法如下

在assets/scss/partials/layout/list.scss的.subsection-list类别，article代码下方添加：

 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


    .article-list--tagtile {
        display: flex;
        padding-bottom: 10px;
        flex-wrap: wrap; //实现Archive中的Tag卡片自动换行

        article {
            width: auto; //改爲200px
            height: auto; //改爲50px
            margin-left: 7px; 
            margin-right: 5px; //改爲5px
            margin-top: 7px; //新增一行
            flex-shrink: 0;
            box-shadow: var(--shadow-l2); //改个卡片阴影
            background: var(--card-background);
            border-radius: var(--tag-border-radius);

            .article-title {
                margin: 0;
                font-size: 1.4rem;
            }

            .article-details {
                padding: 15px 22px;
            }

        }
    }

在layouts/_default/archives.html的header标签内添加：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


        {{- $taxonomy := $.Site.GetPage "taxonomyTerm" "tags" -}} 
        {{- $terms := $taxonomy.Pages -}}
        {{ if $terms }}
        <h2 class="section-title">{{ $taxonomy.Title }}</h2>
        <div class="subsection-list">
            <div class="article-list--tagtile">
                {{ range $terms }}
                    {{ partial "article-list/tile" (dict "context" . "size" "250x150" "Type" "taxonomy") }}
                {{ end }}
            </div>
        </div>
        {{ end }}

相关文章卡片的样式代码来自XR_G的博客，不过我没有选择添加自定义图片。

但这样添加后归档页面的分类卡片也会出现日期，我本来把这串代码移动到了layouts/partials/article/components/related-content.html，但一旦同一分类下的文章超过一篇就会报错，最后还是决定舍去不用，只把相关文章卡片的标题样式改为了居中。

实现方法如下

在layouts/partials/article-list/tile.html中，<div class="article-details">下方添加：

1
2
3
4
5
6


    <!-- 自行增加的文章发布日期 -->
    <footer class="article-time">
        <time datetime='{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}'>
            {{- .context.Date.Format (or .Site.Params.dateFormat.published "Jan 02, 2006") -}}
        </time>
    </footer>

设置标题居中，在assets/scss/partials/layout/article.scss中找到related-content，在.article-title下添加justify-content: center;即可。

加入时间和字数统计

包括建站时间、站点总字数与总文章数、单篇文章字数、站点访问总次数、文章最后更新时间几个部分，把它们都加上后看着还挺有成就感的！

它们的代码全都需要放在layouts/partials/footer/footer.html中，而且都是写在<footer>标签内，所以我也一起打包放在下面。

实现方法如下

建站时间统计

来自塔塔的教程。

在layouts/partials/footer/footer.html中，<footer>标签内添加：

1
2
3
4
5
6
7
8


    <script>
        var s1 = '202x-xx-xx';//设置为建站时间
        s1 = new Date(s1.replace(/-/g, "/"));
        s2 = new Date();
        var days = s2.getTime() - s1.getTime();
        var number_of_days = parseInt(days / (1000 * 60 * 60 * 24));
        document.getElementById('days').innerHTML = number_of_days;
        </script>

站点总字数、总文章数统计

来自塔塔的教程一与塔塔的教程三。

在layouts/partials/footer/footer.html中，<footer>标签内添加：

1
2
3
4
5
6
7
8
9


    <section class="copyright">
        &copy; 
        {{ if and (.Site.Params.footer.since) (ne .Site.Params.footer.since (int (now.Format "2006"))) }}
            {{ .Site.Params.footer.since }} - 
        {{ end }}
        {{ now.Format "2006" }} <a href="站点链接">自定义</a>·<i class="fas fa-bell"></i> <a id="days">0</a>Days<br>
      {{$var :=  $scratch.Get "total"}}{{$var = div $var 100.0}}{{$var = math.Ceil $var}}{{$var = div $var 10.0}}共书写了{{$var}}k字·共 {{ len (where .Site.RegularPages "Section" "post") }}篇文章</br><span><p>
        </span>
      </section>

文章最后更新时间

同样来自塔塔的教程二，也参考了塔塔的这篇文章，最后意识到如果要实现自动更新需要使用Github Action来自动部署Blog，对我来说有点麻烦（也是因为觉得Vercel用起来太方便了）。

仔细思考后，我觉得自己一是不太会反复编辑更新文章，二来我就算偶尔会用到这个功能，只需要手动添加信息就好，所以只抄了最基础的部分。

在config.yaml新增了frontmatter字段，并写明lastmod: [:"fileModTime", "lastmod"]。
在layouts/partials/article/components/footer.html添加：

1
2
3
4
5
6


    {{- if ne .Lastmod .Date -}}
    <section class="article-lastmod">
        {{ partial "helper/icon" "edit" }} //图标可以自定义，放在`asssets\icon`里。
        <p> 最后更新于 {{ .Lastmod.Year }} 年， {{ printf "%d" .Lastmod.Month }} 月 {{ .Lastmod.Day }} 日。 </p> //这边的排版可以自定义
    </section>
    {{- end -}}

最后只需要文章开头的信息里加入lastmod即可，因为我设置的排版只精确到日期，所以我目前是手动把date的日期复制下来更改，保留了后面的Txx:xx:xx+08:00，这样显示出的时间没什么问题。

站点访问总次数

我在查找添加这个统计信息的教程时，发现大家都不约而同地用到了不蒜子统计，看起来步骤也简单易懂，很好复刻。

然而当我把代码复制进自己的文件，运行hugo server时，才发现它在我的博客里美美报错，访问次数和访客人数都飙升到八位数。

我很困惑，我很迷茫，我打开一份又一份教程，复制一次又一次代码，但每个教程给出的方案最后都只让我拥有了八位数的惊人浏览量！我施工以来只有自己一个人在访问啊！

（当然后来我才在塔塔的教程里看到，hugo server 预览的时候，计数部分显示八位数是正确的……呜……）

总之，当时百思不得其解的我选择了更换计数君。正好在吕楪的分享里看见了这个举牌牌的小女孩系列，觉得非常可爱，遂复刻到了自己的博客里。

在layouts/partials/footer/footer.html中，<footer>标签内添加：

1

    <img src="https://count.getloli.com/get/@:name?theme=moebooru" alt=":name" />

这个系列还有四套皮肤可以更换，在预览网站里选择下方的tool可以查看效果。

不过也许之后我会换回不蒜子统计？但感觉页尾已经蛮挤了，举牌牌看上去也不错，再纠结一下看看吧！

2023/10/02更新：这个统计似乎会时不时无法显示，想了想我也对访问量统计没那么执着，彻底将这一模块删去。

将友链更换为双栏

参考塔塔的教程三，同样也是照抄即可，再次感谢塔塔！

加入页面进度条

这段代码来自zhixuan’s blog，添加之后会在页面上方出现进度条，右上角还有一个小小的加载圈，感觉可爱！

实现方法如下

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


<!-- layouts/partials/footer/custom.html -->
<script
    src="https://cdn.jsdelivr.net/gh/zhixuan2333/gh-blog@v0.1.0/js/nprogress.min.js"
    integrity="sha384-bHDlAEUFxsRI7JfULv3DTpL2IXbbgn4JHQJibgo5iiXSK6Iu8muwqHANhun74Cqg"
    crossorigin="anonymous"
></script>
<link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/gh/zhixuan2333/gh-blog@v0.1.0/css/nprogress.css"
    integrity="sha384-KJyhr2syt5+4M9Pz5dipCvTrtvOmLk/olWVdfhAp858UCa64Ia5GFpTN7+G4BWpE"
    crossorigin="anonymous"
/>
<script>
    NProgress.start();
    document.addEventListener("readystatechange", () => {
        if (document.readyState === "interactive") NProgress.inc(0.8);
        if (document.readyState === "complete") NProgress.done();
    });
</script>

加入新功能

将关于页面改为标签墙

这也是在塔塔的博客里看到的！对这个标签墙一见钟情，立刻在塔塔的文章里翻找教程，当然也找到了塔塔的热心分享！看了看源代码来自Mengru，于是结合她们给出的教程进行了复刻。

最后用的是塔塔修改后的版本，颜色也没怎么变动，只改了背景字体的颜色。

顺带一提，感觉塔塔研究出的配色好漂亮！被安利了她分享的配色网站，以后我也来试试看，也许还能自己学着改改样式？

等到文章多起来，就可以在标签墙添加链接了，很期待那一天的到来！

添加文章前端加密功能

这是我在Stack主题的issue区翻到的有趣小功能，当然我知道前端加密没什么用啦，我加入这个功能的目的只是为了好玩，以及或许给一些NSFW内容做预警？

实现方法如下

在layouts/_default/single.html中， {{ partialCached "footer/footer" . }}一行之前添加如下代码：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


    <div class="post-password">
        {{ if ( .Params.password | default "" ) }}
        <script>
			(function(){
                if (prompt('请输入文章密码(可以自定义语句)') != {{ .Params.password }}){
						alert('密码错误！（这里也可以自定义）');
						if (history.length === 1) {
							window.opener = null;
							window.open('', '_self');
							window.close();
						} else {
							history.back();
						}
					}
			})();
        </script>
        {{ end }}
    </div>

要给文章加入密码，只需要在md文件的开头部分插入password:xxxxxx即可。

这个方法所形成的密码框是浏览器自带样式，没办法拥有像loveit等主题那样精致漂亮的弹窗，也不能单独给文章的某部分加密，不过对我来说足够了。

添加右下角聊天框

一开始是在小鱼的博客里看见了右下角的“向小鸟提问！”（小鱼现在的新主题似乎没有包含这个组件），后来在吕楪的博客也看到了提问箱，十分心动，遂复刻之。

不过她们所用到的方法并不一样，吕楪的博客中使用的是channel.io，而小鱼先前使用的是cbox+Mengru分享的代码。

Channel.io的UI很好看，界面也明显更流畅，更现代化（？），似乎还是支持私聊模式的。

不过它的后台管理界面稍显复杂，最重要的是，默认联系气泡的位置会和我的返回顶部按钮打架。调整过数次返回顶部按钮的位置之后，我意识到它们没办法和谐地搭配在一起，于是换成了Cbox。

相较之下Cbox更加简约，界面上能自定义的部分更多，有种古早互联网风味。与其说是提问箱，Cbox更像是个公开留言板，功能与评论区高度重合。不过我做这个小组件只是单纯好玩，至少它能安心地待在我的返回顶部按钮下面。

加入图片轮播功能

这也是在塔塔的分享中看到的，全部照抄下来就好。

加入一些短代码

包括Spotify、网易云等短代码，同样来自来自吕楪的分享，她好厉害！

自定义鼠标指针

这是在吕楪的博客里看到的，她的独角兽鼠标好可爱！后来也在吕楪的CDN-js里看到了一些鼠标指针分享，咨询了chatGPT后在custom.scss中添加了以下代码：

1
2
3


//鼠标指针自定义
body{cursor:url(/img/pointer.cur), default;} //默认时的鼠标样式
a:hover{cursor:url(/img/link.cur), pointer;} //指向链接时的鼠标样式

这里的url链接除了放在static/img内外，也可以引用外部网站的链接。

最后就是现在这个效果啦！鼠标指针用的也是吕楪分享的简约黑色鼠标，疑惑的是我自己找到的.cur或是.png图片放到网站里就会显得巨大无比，而我并不知道要怎么调整它……就先这样吧。

增加一系列JS美化

这一系列美化的开始也来自于吕楪的分享！在添加了她写的评论区打字机特效后，意犹未尽地在互联网上搜索了更多的特效代码，最终成功让自己的博客花里胡哨起来。

实现方法如下

评论区打字机特效

来自吕楪的CDN-js，将js文件保存在static\js中，接着在layouts/partials/comments/provider/waline.html中添加：

1

<script type="text/javascript" src="你的链接"></script>

鼠标点击礼花特效

源代码来自这篇文章，一共有四种特效可以选择，我选择现在这个是因为它看起来跟评论区的打字特效很搭。

文章中给出的方法只适用于Hexo博客，所以我换了个方式引入相关代码：

把js文件中的全部内容复制下来，并添加到layouts/_default/baseof.html中的{{ partial "footer/include.html" . }}以下。

鼠标轨迹蛛丝特效

源代码来自这里，我选择的是蜘蛛网特效，因为总觉得自己的背景看着有点空，添加之后若隐若现的线段束看起来刚刚好。

同样把js代码中的全部内容复制下来，并添加到layouts/_default/baseof.html中的{{ partial "footer/include.html" . }}以下即可。

1
2
3


function t() {
            var t = e("script"), o = t.length, i = t[o - 1];
                return {l: o, z: n(i, "zIndex", -1), o: n(i, "opacity", .5), c: n(i, "color", "34,153,221"), n: n(i, "count", 99)}

在这段代码的color括号内可以更改蛛丝的颜色，需要rgb格式。

Live 2D宠物

将以下代码添加到layouts/_default/baseof.html中的{{ partial "footer/include.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


    <script src="https://l2dwidget.js.org/lib/L2Dwidget.min.js"></script>
    <script>
    // 不同人物形象
    // 黑猫猫
    hijiki = "https://unpkg.com/live2d-widget-model-hijiki@1.0.5/assets/hijiki.model.json"
    // 白猫猫
    tororo = "https://unpkg.com/live2d-widget-model-tororo@1.0.5/assets/tororo.model.json"
    // 狗狗
    wanko = "https://unpkg.com/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json"
        L2Dwidget.init({
            "model": {
                // 在这里使用上面的人物名称替换可以切换人物形象
                jsonPath: hijiki,
                "scale": 1
            },
            "display": {
                "superSample": 9,     // 超采样等级，相当于清晰度，数值越高越清晰
                "position": "left", //切换显示位置的左右
                "width": 174,
                "height": 232,
                "hOffset": 150, // canvas水平偏移，正方向为右
                "vOffset": -32 // canvas垂直偏移
            },
            "mobile": {
                "show": true, //在手机端显示
                "scale": 1, // 移动设备上的缩放
                "motion": true, // 移动设备是否开启重力感应
            },
            "react": {
                "opacityDefault": 1, // 默认透明度
                "opacityOnHover": 1 // 鼠标移上透明度
            }
        });
    </script>

模型的合集在这里，大部分都是美少女，进一步的美少女模型似乎还能换装、自定义对话什么的，我不太感兴趣，所以只选择了猫猫和狗狗的模型。

1月4日更新：添加碎碎念页面

虽然没有服务器，但memos确实让我眼馋，在网上搜索时看见这篇博客，才发现原来Artitalk.js也可以实现差不多的效果，立刻跟着使用文档一步一步配置了，其实除了在LeanCloud上多做了一步之外，步骤与添加标签墙十分相似。

实现方法如下

在config.yaml中找到homepage，在下方添加- type: artitalk
在content/page文件夹下新建artitalk文件夹，其中新建index.md：

1
2
3
4
5
6
7
8
9


---
title: 星屑
menu:
    main: 
        weight: -50
        params:
            icon: sparkles
layout: "artitalk"
---

在layouts/_default/下新增artitalk.html, 并修改样式。内容如下:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


{{ define "main" }}
 <!-- 引用 artitalk -->
 <script type="text/javascript" src="https://unpkg.com/artitalk"></script>
 <!-- 存放说说的容器 -->
       <div id="artitalk_main"></div>
     </div>
   </div>
 </main>
 </div>
 <script>
    new Artitalk({
    appId: "", // Your LeanCloud appId
    appKey: "", // Your LeanCloud appKey
    pageSize: 15, // 每页说说数量
    color3: "var(--card-text-color-main)", // 文字颜色
    color1: "var(--card-background)", //背景颜色1
    color2: "var(--card-background)" //背景颜色2
 });
 </script>
{{ end }}

结尾碎碎念

从决定要使用Hugo博客以来，磨磨蹭蹭搭建了小半个月，中途经历过各种迷茫，各种网站和人的一起崩溃，但好歹把从互联网上扒拉来的代码们拼拼凑凑成了可以运行的模样，现在我自己看着已经十分满意，短时间内应该不会再大修大改。

也必须再次感谢分享经验的赛博网友们，让我可以站在前人肩膀上完成这项对我而言的大工程。

正赶上新年，也希望从现在起给自己一个新的开始，无拘无束地记录、书写，尝试着去触碰文字最本真的模样。