Hugo Stack主题使用和美化配置

hugo 安装和简单使用请查看上篇文档

添加 stack 主题

在个人站点目录，执行如下命令以git子模块的模式来添加Stack

1
2
3
4
5
6
7
8
# 添加主题
git submodule add https://github.com/CaiJimmy/hugo-theme-stack/ themes/hugo-theme-stack

# 更新主题
git submodule update --remote

# 查看主题版本号
git show

拉取完毕后，打开博客文件夹内的 theme/hugo-theme-stack/exampleSite，将文件夹内的 hugo.yaml 复制到站点根目录下，同时删除原有的 hugo.toml

为了打造更符合自己心意的站点，可能需要diy很多配置，所以需要将主题的资源复制到个人站点

1
2
3
4
5
xcopy themes\hugo-theme-stack\archetypes archetypes\ /E /I
xcopy themes\hugo-theme-stack\assets assets\ /E /I
xcopy themes\hugo-theme-stack\data data\ /E /I
xcopy themes\hugo-theme-stack\i18n i18n\ /E /I
xcopy themes\hugo-theme-stack\layouts layouts\ /E /I

配置说明

hugo.yaml 字段说明：

baseurl 博客的URL
languageCode 语言代码，例如zh-cn
theme 主题
paginate 每页显示的文章数量
title 网站名称
copyright 网站底部的个性化说明
DefaultContentLanguage 默认显示的语言
hasCJKLanguage CJK字数统计，如果编码是 zh-cn，需要改成 true
languages 多语言设置，如不需要只需要把别的多余的语言删除即可
services/googleAnalytics Google分析代码
params/favicon 站点logo
params/footer/since 创建博客的年份
params/dateFormat/published 发布时间格式
params/dateFormat/lastUpdated 最后更新时间格式
params/sidebar/emoji 头像右下角的emoji
params/sidebar/subtitle 位于头像下面的副标题
params/sidebar/avatar/src 头像图片位置，相对 assets/ 目录
menu/social 社交信息配置

使用表情

stack 已开启表情支持，可以在表情仓库查找需要的表情

使用本地图片

Hugo 会根据你内容文件的路径以及 permalinks 配置来生成 URL 和文件夹结构

例如：

1
2
3
4
5
├── post  
│   └── blog  
│       └── images  
│           └── test.png  
│   └── first.md  

编译以后：

1
2
3
4
5
6
7
8
├── public  
│   └── p
│       └── first
│           └── index.html
│   └── post 
│       └── blog  
│           └── images  
│               └── test.png  

会导致本地图片的相对路径改变，所以在使用本地图片时应相对 content/ 路径

在 first.md 中使用

1
![](/post/blog/images/test.png)

自定义小图标

打开 Tabler Icons ，搜索自己想要的图标，然后将 Size 拉到 24px ，再将 Stroke 拉到 2px

然后单击所需要的图标，网站会会自动复制下这个图标的svg代码，然后在网站根目录下的assets/icons/文件夹内创建一个 .svg 文件，就可以在配置中使用啦~

文章底部添加在 GitHub 上编辑此页

拷贝主题目录 assets\layouts\partials\article\components\footer.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
<footer class="article-footer">
    {{ partial "article/components/tags" . }}

    {{ if and (.Site.Params.article.license.enabled) (not (eq .Params.license false)) }}
    <section class="article-copyright">
        {{ partial "helper/icon" "copyright" }}
        <span>{{ default .Site.Params.article.license.default .Params.license | markdownify }}</span>
    </section>
    {{ end }}

    <!-- 在文章底部添加 github 编辑 -->
    {{ if and (.Site.Params.article.edit.enabled) (not (eq .Params.edit false)) }}
    <section class="article-edit">
        {{ partial "helper/icon" "brand-github" }}
        <span><a style="color: inherit;" href="https://github.com/iwyang/iwyang.github.io/edit/develop/content/{{ replace .File.Path "\\" "/" }}" target="_blank" rel="noopener noreferrer">在 GitHub 上编辑此页</a></span>
    </section>
    {{ end }}

    {{- if ne .Lastmod .Date -}}
    <section class="article-lastmod">
        {{ partial "helper/icon" "clock" }}
        <span>
            {{ T "article.lastUpdatedOn" }} {{ .Lastmod.Format ( or .Site.Params.dateFormat.lastUpdated "Jan 02, 2006 15:04 MST" ) }}
        </span>
    </section>
    {{- end -}}
