【hugo】| Hugo Stack 主题装修笔记（2）

一、基础配置

`hugo.yaml`

1baseurl: 网站根目录,部署后需要修改为你的实际网站地址/域名
2languageCode: 语言代码，默认值为en-us，可以修改为中文简体zh-cn
3theme: 主题名称，默认值为hugo-theme-stack
4title: 网站标题
5copyright: 版权所有者信息
6DefaultContentLanguage:默认内容语言，可修改为zh-cn
7hasCJKLanguage: 是否包含中文(影响字数统计)
8languages: 多语言设置

网站`icon`、时间格式、博客头像、`License`

1favicon:网站icon,存储地址 /static/favicon.ico
2dateFormat: Go语言时间格式，2006不可以更改
3avatar: 博客头像，存储地址 /assets/img/avatar.png
4license: 公共版权许可协议声明

评论系统

目前使用的是 utterances 评论系统，参考了 Hugo博客使用utterances作为评论系统

社交功能

添加个人社交平台的链接
icon路径：站点目录下的/assets/icons,所有用到的icon都放在这里，格式为.svg

二、个性化修改

整体布局

参考文章：

Hugo Stack 魔改美化

Hugo Stack主题装修笔记

1.将要修改的文件复制到站点目录下，然后开始个性化修改
2.没有目录的自己创建一个同名目录

一些细节

左侧栏ID修改

在layouts\partials\sidebar\left.html中找到以下代码：

1        <div class="site-meta">
2            <h1 class="site-name"><a href="{{ .Site.BaseURL | relLangURL }}">{{ .Site.Title }}</a></h1>
3            <h2 class="site-description">{{ .Site.Params.sidebar.subtitle }}</h2>
4        </div>

修改为：

1        <div class="site-meta">
2            <h1 class="site-name"><a href="{{ .Site.BaseURL | relLangURL }}"><span>Mofei</span></a></h1>
3             <h2 class="site-description">{{ .Site.Params.sidebar.subtitle }}</h2>
4        </div>

字体修改

原来的字体看着有点别扭，所以把全站的字体改为了思源宋体，参考了 Hugo|月球基地开发历程中的修改全站字体

在layouts/partials/head/custom.html（没有就新建或者在主题目录下修改）中添加下列代码：

 1<style>
 2  :root {
 3    --sys-font-family: "Noto Serif SC";
 4    --zh-font-family: "Noto Serif SC";
 5    --base-font-family: "Noto Serif SC";
 6    --code-font-family: "Noto Serif SC";
 7    --article-font-family: "Noto Serif SC";
 8  }
 9</style>
10
11<script>
12  (function () {
13    const customFont = document.createElement("link");
14    customFont.href =
15      "https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700&display=swap";
16
17    customFont.type = "text/css";
18    customFont.rel = "stylesheet";
19
20    document.head.appendChild(customFont);
21  })();
22</script>

汉语和英语之间自动添加空格

在主题目录中的layouts/partials/footer/footer.html中写入以下内容:

 1<script>
 2    (function(u, c) {
 3      var d = document, t = 'script', o = d.createElement(t),
 4          s = d.getElementsByTagName(t)[0];
 5      o.src = u;
 6      if (c) { o.addEventListener('load', function(e) { c(e); }); }
 7      s.parentNode.insertBefore(o, s);
 8    })('//cdn.bootcss.com/pangu/4.0.7/pangu.min.js', function() {
 9      pangu.spacingPage();
10    });
11</script>

给博客添加heatmap

代码来源： hugostack装修

页面加载进度条

layouts\partials\footer\custom.html添加以下代码：

 1<!-- 页面加载进度条显示 -->
 2<!-- layouts/partials/footer/custom.html -->
 3<script
 4    src="https://cdn.jsdelivr.net/gh/zhixuan2333/gh-blog@v0.1.0/js/nprogress.min.js"
 5    integrity="sha384-bHDlAEUFxsRI7JfULv3DTpL2IXbbgn4JHQJibgo5iiXSK6Iu8muwqHANhun74Cqg"
 6    crossorigin="anonymous"
 7></script>
 8<link
 9    rel="stylesheet"
10    href="https://cdn.jsdelivr.net/gh/zhixuan2333/gh-blog@v0.1.0/css/nprogress.css"
11    integrity="sha384-KJyhr2syt5+4M9Pz5dipCvTrtvOmLk/olWVdfhAp858UCa64Ia5GFpTN7+G4BWpE"
12    crossorigin="anonymous"
13/>
14<script>
15    NProgress.start();
16    document.addEventListener("readystatechange", () => {
17        if (document.readyState === "interactive") NProgress.inc(0.8);
18        if (document.readyState === "complete") NProgress.done();
19    });
20</script>

看半

小巧思 | Shortcoeds

代码来源： Hugo stack 主题美化