【Hugo】主题个性化设置

博客的基础设置，主要以hugo.yaml文件为主。详细参考官方文件stack中文文档和stack官方文档

以下所有修改操作请养成备份的习惯

1.调试

部署到github上反复调试太过麻烦，可以使用以下方法：

在blog主目录唤起CMD调试窗口
键入hugo server -D启动网页。复制http://localhost:1313/打开网页。
在hugo.yaml中更新的内容保存后，在http://localhost:1313/网页会立刻显现。

2.主页功能

中英文

DefaultContentLanguage：博客默认语言。设置为：zh-cn
将languages下除zh-cn的语言删除

1
2
3
4
5
6
7
8


DefaultContentLanguage: zh-cn
languages:
 zh-cn:
     languageName: 简体中文
     title: 林梦飞		#站名
     weight: 2
     params:
         description: 演示说明	

单页文章数

搜索pagerSize，修改数量即可

1
2
3


# 单页文章数量
pagination:
    pagerSize: 5

头像、站名、简介

1
2
3
4
5
6
7


sidebar:
     emoji: 🤣
     subtitle: 欢迎来到我的blog，搭建中	#blog简介
     avatar:							#blog头像
         enabled: true
         local: true
         src: img/avatar.jpg				#头像文件位置主文件夹下assets\img

本地路径：请把图片放在站点根目录的 assets/img 文件夹下。例如 assets/img/avatar.jng, 并填入 img/avatar.jng.
图片最大支持150*150

网站图标

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


params:	
 mainSections:
      post
 featuredImageField: image
 rssFullContent: true
 favicon: /favicon.ico

     footer:		#页脚
         since: 2024
         customText:

     dateFormat:
         published: 2006-01-02	#这里按照2006-01-02设置
         lastUpdated: 2006-01-02

favicon存放ico图像，可以去网上找一个。存放在主目录的static文件夹下

社交链接

1
2
3
4
5
6


social:				#ico文件在F:\blog\myblog\assets\icons
    - identifier: github
      name: GitHub
      url: https://github.com/hff0910
      params:
          icon: brand-github

ico文件存在主目录的\assets\icons内
icons文件可以直接从这里下载：Tabler Icons

3.修改背景色

修改主题文件夹下assets/scss/variables.scss文件

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


/*
*   Global style
*/
:root {
    --main-top-padding: 35px;

    @include respond(xl) {
        --main-top-padding: 50px;
    }

    --body-background: #00000033;//white#f5f5fa    mycolor#00000033

    --accent-color: #34495e;
    --accent-color-darker: #2c3e50;
    --accent-color-text: #fff;
    --body-text-color: #707070;//#707070

修改文章卡片颜色

1
2
3
4
5
6


/*
*   Card style
*/
:root {
    --card-background: #ffffff73;    //old color#fff   mycolor#ffffff73
    --card-background-selected: #eaeaea;

4.友链、归档多列显示

修改主题文件夹下assets/scss/custom.scss文件(不存在则自行创建)，引入以下css样式代码

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


@media (min-width: 1024px) {
  .article-list--compact {
    display: grid;
    // 目前是两列，如需三列，则后面再加一个1fr，以此类推
    grid-template-columns: 1fr 1fr;
    background: none;
    box-shadow: none;
    gap: 1rem;

    article {
      background: var(--card-background);
      border: none;
      box-shadow: var(--shadow-l2);
      margin-bottom: 8px;
      margin-right: 8px;
      border-radius: 16px;
    }
  }
}

5.添加“回到顶部”按钮

准备一张回到顶部（右键另存）的图片，放到assets/icons文件夹下(不存在则自行创建)

将以下代码复制到主题文件夹下layouts/partials/footer/custom.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


<style>
    #backTopBtn {
        display: none;
        position: fixed;
        bottom: 30px;
        z-index: 99;
        cursor: pointer;
        width: 30px;
        height: 30px;
        background-image: url({{ (resources.Get "icons/backTop.svg").Permalink }});
    }
</style>

<script>
    /**
     * 滚动回顶部初始化
     */
    function initScrollTop() {
        let rightSideBar = document.querySelector(".right-sidebar");
        if (!rightSideBar) {
            return;
        }
        // 添加返回顶部按钮到右侧边栏
        let btn = document.createElement("div");
        btn.id = "backTopBtn";
        btn.onclick = backToTop
        rightSideBar.appendChild(btn)
        // 滚动监听
        window.onscroll = function() {
            // 当网页向下滑动 20px 出现"返回顶部" 按钮
            if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
                btn.style.display = "block";
            } else {
                btn.style.display = "none";
            }
        };
    }

    /**
     * 返回顶部
     */
    function backToTop(){
        window.scrollTo({ top: 0, behavior: "smooth" })
    }

    initScrollTop();
</script>

6.代码块折叠按钮

准备一张向下展开图片(右键另存)，放到assets/icons目录下

将以下代码复制进主题文件夹下layouts/partials/footer/custom.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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80


