坎坷的博客装修之路
磕磕绊绊地搭建好了博客，也进行了一翻装修。大部分都是站在前人的肩膀上进行调整，重复的部分就不赘述了，主要记录自己个性化和饶了点弯路的地方。
主要参考的博文如下：
调整链接样式
不喜欢 hover 时的样式，在assets/scss/style.scss里修改样式：
1a {
2 &.link {
3 border-bottom: solid 1px var(--accent-color);
4 transition: all 3s;
5
6 &:hover {
7 opacity: 0.8;
8}
左侧边栏去掉图标后修改样式
1@media (min-width: 768px) {
2 .menu li {
3 padding-left: 20px;
4 }
5}
6@media (min-width: 768px) {
7 #dark-mode-toggle {
8 padding-left: 0; //dark mode栏还是保持原样
9 }
10}
添加折叠目录
屏宽小于一定值的时候文章目录就不显示了，手动在文章前添加折叠目录。
在layouts/partials/article/components中添加toc.html，内容如下：
1{{ if (.Scratch.Get "hasTOC") }}
2<section class="widget toc">
3 <h2
4 class="widget-title section-title"
5 onclick="document.all.collapse.style.display=(document.all.collapse.style.display =='none')?'':'none'"
6 >
7 {{ T "article.tableOfContents" }}
8 </h2>
9 <div class="widget--toc" id="collapse" style="display: none">
10 {{ .TableOfContents }}
11 </div>
12</section>
13{{ end }}
在layouts/partials/article/article.html中引入目录：
1{{ partial "article/components/header" . }}
2<!--在此处引入如下内容-->
3{{ partial "article/components/toc" . }}
在assets/scss/style.scss里添加样式样式：
1.main-article .toc {
2 padding: var(--card-padding); //和文章内间距保持一致
3 padding-bottom: 0px;
4}
5
6.main-article .widget--toc {
7 margin-left: calc((var(--card-padding)) * -1);
8 margin-right: calc((var(--card-padding)) * -1);
9 border-radius: 0;
10 box-shadow: none;
11 background-color: var(--blockquote-background-color);
12} //按照代码块、引用设置的样式
13
14.main-article .toc h2:hover {
15 cursor: pointer;
16}
17@media (min-width: 1280px) {
18 .main-article .toc {
19 display: none; //大屏时隐藏
20 }
21}
代码高亮
在config.yaml中设置：
1markup:
2 highlight:
3 anchorLineNos: false
4 codeFences: true
5 guessSyntax: false
6 hl_Lines: ""
7 lineAnchors: ""
8 lineNoStart: 1
9 lineNos: false
10 lineNumbersInTable: false
11 noClasses: true
12 style: monokailight
13 tabWidth: 4
hugo 官方文档给出了代码高亮的默认设置和参数解释，样式可以在这里挑选。
Hugo 代码高亮这篇文章中给出了有关代码高亮的一些语法，例如自定义开始行号、高亮某一行。
只有标记了语言才能显示高亮，like
```python
print("hello world")
```
因为 stack 主题自身代码块的文字颜色是白色，所有选择浅背景的高亮 style 是就会有代码或者花括号看不清，所以也在custom.scss里修改了样式：
1.article-content pre {
2 background-color: #fafafa;
3 color: #3d3d3d;
4}
删除 vibrant.js 插件
按照Hugo Stack 主題修改記錄 (瘦身篇)处理，但不知道为什么注释掉会报错，DELETE 掉就是正常的，也许是哪里引入的问题。
调整文章标题层级样式
stack 主题中文章标题是<h2>,markdown 从##开始写也是<h2>,有点强迫症，把文章标题改成<h1>。还有文章的 description 用的是<h3>，觉得有点莫名其妙，也修改成了<p>。然后调整了 <h1>~<h6> 的字体大小。
在layouts/partials/article/components/details.html中修改大标题：
1<!--h2 改成 h1 -->
2<h1 class="article-title">
3 <a href="{{ .RelPermalink }}"> {{- .Title -}} </a>
4</h1>
5<!-- h3 改成 p -->
6<p class="article-subtitle">{{ . }}</p>
7{{ end }}
在custom.scss中：
1.article-title {
2 font-size: 2.1rem;
3}
4.article-subtitle {
5 font-size: 1.6rem;
6 line-height: 1.85;
7}
8.article-content h2 {
9 font-size: 2rem;
10}
11.article-content h3 {
12 font-size: 1.8rem;
13}
14.article-content h4 {
15 font-size: 1.7rem;
16}
17.article-content h5,
18.article-content h6 {
19 font-size: 1.6rem;
20}
添加邮件订阅
满足我个人的小私心，总觉得有邮件订阅才像是一个博客（）
用的是follow.it，按照指引一步步做就好了，非常简单方便。
修改搜索框样式
又是比较个人的地方，不喜欢 label 标签也在框内，而且 placeholder 的文字“type something”看起来很丑……（就是 ypg 这种占了下两个的字母）
在layouts/page/search.html和layouts/partials/widget/search.html中整个删掉 label 标签。
1<label>{{ T "search.title" }}</label
2><!--删掉这行-->
在i18n/en.yaml中修改 placeholder 文字：
1search:
2 placeholder:
3 other: Search
调整样式，修改内间距和 placeholder 文字颜色，在custom.scss中：
1.search-form input {
2 padding-top: 20px;
3}
4input::-webkit-input-placeholder {
5 color: #d9d9d9;
6}
7input::-moz-placeholder {
8 /* Mozilla Firefox 19+ */
9 color: #d9d9d9;
10}
11input:-moz-placeholder {
12 /* Mozilla Firefox 4 to 18 */
13 color: #d9d9d9;
14}
15input:-ms-input-placeholder {
16 /* Internet Explorer 10-11 */
17 color: #d9d9d9;
18}
添加 apple-touch-icon
apple-touch-icon 简单来说就是苹果系统 safari 将网站添加到主屏幕时显示的图标。因为我喜欢把自己的博客添加到主屏幕上，没有这个 icon 设置就只有简陋的页面截图。
只需要在layouts/_default/baseof.html的<head></head>中添加以下代码即可。图标存放在static/img 之中。
1<link rel="apple-touch-icon" sizes="180x180" href="/img/apple-touch-icon.png" />
apple-touch-icon 支持 size 属性，可以对应不同的设备，例如手机、平板，但我懒得去准备不同尺寸的图标了。
首页文章“阅读更多”取代 description
比起每次都要写 description 我更喜欢采用“阅读更多”的方式，看了一下 Hugo 自身也支持“阅读更多”，通过使用.Summary 变量，生成内容摘要。默认摘要是文章内容的前 70 个单词（字数可以在配置文件中修改），也可以通过在文章中手动拆分。需要注意的地方是要识别中文字数需要在配置文件中将hasCJKLanguage设置成true。而且似乎自动识别的摘要是不带格式的（？ 总之我更倾向于手动拆分。
更具体地请见官方文档。
在 stack 主题中添加 readmore 的位置我找了半天（意外收获就是把主题结构给摸得差不多清楚了），最终加在了layouts/partials/article-list/default.html中：
1{{ partial "article/components/header" . }}
2<!--在此处添加以下代码-->
3<div class="article-content">
4 {{ .Summary }} {{ if .Truncated }}
5 <!-- This <div> includes a read more link, but only if the summary is truncated... -->
6 <div class="read-more">
7 <a href="{{ .RelPermalink }}">» READ MORE</a>
8 </div>
9</div>
10{{ end }}