</footer>

编辑 hugo.yaml

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

article:
    math: false
    toc: true
    readingTime: true 
    license:
        enabled: false
        default: Licensed under CC BY-NC-SA 4.0
    edit:
        enabled: true # 开关控制

自动更新文章最后修改时间

修改 hugo.yaml,在最后添加如下配置

1
2
3
4
5
6
7
8
9
frontmatter:
  # :git 文件提交修改时间
  # :fileModTime：文件修改时间
  # lastmod：文章里 lastmod 字段
  # :defalut：默认时间
  lastmod: [":git", "lastmod", ":fileModTime", ":defalut"]    
  
enableGitInfo: true
gitRepo: "https://github.com/weiweimhy/MyBlog"

文章加入字数统计

修改 layouts\partials\article\components\details.html, 添加如下内容

1
2
3
4
5
6
7
8
{{ if .Site.Params.article.wordCount }}
<div>
    {{ partial "helper/icon" "pencil" }}
    <time class="article-words">
        {{ .WordCount }} 字
    </time>
</div>
{{ end }}

在 hugo.yaml 打开开关

1
2
article:
    wordCount: true

站点总字数统计

修改 layouts\partials\footer\footer.html，添加如下内容

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
{{$scratch := newScratch}}
{{ range (where .Site.Pages "Kind" "page" )}}
{{$scratch.Add "total" .WordCount}}
{{ end }}

<section class="wordcount">
    <p>{{ div ($scratch.Get "total") 1000.0 | lang.FormatNumber 2 }}k 字
        <br>{{ len (where .Site.RegularPages "Section" "post") }}篇文章
    </p>
</section>

修改 \assets\scss\partials\footer.scss，添加如下内容

1
2
3
4
.wordcount {
    color: var(--accent-color);
    margin-bottom: 5px;
}

缩小归档页的分类卡片尺寸

默认的卡片有些太大了，修改 assets\scss\partials\layout\list.scss

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.subsection-list {
    overflow-x: auto;

    .article-list--tile {
        display: flex;
        padding-bottom: 0px;

        article {
            width: 150px;
            height: 90px;
            margin-right: 5px;
            flex-shrink: 0;

            .article-title {
                margin: 0;
                font-size: 1.8rem;
            }

            .article-details {
                padding: 20px;
            }
        }
    }
}

在首页文件列表显示内容简介

在首页文件列表显示内容简介，但是在文档页隐藏简介

修改 assets\layouts\partials\article-list\default.html, 添加

1
2
3
4
5
6
7
{{ with .Params.description }}
<div class="article-subtitle-wrapper">
    <h3 class="article-subtitle">
        {{ . }}
    </h3>
</div>
{{ end }}

修改 assets\scss\custom.scss, 添加

1
2
3
4
5
6
7
8
9
.article-subtitle-wrapper {
    padding-left: var(--card-padding);
    padding-right: var(--card-padding);
    padding-bottom: var(--card-padding);
}

.article-time {
    padding-top: 5PX 
}

删除 layouts\partials\article\components\details.html 中的 article-subtitle

在归档列表显示内容简介

修改 assets\layouts\partials\article-list\compact.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<div class="article-details">
<h2 class="article-title">
    {{- .Title -}}
</h2>
{{ with .Params.description }}
<div class="article-subtitle">
    {{ . }}
</div>
{{ end }}
<footer class="article-time">
    <time datetime='{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}'>
        {{- .Date.Format (or .Site.Params.dateFormat.published "Jan 02, 2006") -}}
    </time>
</footer>
</div>

代码块样式

修改边距
背景框添加圆角
调整 copy 按钮位置

修改 assets\scss\partials\layout\article.scss, 在文件尾添加

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
.highlight {
    margin-left: 0;
    margin-right: 0;
    width: calc(100%);
    border-radius: var(--card-border-radius);
}

.copyCodeButton {
    top: 5px;
    right: 5px;
}