上期用hugo搭建一个属于自己的博客搭建了一个博客，本期博客从三个方面详细讲解配置一个“优雅”的博客
基础配置
这部分将从基础配置文件角度配置自己的博客
配置正确的阅读统计
写了一段时间博客，会发现即使有的博客写的字数很多，但他阅读时间仅为1分钟，这是由于当前博客并未正确配置字数统计，需要注意的是，阅读时间是有字数计算得出。
将上述内容修改成true，将其修改后，字数统计将加入zh-cn ja ko。从而阅读时间正确。
配置上次修改时间
有的时候，博客从创立到写完需要很长时间，也有时候出现后续修改之前写的博客的情况，因此在特定情况下，最后修改时间比博客创建时间更重要，最后修改时间也是时效性的彰显。对于项目，我们一般采用git进行版本管理，而在git中会记录提交时间，将其作为最后修改时间是不错的选择。
1
2
3
|
ableGitInfo = true
[frontmatter]
lastmod = [":git", ":fileModTime", "lastmod", ":default"]
|
添加如上内容到hugo.toml
配置代码高亮
博客中时长会出现代码，默认的代码格式丑陋且不带有行数显示，配置一个好看的代码显示无论是对未来自己再次阅读还是别人阅读来说都是不错的体验。
- 配置config/_default/makeup.toml
1
2
3
4
5
6
7
8
|
[highlight]
noClasses = false
codeFences = true
guessSyntax = true
lineNoStart = 1
lineNos = true
lineNumbersInTable = true
tabWidth = 4
|
界面配置
这里的配置主要参考 themes\hugo-theme-stack\exampleSite\content。
为分类添加封面
在自己的content的目录下创建categories自己定义的类别，然后创建_index.md。例如：
该博客博客头为：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
---
title : '优雅的博客界面'
description : "本文将介绍一些Hugo主题Stack的配置，从而让自己的博客"
date : 2024-05-01T21:08:43+08:00
draft : true
slug : "blog-config"
image : "hugo-stack.png"
categories :
- tech
tags :
- Hugo
- Stack
- Blog
---
|
因此该博客属于tech类，创建content\categories\tech_index.md
编辑其内容为
1
2
3
4
5
6
7
8
9
|
---
title: "技术"
description: "记录一些新学的知识"
slug: "tech"
image: "tech.png"
style:
background: "#df705e"
color: "#fff"
---
|
侧边菜单栏
在自己的content的目录下创建page自己定义的类别，然后创建index.md。例如：
添加归档与RSS订阅
- 归档
创建content\page\archives\index.md添加以下内容
1
2
3
4
5
6
7
8
9
10
11
|
---
title: "归档"
date: 2024-04-20
layout: "archives"
slug: "archives"
menu:
main:
weight: -70
params:
icon: archives
---
|
- RSS订阅
创建content\page\rss\index.md添加如下内容
1
2
3
4
5
6
7
8
9
10
|
---
title: RSS订阅
menu:
social:
weight: -90
params:
icon: rss
comments : false
---
[https://blog.mokuai.space/index.xml](https://blog.mokuai.space/index.xml)
|
其余的界面级侧边栏参考themes\hugo-theme-stack\exampleSite\content\page中内容
魔改主题
通过修改主题中的内容，配置出独特的主题功能
修正部分汉语翻译
复制themes\hugo-theme-stack\i18n\zh-cn.yaml到i18n\zh-cn.yaml文件
1
2
3
4
5
6
7
8
9
|
darkMode:
- other: 暗色模式
+ other: 深色模式
...
lastUpdatedOn:
- other: 最后更新于
+ other: 最后修改于
|
通过如上修改使汉语翻译更符合习惯。
修改自定义页脚
复制themes\hugo-theme-stack\layouts\partials\footer\footer.html到layouts\partials\footer\footer.html文件
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<section class="powerby">
{{ with .Site.Params.footer.customText }}
{{ . | safeHTML }} <br/>
{{ end }}
- {{- $Generator := `<a href="https://gohugo.io/" target="_blank" rel="noopener">Hugo</a>` -}}
- {{- $Theme := printf `<b><a href="https://github.com/CaiJimmy/hugo-theme-stack" target="_blank" rel="noopener" data-version="%s">Stack</a></b>` $ThemeVersion -}}
- {{- $DesignedBy := `<a href="https://jimmycai.com" target="_blank" rel="noopener">Jimmy</a>` -}}
+ <a href="https://icp.gov.moe/?keyword=20240417" target="_blank">萌ICP备20240417号</a>
- {{ T "footer.builtWith" (dict "Generator" $Generator) | safeHTML }} <br />
- {{ T "footer.designedBy" (dict "Theme" $Theme "DesignedBy" $DesignedBy) | safeHTML }}
</section>
|
关于相关框架链接、主题链接与主题作者链接已经迁移至感谢
添加字数统计与最后修改时间
复制themes\hugo-theme-stack\layouts\partials\article\components\details.html到layouts\partials\article\components\details.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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
{{ if $showFooter }}
<footer class="article-time">
{{ if $showDate }}
<div>
{{ partial "helper/icon" "date" }}
<time class="article-time--published">
{{- .Date.Format (or .Site.Params.dateFormat.published "Jan 02, 2006") -}}
</time>
</div>
{{ end }}
+ {{- if ne .Lastmod .Date -}}
+ <div>
+ {{ partial "helper/icon" "edit" }}
+ <time class="article-lastmod">
+ {{ .Lastmod.Format ( or .Site.Params.dateFormat.lastUpdated "Jan 02, 2006 15:04 MST" ) }}
+ </time>
+ </div>
+ {{- end -}}
{{ if $showReadingTime }}
<div>
{{ partial "helper/icon" "clock" }}
<time class="article-time--reading">
{{ T "article.readingTime" .ReadingTime }}
</time>
</div>
{{ end }}
+ {{ if .Site.Params.article.readingTime }}
+ <div>
+ {{ partial "helper/icon" "brush" }}
+ <time class="article-words">
+ {{ .WordCount }}字
+ </time>
+ </div>
+ {{ end }}
</footer>
{{ end }}
{{ if .IsTranslated }}
<footer class="article-translations">
{{ partial "helper/icon" "language" }}
<div>
{{ range .Translations }}
<a href="{{ .Permalink }}" class="link">{{ .Language.LanguageName }}</a>
{{ end }}
</div>
</footer>
{{ end }}
|