<style>
    .highlight {
        /* 你可以根据需要调整这个高度 */
        max-height: 400px;
        overflow: hidden;
    }

    .code-show {
        max-height: none !important;
    }

    .code-more-box {
        width: 100%;
        padding-top: 78px;
        background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(#fff));
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
    }

    .code-more-btn {
        display: block;
        margin: auto;
        width: 44px;
        height: 22px;
        background: #f0f0f5;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        padding-top: 6px;
        cursor: pointer;
    }

    .code-more-img {
        cursor: pointer !important;
        display: block;
        margin: auto;
        width: 22px;
        height: 16px;
    }
</style>

<script>
  function initCodeMoreBox() {
    let codeBlocks = document.querySelectorAll(".highlight");
    if (!codeBlocks) {
      return;
    }
    codeBlocks.forEach(codeBlock => {
      // 校验是否overflow
      if (codeBlock.scrollHeight <= codeBlock.clientHeight) {
        return;
      }
      // 元素初始化
      // codeMoreBox
      let codeMoreBox = document.createElement('div');
      codeMoreBox.classList.add('code-more-box');
      // codeMoreBtn
      let codeMoreBtn = document.createElement('span');
      codeMoreBtn.classList.add('code-more-btn');
      codeMoreBtn.addEventListener('click', () => {
        codeBlock.classList.add('code-show');
        codeMoreBox.style.display = 'none';
        // 触发resize事件，重新计算目录位置
        window.dispatchEvent(new Event('resize'))
      })
      // img
      let img = document.createElement('img');
      img.classList.add('code-more-img');
      img.src = {{ (resources.Get "icons/codeMore.png").Permalink }}
      // 元素添加
      codeMoreBtn.appendChild(img);
      codeMoreBox.appendChild(codeMoreBtn);
      codeBlock.appendChild(codeMoreBox)
    })
  }

  initCodeMoreBox();
</script>

7.隐藏目录

将以下代码复制到主题文件夹下layouts\partials\widget\toc.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
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129


 {{ if (.Context.Scratch.Get "TOCEnabled") }}
<!-- 如果 .Context.Scratch 中包含名为 "TOCEnabled" 的值，则执行以下代码 -->
<button id="toggle-toc">Toc</button>
<!-- 创建一个按钮，用于展开和收起目录 -->
<section class="widget archives" id="toc-container">
    <!-- 创建一个带有 "archives" 类的区块，并添加一个唯一的 ID 用于操作 -->
    <h2 class="widget-title section-title">{{ T "article.tableOfContents" }}</h2>
    <!-- 创建一个带有 "widget-title" 和 "section-title" 类的标题区块，并显示 "article.tableOfContents" 的本地化内容 -->

    <div class="widget--toc">
        <!-- 创建一个带有 "widget--toc" 类的目录区块 -->
        {{ .Context.TableOfContents }}
        <!-- 显示文章的目录内容 -->
    </div>
</section>
{{ end }}

<style>
    #mulu {
        z-index: 9999;
    }
    
    #toc-container {
        display: none;
        /* 初始时隐藏目录 */
        position: fixed;
        /* 使用固定定位，使其固定在视口中 */
        bottom: 21%;
        /* 距离视口顶部的距离，可以根据需要进行调整 */
        right: 60px;
        /* 距离视口右侧的距离，可以根据需要进行调整 */
        background-color: var(--card-background);
        /* 可选：设置背景颜色 */
        padding: 10px;
        /* 可选：添加一些内边距 */
        border: 1px solid #96979a50;
        border-radius: var(--card-border-radius);
        box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
        /* 可选：添加边框样式 */
        z-index: 9998 !important;
        /* 可选：设置 z-index 以确保它显示在其他元素之上 */
        max-height: 80vh;
        /* 设置最大高度为视口高度的 80% */
        overflow-y: auto;
        /* 添加垂直滚动条，以便在内容溢出时滚动 */
        width: auto;
        /* 让容器的宽度自适应内容 */
        max-width: 290px;
    }
    
    #toggle-toc {
        position: fixed;
        bottom: 22%;
        right: 20px;
        padding: 10px 10px;
        z-index: 9998 !important;
        border: 0px solid #96979a50;
        border-radius: 7px;
        box-shadow: var(--shadow-l1);
        background-color: #00640010;
        color: #34495e;
        /* 确保按钮在其他元素之上 */
        /* 其他样式保持不变 */
        display: block;
        /* 显示按钮 */
        margin-bottom: 10px;
        cursor: pointer;
        font-size: 1.2rem;
        /* 可选：改变鼠标光标以指示按钮是可点击的 */
    }
    
    .widget--toc #TableOfContents {
        overflow-x: auto;
        max-height: 66vh;
        width: auto;
    }
    
    @media screen and (max-width: 768px) {
        #toggle-toc {
            bottom: 100px;
        }
    }
</style>

