Hugo建站应当有个记录

2024/5/19

建站

在我刚开始尝试建立博客的一个月，可以说是ʚ✞大失败✞ɞ

先是忘记安装golang博客永远无法渲染成功，再是好不容易使用stack-quick-start建站成功，才发现使用这个模板建成的博客结构和网上教程的完全不同，很多东西无法参考。

工作之余断断续续折腾了一个月。意外间发现了小球飞鱼老师分享的stack模板，靠着之前踩坑的经验教训，一次配置成功了！感谢！

参考鸣谢：Hugo | Hugo-stack-theme 主题魔改版 | 小球飞鱼

在hugo-stack博客的配置和装修过程中，kyo老师的教程详细全面，实在是小白前进路上的引路人

参考鸣谢：第三夏尔 | Third Shire

2024/6/15

参考鸣谢
- hugo stack 主题美化 (yelleis.top)
- 如何取消Archive页面中对Categories图片的颜色修正 · Issue #364 · CaiJimmy/hugo-theme-stack · GitHub
操作：将/assets/ts/main.ts里第九行给注释掉

1
2
3
4
5
6
7


import StackGallery from "ts/gallery";
// import { getColor } from 'ts/color';
import menu from 'ts/menu';
import createElement from 'ts/createElement';
import StackColorScheme from 'ts/colorScheme';
import { setupScrollspy } from 'ts/scrollspy';
import { setupSmoothAnchors } from "ts/smoothAnchors";

短代码

路径：layouts/shortcodes
参考鸣谢
- Hugo | 在 Stack 主题上可行的短代码们 (sleepymoon.cyou)

隐藏右侧年份归档目录

路径：/config.yaml/
将想隐藏的部分添加注释

1
2
3
4
5
6
7


    widgets:
        enabled:
            - search
            - toc
            - categories
            # - archives
            - tag-cloud

在主页卡片显示标签

路径：layouts\partials\article\components\details.html
挑选喜欢的位置插入tags

想美化格式直接问chatgpt

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


  {{ if .Params.tags }}
  <div>
      <div class="article-tags">
          {{ range (.GetTerms "tags") }}
              <a href="{{ .RelPermalink }}" style="border-radius: 50px;padding: 2px 8px; display: inline-block;margin-right: 5px; margin-bottom: 5px; border: 1px solid;">
                  #{{ .LinkTitle }}
              </a>
          {{ end }}
      </div>
  </div>
 {{ end }}

2024/6/17

配置Waline评论

参考鸣谢：Hugo Stack主题博客添加Waline评论系统

2024/6/18

调整代码块样式

参考鸣谢：Hugo | 看中 Stack 主题的归档功能，搬家并做修改 | 小球飞鱼
路径：\config.yaml

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


markup:
	highlight:
		codeFences: true //代码围栏功能，一般设为true
		guessSyntax: true //猜测语法，设置为true后自动匹配可能的语法
		hl_Lines: "" //从第几行开始高亮，一般不设置
		lineNoStart: 1 //行号从编号几开始显示
		lineNos: ture //是否显示行号
		lineNumbersInTable: true //是否使用表来格式化行号和代码，一般设为true，设置true后页面的代码框就不再接连整个文章页面了，但是copy模块会只会复制行号，不知道为什么
		noClasses: true //使用class标签，设为false后代码框背景消失
		style: native //样式风格
		tabWidth: 4 //代码缩进字符数

Waline留言显示Failed to fetch，购买并配置域名

参考鸣谢：
域名网站：https://www.namesilo.com/

2024/6/23

更改文章和目录网址

分享博文的链接太不简洁

我的hugo设置的是英文版，但是目录是中文，不知道是不是因为这个原因总是出错，总之一起修改成英文的

操作：

1）在/config.yaml中增加categories行

1
2
3
4


permalinks:
    post: /:year/:slug/
    page: /:slug/
    categories: /categories/:slug/

2）/content/categories/中更改目录的文件夹名为英语

3） _index.md文件表头添加slug以及想显示的文件夹名title

1
2
3
4


title: 技术力
slug: geek
description: 
image: cover.jpg

4）修改每篇博文表头目录为英文这时发现虽然索引跳转正确，但是右侧widget的categories显示的是英文的目录，问了下Chatgpt

在Hugo的首页上，如果分类（categories）显示的是slug而不是title，可以通过自定义模板来解决这个问题。你需要修改Hugo的模板文件，以确保在显示分类时使用分类的title而不是slug。

操作：将/layouts/partials/widget/categories.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


{{- $query := first 1 (where .Site.Pages "Layout" "==" "archives") -}}
{{- if $query -}}
    {{- $archivesPage := index $query 0 -}}
    <section class="widget categories">
        <div class="widget-icon">
            {{ partial "helper/icon" "infinity" }}  
        </div> 
        <h2 class="widget-title section-title">Categories</h2>
    <div class="widget-categories--list">
<div class="widget">
    <h3 class="widget-title"> {{ T "widget_categories" }}</h3>
    <div class="widget-body">
        <div class="category-list">
            {{- range $name, $taxonomy := $.Site.Taxonomies.categories }}
            {{- with $.Site.GetPage (printf "/categories/%s" $name) }}
            <div class="category-list-item">
                <a href="{{ .Permalink }}" class="category-list-link">
                    {{ .Title }} <!-- 使用分类页面的标题 -->
                    <span class="category-list-count">{{ $taxonomy.Count }}</span>
                </a>
            </div>
            {{- end }}
            {{- end }}
        </div>
    </div>
</div>
    </div>
    </section>
{{- else -}}
    {{- warnf "Archives page not found. Create a page with layout: archives." -}}
{{- end -}}

内容折叠

参考鸣谢：Hugo Stack主题装修笔记
网址：stackoverflow
代码

1
2
3
4
5


<details>
      <summary>Click to expand!</summary>
      
     Hidden explanation
</details>