我喜欢7这个数字！写下第一篇装修报告的时候完全没想到这一系列的记录可以连载到07。我也是个成熟的复制粘贴粉刷匠了！

更改博客全局字体

其实我最初搭hugo时就想修改博客字体，但因选择困难症而一直搁置。这次刚好看到了匣的博客中使用的仓耳今楷，字体官网标了个人非商用免费使用，并且支持繁体，放在默认日文字体中也不会突兀。挑了几个测试效果，最终确定下的是仓耳今楷01-W03。感觉初代款的形状最接近于冰糖（？

这个字体比默认字体的尺寸小，改完字体后我又在css里把博客所有字号调大了2px，大动干戈啊……好在效果还不错！这种视觉上带来的舒适的陌生化四舍五入也等于博客换上新衣了。

修改引用卡片格式

也是挺早就想改的模块，但是我懒（…）这次因为要放摘抄，终于不能懒了。

.markdown-body blockquote {
  color: var(--color-text-primary)!important; 
  background-color: #84c4e230!important;;
  padding: 20px!important;
  border-radius: 5px!important;
  border-left: 0.25em solid #8aa2d3!important;
}

效果如下：

天堂错误文件

蓝色是完美的。

本地视频播放

参考添加本地视频到hugo博客↗里给出的HTML5文件参数。让ChatGPT写了一个给博客插入本地视频的短代码。

在\layouts\shortcodes下新建video.html：

<video id="video" controls="" controlslist="nodownload" preload="none" allowfullscreen="true" position="absolute" width="100%" loop="true" {{ if .Get "poster" }}poster="{{ .Get "poster" }}"{{ end }}>
    <source id="mp4" src="{{ .Get "src" }}" type="video/mp4">
</video>

注意：这个短代码默认视频格式为.mp4，如果要引用其它格式视频需要自行修改type。

使用示例（我将视频文件放在了cloudflare的R2图床下）：

{\{< video poster="封面链接（不填则默认无封面）" src="https://img.naturaleki.one/video/2024101609171701-1F2BC2A8AE647D906E0C26E3D4B654C6.mp4" >}\}

用了前年玩gs4录下的夜之介第六次大接近对话！

引入bilibili视频播放器

在鹤辞博客中分享的短代码基础上进行了修改，默认取消自动播放。

在\layouts\shortcodes新建bilibili.html，复制以下代码。

<div align=center class="aspect-ratio">
<iframe
    src="//player.bilibili.com/player.html?bvid={{.Get 0 }}&page={{ if .Get 1 }}{{.Get 1}}{{ else }}1{{end}}&autoplay=0&as_wide=1&danmaku=0"
    scrolling="no"
    frameborder="no"
    framespacing="0"
    allowfullscreen="true"
>
</iframe>
</div>

<style>
  .aspect-ratio {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 75%;
  }
          
  .aspect-ratio iframe {
   position: absolute;
   width: 100%;
   height: 100%;
   left: 0;
   top: 0;
  }
</style>    

使用方法：

{< bilibili BV12x4y1i7w7 1 >} //使用时请添加双括号，数字为分P数

示例。请用宝可梦×初音未来！

友链卡片乱序显示

参考了小鱼博客里分享的代码，感谢她！通过微调了原来友链卡片的短代码来修复乱序后原序列第一条友链出现格式偏移的bug。

在友链界面添加以下代码：

<script>
document.addEventListener("DOMContentLoaded", function() {
    // 获取带有 post-content 类的文章内容
    var articleContent = document.querySelector(".post-content");

    // 获取文章内容内部的所有列表项
    var items = articleContent.querySelectorAll(".frienddiv");

    // 将列表项转换为数组
    var itemsArray = Array.from(items);

    // 随机排列数组中的元素
    for (var i = itemsArray.length - 1; i > 0; i--) {
        var j = Math.floor(Math.random() * (i + 1));
        var temp = itemsArray[i].innerHTML;
        itemsArray[i].innerHTML = itemsArray[j].innerHTML;
        itemsArray[j].innerHTML = temp;
    }
});
</script>

做完这个后前所未有地想要捕捉宝藏友链!

居中引用短代码

在/layouts/shortcodes里新建middle.html（请不要在意命名

<div class="quote-center">
    {{- $content := .Inner | markdownify -}} 
    {{- if not (strings.HasPrefix $content "<p>") }} 
      {{ printf `</p><p>%s</p>` $content | safeHTML }} 
    {{- else }} 
      {{- $content }} 
    {{- end -}}
  </div>

丢入自定义css。

.quote-center {
    background-color:#84c4e230!important;
    position: relative;
    border-left: none;
    padding-left: 0;
    padding: 20px!important;
    border-radius: 5px!important;
    border-top: 0px solid var(--color-markdown-blockquote-border);
    border-bottom: 0px solid var(--color-markdown-blockquote-border);
    p {
      text-align: center !important;
      margin-top: 1.5em!important;
      margin-bottom: 1.5em!important;
      font-weight: bold;
    }
    &::before {
      position: absolute;
      left: 0;
      content: '“----';
      color: #8aa2d3;
      font-size: 3em;
      font-weight: normal;
      margin-top: -0.5em;
    }
    &::after {
      position: absolute;
      right: 0;
      content: '----”';
      color: #8aa2d3;
      font-size: 3em;
      font-weight: normal;
      margin-top: -0.5em;
    }
}

使用方法：

{< middle >}
人生代代无穷已，江月年年望相似。<br>不知江月待何人，但见长江送流水。
{< /middle >} //使用时请添加双括号

示例：

修复目录中文标签跳转

之前的博客侧边栏目录的跳转只对英文字符生效。google了半天，终于找到了原因，简单来说就是APlayer全责。它的js也调用了smoothscroll，和Hugo默认目录调用的产生了冲突。

鱼の乐的博文里提供了解决方案，只要将他改好js文件替换官方的APlayer.min.js就可以了！我直接拷贝了一份到博客/static/js目录下然后在head.html里修改引入路径。中文目录跳转，复活！

评论区深度自定义

问就是7.0深度展开动画看太多了。

根据waline官方文档的自定义语言↗指南，修改了大部分可见UI文字。

    locale: {
      nick: '您的称呼',
      mail: '您的邮箱',
      link: '您的网站',
      sofa: '这里还什么都没有呢库啵…',
      submit: '库啵！',
      login: '登记',
      logout: '离开',
      uploading: '正在努力上传中…',
      anonymous: '匿名冒险者',
      optional: '如果有',
      admin: '管理员',
      more: '继续加载',
      nickError: '名字忘填啦！',
      mailError: '邮箱忘填啦！',
      oldest: '旧',
      latest: '新',
      hottest: '心',
      comment: '留言',
      placeholder: '冒险者，请写下你想说的话吧！(填写邮箱的话可以收到我们的回复报告库啵)'
    },

欢迎冒险者使用全新的评论区进行评论库啵！