<script>
    // 获取按钮和目录的元素
    var toggleButton = document.getElementById('toggle-toc');
    var tocContainer = document.getElementById('toc-container');
    var scrollThreshold = 0; // 设置滚动显示的阈值

    // 监听页面滚动事件
    window.addEventListener('scroll', function() {
        // 获取当前滚动位置
        var scrollY = window.scrollY || window.pageYOffset;

        // 检查滚动位置是否超过阈值
        if (scrollY >= scrollThreshold) {
            // 显示按钮
            toggleButton.style.display = 'block';
        } else {
            // 隐藏按钮
            toggleButton.style.display = 'none';
        }
    });

    // 添加点击事件处理程序
    toggleButton.addEventListener('click', function() {
        // 切换目录的显示状态
        if (tocContainer.style.display === 'none' || tocContainer.style.display === '') {
            tocContainer.style.display = 'block';
        } else {
            tocContainer.style.display = 'none';
        }
    });
    // 当鼠标悬浮在按钮上时显示目录
    toggleButton.addEventListener('mouseover', function() {
        tocContainer.style.display = 'block';
    });


    // 添加点击页面空白处的事件处理程序
    document.addEventListener('click', function(event) {
        // 检查点击事件是否发生在目录容器之外，并且不是按钮本身
        if (!tocContainer.contains(event.target) && event.target !== toggleButton) {
            // 点击发生在目录容器之外，隐藏目录容器
            tocContainer.style.display = 'none';
        }
    });
</script>

8.目录去序号

在themes\hugo-theme-stack\assets\scss\custom.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
25
26


/* 彻底禁用目录自动编号 */
body .widget--toc #TableOfContents {
  // 禁用计数器初始化
  ol {
    counter-reset: none !important;
  }

  // 清除伪元素生成的序号
  li a:first-of-type:before {
    content: "" !important;          // 清空内容
    counter-increment: none !important; // 禁用递增
    display: none !important;         // 彻底隐藏伪元素
  }

  // 移除所有列表默认样式
  ol, ul {
    list-style-type: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
  }
}

/* 覆盖浏览器默认样式 */
#TableOfContents ol {
  list-style-type: none !important; // 防御性代码
}

9.标签提到文章前

在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


<div class="article-details">
    <!-- 这里开始 新增：分类和标签容器 -->
    <div class="metadata-container">
        {{ if .Params.categories }}
        <header class="article-category">
            {{ range (.GetTerms "categories") }}
                <a href="{{ .RelPermalink }}" {{ with .Params.style }}style="background-color: {{ .background }}; color: {{ .color }};"{{ end }}>
                    {{ .LinkTitle }}
                </a>
            {{ end }}
        </header>
        {{ end }}

        {{ if .Params.tags }} <!-- 新增标签块 -->
        <header class="article-tags">
            {{ range (.GetTerms "tags") }}
                <a href="{{ .RelPermalink }}" {{ with .Params.style }}style="background-color: {{ .background }}; color: {{ .color }};"{{ end }}>
                    #{{ .LinkTitle }}
                </a>
            {{ end }}
        </header>
        {{ end }}
    </div>

代码添加位置

在主题的 CSS 文件assets\scss\custom.css中添加以下样式：

 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


/* 新增：分类和标签并排布局 */
.metadata-container {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 1rem;
}

/* 标签样式（与分类保持风格一致） */
.article-tags {
  display: flex;
  gap: 8px;
  align-items: center; /* 新增：垂直居中 */
}

.article-tags a {
  display: inline-flex; /* 改为 inline-flex 以便对齐 */
  align-items: center;   /* 垂直居中 */
  justify-content: center; /* 水平居中（可选） */
  background: rgb(0, 0, 125);
  border-radius: 6px;
  padding: 10px 12px;    /* 调整 padding（上下增大） */
  font-size: 0.85em;
  transition: all 0.2s;
  line-height: 1;        /* 避免行高影响 */
}

.article-tags a:hover {
  background: rgba(125, 125, 125, 0.2);
}

10.菜单栏

下面的方法应该是不对的，但是能用一下。

在\content\page文件夹下新建一个文件夹例如：collection

新建index.md文件。复制以下代码：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


title: "嘻嘻"
date: 2019-05-28
layout: "collection"
slug: "collection"
comments: false
menu:
    main:
        weight: -70
        params: 
            icon: collection	#若找不到icon文件可以先改为search先用着

title：显示在页面的名字

collection：与文件名一致。icon文件存在主目录的\assets\icons内

搜索hugo.yaml文件找到homepage。并添加collection项

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


widgets:			#部件（主页左边部分）
    homepage:
        - type: search
        - type: links
          params:
              limit: 5
        - type: archives
          params:
              limit: 5
        - type: collection		#添加以下内容
          params:
              limit: 5

11.评论功能

目前采用utterances评论系统，但是这个评论需要登录github不太方便。

找到了waline评论系统，但是我很菜还没整明白。下面是waline的界面，我看到的大部分blog都是采用这种评论。

12.统计功能（unami）

unami官网在这里，注册并添加自己的域名。

将下面的代码复制下来

找到layouts/partials/head/custom.html文件复制代码即可

最后就完成啦，可以看到访问量和用户来源地等等。查看网址：Websites | Umami Cloud

我还不知道怎么把这个数据应用到自己的博客上，只能登录unami的网站看访问数据。