RaitoMaHou!

/home

/friends

/about

博客大翻新！

#Tech

将将！在你看到这篇博客的时候，我已经完成了这一次浩大的工程！这一次我将主题迁移到了Hermit-V2，并做了很多小小的修改。

迁移到Hermit-V2主题 #

Stack主题是我上一个使用的主题，它功能强大，而且傻瓜易上手。但是我就是不满意，一直在找一个简洁优雅，还算规范便于我扩展自己想法的主题。翻阅许久后（真的不是摸鱼！）感觉Hermit-V2主题非常符合我的想法，简洁好看，还有文章目录和tag功能的支持，它甚至可以对不同的页面非常便捷的自定义CSS，非常令我满意。

给页脚添加一个起始年份 #

原来的Hermit-V2主题只支持在页脚显示当前的年份，这怎么能体现我博客的悠久传承呢！话不多说便指挥GPT为我实现：

在footer.html中，覆盖&copy; {{ now.Format "2006" }} <a href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a>为

{{/*修改年份为从启示至今*/}}
	&copy; 
	{{ $currentYear := now.Format "2006" }}
	{{ $sinceYear := .Site.Params.sinceYear }}
	{{ if or (not $sinceYear) (eq (printf "%v" $sinceYear) $currentYear) }}
		{{ $currentYear }}
	{{ else }}
		{{ $sinceYear }}-{{ $currentYear }}
	{{ end }}
	<a href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a>

再在站点配置文件hugo.toml中加入：

[params]
  ···
  sinceYear = 2023

放大页脚 #

只需要修改style.scss中关于页脚的设定即可。

#site-footer {
  font-size: 0.85em;
}

引入Waline #

由于主题已经自带了comments.html，所以为了方便我直接在原本的文件中加入了Waline:

{{ if .Site.Params.waline.enable }}
<link
  rel="stylesheet"
  href="https://unpkg.com/@waline/client@v3/dist/waline.css"
/>
<div id="waline"></div>
<script src="https://unpkg.com/@waline/client@v3/dist/waline.umd.js" defer></script>
<script>
  window.addEventListener('DOMContentLoaded', () => {
    Waline.init({
      el: '#waline',
      serverURL: '{{ .Site.Params.waline.serverURL }}',
      lang: 'zh-CN',
    });
  });
</script>
{{ end }}

Waline官方文档中使用的是https://unpkg.com/@waline/client@v3/dist/waline.js,但这会导致浏览器报错Undefined，相关讨论在这里。

之后在站点配置文件中加入

[params.waline]
  enable = true
  serverURL = "你部署的网站"

移动端目录引入 #

Hermit-V2主题默认在1300px以下会隐藏目录，为实现手机端的目录：

新增toc-moblie.html在partials目录下。

<div class="mobile-toc-wrapper">
  <aside class="mobile-toc-content">
    {{ $emtLiPtrn := "(?s)<ul>\\s<li>\\s<ul>(.*)</li>\\s</ul>" }}
    {{ $rplcEmtLi := "<ul>$1" }}
    {{ $tocRaw := .TableOfContents | replaceRE `<nav id="TableOfContents">` "" | replaceRE `</nav>` "" }}
    {{ $tocClean := $tocRaw | replaceRE $emtLiPtrn $rplcEmtLi }}
    {{ $tocClean | safeHTML }}
  </aside>
</div>

在posts/single.html的header以及post-description后加入

{{ if .Params.toc | default true }}
<div class="post-toc-mobile" id="post-toc-mobile" data-pagefind-ignore>
    <details>
        <summary> Table of Contents</summary>
        {{ partial "toc-mobile.html" . }}
    </details>
</div>
{{ end }}

之后在scss中对目录样式进行修改就完成了。

back to top