博客建站 on 扎塔-Zata

给hugo博客的页面增加一个自定义密码（防君子不防小人）

Wed, 05 Mar 2025 17:14:05 +0800

在 Hugo 的 Stack 模板中为特定文章添加自定义密码保护并不是 Hugo 内置的功能，但可以通过结合 Hugo 的前端功能和一些自定义逻辑来实现。以下是一个分步指南，帮助你在 Stack 模板中为某些文章添加密码保护：

在页面当中添加一个密码验证（由于静态页面的特性，仍有方法在没有密码的情况下解除锁定，所以此方法不要当真,防君子不防小人）

1. 前提条件

你需要对 Hugo 的模板文件（如 .html 文件）有一定了解。
你需要编辑 Stack 模板的代码（通常位于 themes/Stack 目录下）。
每篇文章的密码在Front Matter 中定义。

2. 为文章添加密码字段

在需要密码保护的文章的 Front Matter 中添加一个自定义字段，例如 password。例如：

---
title: "受保护的文章"
date: 2025-03-05
password: "mysecretpassword" # 自定义密码
---
这是一篇受保护的文章内容。

如果某篇文章没有 password 字段，则默认不启用密码保护。

3. 修改模板文件

Stack 模板通常使用 layouts 文件夹中的模板来渲染文章页面。你需要修改渲染单篇文章的模板（通常是 themes/Stack/layouts/_default/single.html）。

示例修改：

在 single.html 中添加逻辑，检查文章是否有密码，并要求用户输入密码。以下是一个基本的实现思路：

{{ define "body-class" }}
 article-page
 {{/*
 Enable the right sidebar if
 - Widget different from 'TOC' is enabled
 - TOC is enabled and not empty
 */}}
 {{- $HasWidgetNotTOC := false -}}
 {{- $TOCWidgetEnabled := false -}}
 {{- range .Site.Params.widgets.page -}}
 {{- if ne .type "toc" -}}
 {{ $HasWidgetNotTOC = true -}}
 {{- else -}}
 {{ $TOCWidgetEnabled = true -}}
 {{- end -}}
 {{- end -}}

 {{- $TOCManuallyDisabled := eq .Params.toc false -}}
 {{- $TOCEnabled := and (not $TOCManuallyDisabled) $TOCWidgetEnabled -}}
 {{- $hasTOC := ge (len .TableOfContents) 100 -}}
 {{- .Scratch.Set "TOCEnabled" (and $TOCEnabled $hasTOC) -}}

 {{- .Scratch.Set "hasWidget" (or $HasWidgetNotTOC (and $TOCEnabled $hasTOC)) -}}
{{ end }}






{{ define "main" }}



 {{ if .Params.password }}
 <div id="password-prompt">
 <p>请输入密码以查看内容：</p>
 <input type="password" id="password-input" />
 <button onclick="checkPassword()">提交</button>
 </div>
 <div id="content" class="content" style="display: none;">
 {{ partial "article/article.html" . }}
 {{ if .Params.links }}
 {{ partial "article/components/links" . }}
 {{ end }}

 {{ partial "article/components/related-content" . }}

 {{ if not (eq .Params.comments false) }}
 {{ partial "comments/include" . }}
 {{ end }}

 {{ partialCached "footer/footer" . }}

 {{ partialCached "article/components/photoswipe" . }}
 </div>
 <script>
 function checkPassword() {
 const input = document.getElementById("password-input").value;
 const correctPassword = "{{ .Params.password }}";
 if (input === correctPassword) {
 document.getElementById("password-prompt").style.display = "none";
 document.getElementById("content").style.display = "block";
 } else {
 alert("密码错误！");
 }
 }
 </script>
 {{ else }}
 {{ partial "article/article.html" . }}
 {{ if .Params.links }}
 {{ partial "article/components/links" . }}
 {{ end }}

 {{ partial "article/components/related-content" . }}

 {{ if not (eq .Params.comments false) }}
 {{ partial "comments/include" . }}
 {{ end }}

 {{ partialCached "footer/footer" . }}

 {{ partialCached "article/components/photoswipe" . }}

 {{ end }}
{{ end }}


{{ define "right-sidebar" }}
 {{ if not .Params.password }}
 {{ if .Scratch.Get "hasWidget" }}{{ partial "sidebar/right.html" (dict "Context" . "Scope" "page") }}{{ end}}
 {{ end }}
{{ end }}

下面是single.html中原本的内容


<!--
{{ define "body-class" }}
 article-page
 {{/*
 Enable the right sidebar if
 - Widget different from 'TOC' is enabled
 - TOC is enabled and not empty
 */}}
 {{- $HasWidgetNotTOC := false -}}
 {{- $TOCWidgetEnabled := false -}}
 {{- range .Site.Params.widgets.page -}}
 {{- if ne .type "toc" -}}
 {{ $HasWidgetNotTOC = true -}}
 {{- else -}}
 {{ $TOCWidgetEnabled = true -}}
 {{- end -}}
 {{- end -}}

 {{- $TOCManuallyDisabled := eq .Params.toc false -}}
 {{- $TOCEnabled := and (not $TOCManuallyDisabled) $TOCWidgetEnabled -}}
 {{- $hasTOC := ge (len .TableOfContents) 100 -}}
 {{- .Scratch.Set "TOCEnabled" (and $TOCEnabled $hasTOC) -}}

 {{- .Scratch.Set "hasWidget" (or $HasWidgetNotTOC (and $TOCEnabled $hasTOC)) -}}
{{ end }}

{{ define "main" }}
 {{ partial "article/article.html" . }}

 {{ if .Params.links }}
 {{ partial "article/components/links" . }}
 {{ end }}

 {{ partial "article/components/related-content" . }}

 {{ if not (eq .Params.comments false) }}
 {{ partial "comments/include" . }}
 {{ end }}

 {{ partialCached "footer/footer" . }}

 {{ partialCached "article/components/photoswipe" . }}
{{ end }}

{{ define "right-sidebar" }}
 {{ if .Scratch.Get "hasWidget" }}{{ partial "sidebar/right.html" (dict "Context" . "Scope" "page") }}{{ end}}
{{ end }} -->

解释：

{{ if .Params.password }} 检查文章是否有 password 参数。
如果有，则显示一个密码输入框和提交按钮，内容默认隐藏。
用户输入密码后，JavaScript 会验证输入是否与文章的密码匹配。如果匹配，则显示内容；否则提示错误。
如果没有密码，则直接显示文章内容。

注意事项

静态网站限制：Hugo 生成的是静态网站，密码保护本质上是前端逻辑，安全性有限。如果需要真正的访问控制，建议使用 CMS 或动态后端。
Stack 模板兼容性：确保你的修改不会与 Stack 模板的现有样式或脚本冲突。如果有问题，可能需要调整 CSS 或 JavaScript。

hugo使用过程中遇到的问题

Wed, 05 Mar 2025 16:22:44 +0800

github action 遇到的问题

github action提示 you can try to increase the ’timeout’ config setting.

解决方法就是在这里增加一个timeout参数，可以把时间设置大一些

5-引入 Giscus 评论系统

Wed, 05 Mar 2025 14:46:18 +0800

参考：

https://www.lixueduan.com/posts/blog/02-add-giscus-comment/#1-%E9%80%89%E6%8B%A9%E4%B8%80%E4%B8%AA%E8%AF%84%E8%AE%BA%E7%B3%BB%E7%BB%9F

Stack 主题

1. 登录绑定应用

https://github.com/apps/giscus

然后选择你需要绑定的仓库

2.进入仓库开启Discussions

3.获取配置信息

进到下面的这个网站里面

https://giscus.app/zh-CN

然后按照这样配置就可以得到最后的配置文件

4.回到hugo.yaml把刚刚的配置填进去

红框里面是要改的地方

碰到的坑

上面的参考文章里面写的页面–discussion映射关系是使用pathname，但是我发现会乱码，就改成用title了

4-自定义Python函数创建博客：告别繁琐的文件头输入

Mon, 03 Mar 2025 16:32:39 +0800

以下是基于最新的需求重新撰写的博客文章，主题仍是“使用自定义Python函数创建博客，避免繁琐的文件头标准内容输入”。这次博客将反映新的功能：通过 categories、tags 和 title 三个参数生成文件夹和文件，并将路径组合为 categories/tags/title。

使用自定义Python函数创建博客：告别繁琐的文件头输入

在维护技术博客时，每次创建新文章都需要手动设置文件夹结构和标准化的Markdown文件头，例如标题、分类、标签和日期等。这种重复劳动不仅耗时，还容易出错。想象一下，如果能通过一个简单的命令，比如 zata create -c Python -t github -b MyProject，自动生成带有标准头部的博客文件，并按分类和标签组织目录结构，会不会让写作更高效？

在这篇博客中，我将展示如何用Python实现这一自动化工具，并将其打包成一个命令行可执行文件。通过自定义函数，我们可以轻松创建博客文件，避免手动输入繁琐的文件头内容。

背景与目标

假设你正在用静态网站生成器（如Jekyll或Hugo）写博客，每次新建文章时需要：

创建一个文件夹结构，比如 Python/github/MyProject。
在最内层文件夹中生成一个 index.md 文件。

为 index.md 添加标准头部，例如：

---
title: MyProject
description: "空"
date: 2025-03-03T15:20:45+08:00
image: images/index.png
categories:
 - Python
tags:
 - github
---

手动完成这些步骤虽然可行，但效率低下。我的目标是：

编写一个Python脚本，接受 categories、tags 和 title 三个参数。
根据输入生成路径 categories/tags/title，并创建对应的文件夹和 index.md 文件。
自动填充标准头部信息，日期使用当前时间。
将脚本打包成命令行工具，支持 zata create -c [分类] -t [标签] -b [标题] 的调用方式。

2025.03.03 初步实现可以使用命令行创建一个博客

步骤 1：设计基本功能

我们需要一个函数，根据输入的 categories、tags 和 title 创建文件夹和文件。以下是最小化的实现：

import os
from datetime import datetime

def create_folder_and_md(categories, tags, title):
 current_dir = os.getcwd()
 target_path = os.path.join(current_dir, categories, tags, title)
 current_time = datetime.now().strftime("%Y-%m-%dT%H:%M:%S+08:00")

 os.makedirs(target_path, exist_ok=True)
 md_file_path = os.path.join(target_path, "index.md")
 header_content = f"""---
title: {title}
description: "空"
date: {current_time}
image: images/index.png
categories:
 - {categories}
tags:
 - {tags}
---
"""
 with open(md_file_path, 'w', encoding='utf-8') as f:
 f.write(header_content)
 print(f"文件夹 '{target_path}' 和 'index.md' 创建成功！")

create_folder_and_md("Python", "github", "MyProject")

这个脚本会在当前目录下创建 Python/github/MyProject 文件夹，并在其中生成带有标准头部的 index.md。

步骤 2：添加命令行支持

为了让脚本更实用，我们引入 argparse 模块，支持命令行参数输入：

import os
from datetime import datetime
import argparse

def create_folder_and_md(categories, tags, title):
 current_dir = os.getcwd()
 target_path = os.path.join(current_dir, categories, tags, title)
 current_time = datetime.now().strftime("%Y-%m-%dT%H:%M:%S+08:00")

 try:
 os.makedirs(target_path, exist_ok=True)
 md_file_path = os.path.join(target_path, "index.md")
 header_content = f"""---
title: {title}
description: "空"
date: {current_time}
image: images/index.png
categories:
 - {categories}
tags:
 - {tags}
---
"""
 with open(md_file_path, 'w', encoding='utf-8') as f:
 f.write(header_content)
 print(f"文件夹 '{target_path}' 和 'index.md' 创建成功！")
 except Exception as e:
 print(f"发生错误: {str(e)}")

def main():
 parser = argparse.ArgumentParser(prog="zata", description="根据categories、tags和title创建一个文件夹和index.md文件")
 subparsers = parser.add_subparsers(dest="command", help="可用命令")
 create_parser = subparsers.add_parser("create", help="创建文件夹和index.md")
 create_parser.add_argument("-c", "--categories", required=True, help="博客分类")
 create_parser.add_argument("-t", "--tags", required=True, help="博客标签")
 create_parser.add_argument("-b", "--title", required=True, help="博客标题")
 args = parser.parse_args()

 if args.command == "create":
 create_folder_and_md(args.categories, args.tags, args.title)
 else:
 parser.print_help()

if __name__ == "__main__":
 main()

保存为 zata.py，运行以下命令测试：

python zata.py create -c Python -t github -b MyProject

步骤 3：打包成可执行文件

为了方便使用，我们用 PyInstaller 将脚本打包成单一的 .exe 文件：

安装 PyInstaller：
```
pip install pyinstaller
```
打包脚本：
```
pyinstaller --onefile zata.py
```
打包完成后，在 dist 文件夹中找到 zata.exe，运行：
```
zata.exe create -c Python -t github -b MyProject
```

成果展示

运行以下命令：

zata create -c Python -t github -b MyProject

结果：

生成目录结构：Python/github/MyProject。

在 MyProject 文件夹中创建 index.md，内容如下：

---
title: MyProject
description: "空"
date: 2025-03-03T15:20:45+08:00
image: images/index.png
categories:
 - Python
tags:
 - github
---

控制台输出：

文件夹 'Python/github/MyProject' 和 'index.md' 创建成功！

整个过程只需一条命令，省去了手动创建文件夹和输入文件头的麻烦。

2025.03.05 增加giu可以下拉选择来创建

import os
from datetime import datetime
import argparse
import tkinter as tk
from tkinter import ttk, messagebox

# 原有函数保持不变，返回值改为元组以适应 GUI 使用
def create_category(category):
 """创建category目录"""
 target_path = os.path.join("content", "post", category)
 try:
 os.makedirs(target_path, exist_ok=True)
 return True, f"Category目录 '{target_path}' 创建成功！"
 except Exception as e:
 return False, f"创建category时发生错误: {str(e)}"

def create_tag(category, tag):
 """创建tag目录，必须指定category"""
 base_path = os.path.join("content", "post")
 target_path = os.path.join(base_path, category, tag)

 category_path = os.path.join(base_path, category)
 if not os.path.exists(category_path):
 return False, f"错误：Category目录 '{category_path}' 不存在！请先创建category"

 try:
 os.makedirs(target_path, exist_ok=True)
 return True, f"Tag目录 '{target_path}' 创建成功！"
 except Exception as e:
 return False, f"创建tag时发生错误: {str(e)}"

def create_folder_and_md(categories, tags, title):
 """创建文章目录和index.md文件"""
 current_time = datetime.now().strftime("%Y-%m-%dT%H:%M:%S+08:00")
 base_path = os.path.join("content", "post")

 if categories:
 target_path = os.path.join(base_path, categories, tags, title)
 parent_path = os.path.join(base_path, categories, tags)

 if not os.path.exists(parent_path):
 return False, f"错误：父目录 '{parent_path}' 不存在！请先创建相应的categories和tags目录"
 else:
 matched_paths = []
 for category in os.listdir(base_path):
 category_path = os.path.join(base_path, category)
 if os.path.isdir(category_path):
 tag_path = os.path.join(category_path, tags)
 if os.path.exists(tag_path) and os.path.isdir(tag_path):
 matched_paths.append(tag_path)

 if len(matched_paths) == 0:
 return False, f"错误：未在任何category下找到tags '{tags}'！请先创建相应的tags目录"
 elif len(matched_paths) > 1:
 error_msg = f"错误：找到多个匹配的tags '{tags}'：\n"
 for path in matched_paths:
 error_msg += f" - {path}\n"
 error_msg += "请指定具体的category以避免歧义"
 return False, error_msg
 else:
 parent_path = matched_paths[0]
 target_path = os.path.join(parent_path, title)
 categories = os.path.basename(os.path.dirname(parent_path))

 try:
 os.makedirs(target_path, exist_ok=True)
 md_file_path = os.path.join(target_path, "index.md")

 header_content = f"""---
title: {title}
description: ""
date: {current_time}
image: images/index/index.png
"""
 if categories:
 header_content += f"""categories:
 - {categories}
"""
 header_content += f"""tags:
 - {tags}
---
"""

 if not os.path.exists(md_file_path):
 with open(md_file_path, 'w', encoding='utf-8') as f:
 f.write(header_content)
 return True, f"文件夹 '{target_path}' 和 'index.md' 创建成功！"
 return True, f"文件夹 '{target_path}' 已存在，跳过创建 'index.md'。"
 except Exception as e:
 return False, f"发生错误: {str(e)}"

# 新增函数：获取现有 Category 和 Tag 列表
def get_existing_categories():
 base_path = os.path.join("content", "post")
 if not os.path.exists(base_path):
 return []
 return [d for d in os.listdir(base_path) if os.path.isdir(os.path.join(base_path, d))]

def get_existing_tags(category=None):
 base_path = os.path.join("content", "post")
 if not os.path.exists(base_path):
 return []
 tags = set()
 if category:
 category_path = os.path.join(base_path, category)
 if os.path.exists(category_path):
 tags.update([d for d in os.listdir(category_path) if os.path.isdir(os.path.join(category_path, d))])
 else:
 for cat in os.listdir(base_path):
 cat_path = os.path.join(base_path, cat)
 if os.path.isdir(cat_path):
 tags.update([d for d in os.listdir(cat_path) if os.path.isdir(os.path.join(cat_path, d))])
 return sorted(list(tags))

# 修改后的 GUI
def create_gui():
 root = tk.Tk()
 root.title("Zata - 博客管理工具")
 root.geometry("500x400")

 notebook = ttk.Notebook(root)
 notebook.pack(pady=10, fill="both", expand=True)

 # Category选项卡
 category_frame = ttk.Frame(notebook)
 notebook.add(category_frame, text="创建Category")

 ttk.Label(category_frame, text="Category名称:").pack(pady=5)
 category_entry = ttk.Entry(category_frame, width=40)
 category_entry.pack(pady=5)

 def create_category_btn():
 category = category_entry.get().strip()
 if not category:
 messagebox.showerror("错误", "请输入Category名称")
 return
 success, msg = create_category(category)
 messagebox.showinfo("结果", msg)
 # 成功后刷新下拉框
 if success:
 update_category_combobox()

 ttk.Button(category_frame, text="创建Category", command=create_category_btn).pack(pady=10)

 # Tag选项卡
 tag_frame = ttk.Frame(notebook)
 notebook.add(tag_frame, text="创建Tag")

 ttk.Label(tag_frame, text="所属Category:").pack(pady=5)
 tag_category_entry = ttk.Entry(tag_frame, width=40)
 tag_category_entry.pack(pady=5)

 ttk.Label(tag_frame, text="Tag名称:").pack(pady=5)
 tag_entry = ttk.Entry(tag_frame, width=40)
 tag_entry.pack(pady=5)

 def create_tag_btn():
 category = tag_category_entry.get().strip()
 tag = tag_entry.get().strip()
 if not category or not tag:
 messagebox.showerror("错误", "请输入Category和Tag名称")
 return
 success, msg = create_tag(category, tag)
 messagebox.showinfo("结果", msg)
 # 成功后刷新下拉框
 if success:
 update_tag_combobox()

 ttk.Button(tag_frame, text="创建Tag", command=create_tag_btn).pack(pady=10)

 # 文章选项卡
 post_frame = ttk.Frame(notebook)
 notebook.add(post_frame, text="创建文章")

 # Category 下拉框
 ttk.Label(post_frame, text="选择Category（可选）:").pack(pady=5)
 category_combobox = ttk.Combobox(post_frame, width=37, state="readonly")
 category_combobox.pack(pady=5)

 # Tag 下拉框
 ttk.Label(post_frame, text="选择Tag:").pack(pady=5)
 tag_combobox = ttk.Combobox(post_frame, width=37, state="readonly")
 tag_combobox.pack(pady=5)

 ttk.Label(post_frame, text="文章标题:").pack(pady=5)
 post_title_entry = ttk.Entry(post_frame, width=40)
 post_title_entry.pack(pady=5)

 # 更新下拉框内容的函数
 def update_category_combobox():
 categories = get_existing_categories()
 category_combobox["values"] = [""] + categories # 空字符串表示可选
 if categories:
 category_combobox.set("")

 def update_tag_combobox(event=None):
 selected_category = category_combobox.get()
 if selected_category:
 tags = get_existing_tags(selected_category)
 else:
 tags = get_existing_tags()
 tag_combobox["values"] = tags
 if tags:
 tag_combobox.set(tags[0])
 else:
 tag_combobox.set("")

 # 绑定 Category 下拉框的选择事件
 category_combobox.bind("<<ComboboxSelected>>", update_tag_combobox)

 # 初始化下拉框
 update_category_combobox()
 update_tag_combobox()

 def create_post_btn():
 category = category_combobox.get() or None
 tag = tag_combobox.get()
 title = post_title_entry.get().strip()
 if not tag or not title:
 messagebox.showerror("错误", "请选择Tag并输入文章标题")
 return
 success, msg = create_folder_and_md(category, tag, title)
 messagebox.showinfo("结果", msg)

 ttk.Button(post_frame, text="创建文章", command=create_post_btn).pack(pady=10)

 root.mainloop()

def main():
 parser = argparse.ArgumentParser(prog="zata", description="博客目录和文件管理工具")
 subparsers = parser.add_subparsers(dest="command", help="可用命令")

 create_parser = subparsers.add_parser("create", help="创建文章文件夹和index.md")
 create_parser.add_argument("-c", "--categories", help="博客分类（可选）")
 create_parser.add_argument("-t", "--tags", required=True, help="博客标签")
 create_parser.add_argument("-b", "--title", required=True, help="博客标题")

 category_parser = subparsers.add_parser("create-category", help="创建category目录")
 category_parser.add_argument("-c", "--category", required=True, help="要创建的category名称")

 tag_parser = subparsers.add_parser("create-tag", help="创建tag目录")
 tag_parser.add_argument("-c", "--category", required=True, help="所属category")
 tag_parser.add_argument("-t", "--tag", required=True, help="要创建的tag名称")

 gui_parser = subparsers.add_parser("gui", help="启动图形界面")

 args = parser.parse_args()

 if args.command == "create":
 success, msg = create_folder_and_md(args.categories, args.tags, args.title)
 print(msg)
 elif args.command == "create-category":
 success, msg = create_category(args.category)
 print(msg)
 elif args.command == "create-tag":
 success, msg = create_tag(args.category, args.tag)
 print(msg)
 elif args.command == "gui":
 create_gui()
 else:
 parser.print_help()

if __name__ == "__main__":
 main()

3-hugo博客集成Netlify CMS

Mon, 03 Mar 2025 00:00:00 +0800

参考：

https://ttys3.dev/blog/setup-netlify-cms-for-hugo [低质量]

https://guanqr.com/tech/website/deploy-blog-to-netlify/

2-Hugo主题和配置

Sun, 02 Mar 2025 00:00:00 +0800

参考
https://letere-gzj.github.io/hugo-stack/

可能遇到的问题

如何插入嵌入式视频

B站

直接可以点击分享的嵌入代码然后粘贴到md文件中

<iframe
src="//player.bilibili.com/player.html?isOutside=true&aid=113991737148695&bvid=BV1qQK7eXERw&cid=28358870196&p=1"
scrolling="yes"
border="0"
frameborder="no"
framespacing="0"
allowfullscreen="true">
</iframe>

效果如下：

使用shortcode方式

参考：https://zhuanlan.zhihu.com/p/622866669

创建一个模板文件，内容可以为：

代码：

<div style="position:relative; padding-bottom:75%; width:100%; height:0">

<iframe
 src="//player.bilibili.com/player.html?bvid={{.Get 0 }}&page={{ if .Get 1 }}{{.Get 1}}{{ else }}1{{end}}&as_wide=1&high_quality=1"
 scrolling="no"
 border="0"
 frameborder="no"
 framespacing="0"
 allowfullscreen="true"
 style="position:absolute; height: 100%; width: 100%;"
>
</iframe>
</div>

然后使用下面的语法使用这个模板

效果如下：

< bilibili BV1tXRAYiEYR >

Hugo 文章日期设定上的小问题（时区问题）

参考： https://blog.hly0928.com/post/hugo-post-date-issue/

Hugo 在生成静态页面的时候，不会生成超过当前时间的文章；而 Hugo 默认采用的是格林尼治平时 (GMT)，比北京时间 (UTC+8) 晚了 8 个小时。也就是说，当北京时间在 08:00 之前，而你又将文章发布日期设在当天时，Hugo 就默认不会生成这个页面。

解决方法：最后我选择文章头增加时区信息

---
...
date: 2025-03-02T00:00:00+08:00
...
---

Stack 主题

hugo Stack 配置文件示例

baseurl: www.zata.cc # 定义网站的基础 URL，所有相对链接基于此生成，通常是域名
languageCode: en-us # 指定默认语言代码（如 en-us 表示美国英语）
theme: hugo-theme-stack # 指定使用的 Hugo 主题名称
title: Example Site # 网站的默认标题，显示在浏览器标签页或页面中
copyright: Example Person # 网站版权声明，通常显示在页脚

# Theme i18n support
# Available values: ar, bn, ca, de, el, en, es, fr, hu, id, it, ja, ko, nl, pt-br, th, uk, zh-cn, zh-hk, zh-tw
DefaultContentLanguage: zh-cn # 指定默认内容语言，这里是简体中文（zh-cn）

# Set hasCJKLanguage to true if DefaultContentLanguage is in [zh-cn ja ko]
# This will make .Summary and .WordCount behave correctly for CJK languages.
hasCJKLanguage: false # 是否启用 CJK 语言（中文、日文、韩文）的优化，这里关闭

languages:
 en:
 languageName: English # 语言名称为“英语”
 title: Example Site # 英文版本的网站标题
 weight: 1 # 语言优先级，数字越小优先级越高
 params:
 sidebar:
 subtitle: Example description # 英文侧边栏描述
 zh-cn:
 languageName: 中文 # 语言名称为“中文”
 title: Zata's Blog # 中文版本的网站标题
 weight: 2 # 优先级低于英文
 params:
 sidebar:
 subtitle: # 中文侧边栏描述（此处为空）
 # ar:
 # languageName: عربي # 示例：阿拉伯语名称
 # languagedirection: rtl # 示例：从右到左布局
 # title: موقع تجريبي # 示例：阿拉伯语标题
 # weight: 3 # 示例：优先级
 # params:
 # sidebar:
 # subtitle: وصف تجريبي # 示例：阿拉伯语侧边栏描述

services:
 # Change it to your Disqus shortname before using
 disqus:
 shortname: "hugo-theme-stack" # Disqus 评论系统的短名称，用于启用评论
 # GA Tracking ID
 googleAnalytics:
 id: # Google Analytics 的跟踪 ID（未填写）

pagination:
 pagerSize: 10 # 每页显示的文章数量，这里为 10 篇

permalinks:
 post: /p/:slug/ # 文章链接格式，例如 /p/my-post/
 page: /:slug/ # 普通页面链接格式，例如 /about/

params:
 mainSections:
 - post # 指定主要内容类型为 post（通常是博客文章）
 featuredImageField: image # 指定文章的特色图片字段为 image（文章头的key）
 rssFullContent: true # RSS 订阅输出完整文章内容，而非摘要
 favicon: # 网站图标路径（未设置，例如 /favicon.ico）
 # 网站图标路径#e.g.:favicon placed in static/favicon.ico of your site folder,then set thisfield to/favicon.ico(/is necessay)


 footer:
 since: 2020 # 显示网站起始年份（如“© 2020-2025”）
 customText: # 自定义页脚文本（未设置）

 dateFormat:
 published: Jan 02, 2006 # 文章发布日期格式（例如“Jan 02, 2006”）
 lastUpdated: Jan 02, 2006 15:04 MST # 最后更新时间的格式（包含时区）

 sidebar:
 emoji: 🍥 # 侧边栏显示的表情符号
 subtitle: Hello,I am Zata. # 侧边栏副标题
 avatar:
 enabled: true # 启用头像
 local: true # 头像文件存储在本地
 src: img/avatar.jpg # 头像文件路径

 article:
 math: false # 是否启用数学公式支持（关闭）
 toc: true # 启用文章目录（Table of Contents）
 readingTime: true # 显示阅读时间
 license:
 enabled: false # 是否显示许可声明（关闭）
 default: Licensed under CC BY-NC-SA 4.0 # 默认许可文本

 comments:
 enabled: true # 启用评论
 provider: disqus # 使用 Disqus 作为评论提供者

 disqusjs:
 shortname: # DisqusJS 的短名称（未设置）
 apiUrl: # DisqusJS 的 API 地址（未设置）
 apiKey: # DisqusJS 的 API 密钥（未设置）
 admin: # DisqusJS 管理员（未设置）
 adminLabel: # DisqusJS 管理员标签（未设置）

 utterances:
 repo: # Utterances 的仓库（未设置）
 issueTerm: pathname # Utterances 的问题标识方式（未设置）
 label: # Utterances 的标签（未设置）

 beaudar:
 repo: # Beaudar 的仓库（未设置）
 issueTerm: pathname # Beaudar 的问题标识方式（未设置）
 label: # Beaudar 的标签（未设置）
 theme: # Beaudar 的主题（未设置）

 remark42:
 host: # Remark42 的主机地址（未设置）
 site: # Remark42 的站点名称（未设置）
 locale: # Remark42 的语言（未设置）

 vssue:
 platform: # Vssue 的平台（未设置）
 owner: # Vssue 的拥有者（未设置）
 repo: # Vssue 的仓库（未设置）
 clientId: # Vssue 的客户端 ID（未设置）
 clientSecret: # Vssue 的客户端密钥（未设置）
 autoCreateIssue: false # Vssue 是否自动创建问题（关闭）

 # Waline client configuration see: https://waline.js.org/en/reference/component.html
 waline:
 serverURL: # Waline 的服务器地址（未设置）
 lang: # Waline 的语言（未设置）
 pageview: # Waline 的页面浏览量（未设置）
 emoji:
 - https://unpkg.com/@waline/emojis@1.0.1/weibo # Waline 的表情包地址
 requiredMeta:
 - name # Waline 的必填项：名称
 - email # Waline 的必填项：邮箱
 - url # Waline 的必填项：网址
 locale:
 admin: Admin # Waline 的管理员名称
 placeholder: # Waline 的占位符（未设置）

 twikoo:
 envId: # Twikoo 的环境 ID（未设置）
 region: # Twikoo 的区域（未设置）
 path: # Twikoo 的路径（未设置）
 lang: # Twikoo 的语言（未设置）

 # See https://cactus.chat/docs/reference/web-client/#configuration for description of the various options
 cactus:
 defaultHomeserverUrl: "https://matrix.cactus.chat:8448" # Cactus 的默认服务器地址
 serverName: "cactus.chat" # Cactus 的服务器名称
 siteName: "" # Cactus 的站点名称（需唯一，未设置）

 giscus:
 repo: # Giscus 的仓库（未设置）
 repoID: # Giscus 的仓库 ID（未设置）
 category: # Giscus 的分类（未设置）
 categoryID: # Giscus 的分类 ID（未设置）
 mapping: # Giscus 的映射方式（未设置）
 lightTheme: # Giscus 的亮色主题（未设置）
 darkTheme: # Giscus 的暗色主题（未设置）
 reactionsEnabled: 1 # Giscus 是否启用反应（启用）
 emitMetadata: 0 # Giscus 是否输出元数据（关闭）

 gitalk:
 owner: # Gitalk 的拥有者（未设置）
 admin: # Gitalk 的管理员（未设置）
 repo: # Gitalk 的仓库（未设置）
 clientID: # Gitalk 的客户端 ID（未设置）
 clientSecret: # Gitalk 的客户端密钥（未设置）
 proxy: # Gitalk 的代理（未设置）

 cusdis:
 host: # Cusdis 的主机地址（未设置）
 id: # Cusdis 的 ID（未设置）
 widgets:
 homepage:
 - type: search # 主页小部件：搜索框
 - type: archives # 主页小部件：归档列表
 params:
 limit: 5 # 归档列表限制显示 5 个
 - type: categories # 主页小部件：分类列表
 params:
 limit: 10 # 分类列表限制显示 10 个
 - type: tag-cloud # 主页小部件：标签云
 params:
 limit: 10 # 标签云限制显示 10 个
 page:
 - type: toc # 单页小部件：目录

 opengraph:
 twitter:
 # Your Twitter username
 site: # Twitter 用户名（未设置）
 # Available values: summary, summary_large_image
 card: summary_large_image # Twitter 卡片类型（大图模式）

 defaultImage:
 opengraph:
 enabled: false # 是否启用默认 Open Graph 图片（关闭）
 local: false # 是否使用本地图片（否）
 src: # 图片路径（未设置）

 colorScheme:
 # Display toggle
 toggle: true # 显示主题切换按钮
 # Available values: auto, light, dark
 default: auto # 默认使用自动主题（根据浏览器偏好）

 imageProcessing:
 cover:
 enabled: true # 启用封面图处理
 content:
 enabled: true # 启用内容图片处理

### Custom menu
### See https://stack.jimmycai.com/config/menu
### To remove about, archive and search page menu item, remove `menu` field from their FrontMatter
menu:
 main: [] # 主菜单（为空）
 social:
 - identifier: github # 社交链接：GitHub
 name: GitHub # 显示名称
 url: https://github.com/zata-zhangtao/ZataTree # 链接地址
 params:
 icon: brand-github # 图标名称

 # - identifier: twitter # 示例：Twitter 社交链接（已注释）
 # name: Twitter
 # url: https://twitter.com
 # params:
 # icon: brand-twitter

related:
 includeNewer: true # 相关文章推荐包括较新的文章
 threshold: 60 # 相关性阈值（越高越严格）
 toLower: false # 标签/分类是否忽略大小写
 indices:
 - name: tags # 根据标签匹配相关文章
 weight: 100 # 标签权重
 - name: categories # 根据分类匹配相关文章
 weight: 200 # 分类权重

markup:
 goldmark:
 extensions:
 passthrough:
 enable: true # 启用原始字符渲染（例如数学公式）
 delimiters:
 block:
 - - \[ # 块级数学公式开始分隔符
 - \] # 块级数学公式结束分隔符
 - - $$ # 块级数学公式开始分隔符
 - $$ # 块级数学公式结束分隔符
 inline:
 - - \( # 行内数学公式开始分隔符
 - \) # 行内数学公式结束分隔符
 renderer:
 ## Set to true if you have HTML content inside Markdown
 unsafe: true # 允许在 Markdown 中嵌入 HTML
 tableOfContents:
 endLevel: 4 # 目录包含到 4 级标题
 ordered: true # 目录编号
 startLevel: 2 # 从 2 级标题开始
 highlight:
 noClasses: false # 使用 CSS 类高亮代码
 codeFences: true # 启用代码块
 guessSyntax: true # 自动检测代码语言
 lineNoStart: 1 # 行号从 1 开始
 lineNos: true # 显示行号
 lineNumbersInTable: true # 行号显示在表格中
 tabWidth: 4 # 制表符宽度

frontmatter:
 lastmod: [":fileModTime", "lastmod"] # 定义最后修改时间的来源（文件修改时间或 frontmatter 中的 lastmod）

Hugo Stack 主题添加[最后修改于]

参考：

https://shitao5.org/posts/hugo-stack/

配置[最后修改于]

在主题的.yaml文件中添加
```
frontmatter:
lastmod: [":fileModTime", "lastmod"]
```
这样会显示最后更新于

如果要显示最后修改于 修改 themes/hugo-theme-stack/i18n 文件夹中的 zh-cn.yaml 文件

在文章开头就显示修改时间

参考：
https://letere-gzj.github.io/hugo-stack/p/hugo/custom-stack-theme/#3-%E6%98%BE%E7%A4%BA%E6%96%87%E7%AB%A0%E6%9B%B4%E6%96%B0%E6%97%B6%E9%97%B4

在themes\hugo-theme-satck\layouts\partials\article\components\details.html，在指定位置引入以下代码

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

在主题的.yaml文件中添加

# 更新时间：优先读取git时间 -> git时间不存在，就读取本地文件修改时间
frontmatter:
 lastmod:
 - :git
 - :fileModTime

# 允许获取Git信息 
enableGitInfo: true

这部分指定了Hugo获取lastmod值的优先级顺序：
:git：优先使用Git提交历史中的最后修改时间（更准确反映内容实际更新时间）。
:fileModTime：如果Git信息不可用，则使用本地文件的修改时间作为备选。
如果不设置这个，Hugo可能无法正确填充.Lastmod，导致你的代码 {{ if ne .Lastmod .Date }} 条件永远不生效。
enableGitInfo: true：
默认情况下，Hugo不会去查询Git信息（为了性能考虑）。
设置 enableGitInfo: true 后，Hugo会利用Git仓库的提交历史来填充页面变量（如 .Lastmod）。
如果你使用的是版本控制（比如GitHub），这个设置非常有用，因为它能确保修改时间反映的是内容的实际提交时间，而不是本地文件的时间（后者可能因环境不同而变化）。

修改github action文件.github/workflows/xxx.yaml，让可以读取git信息

- name: Git Configuration
run: |
 git config --global core.quotePath false
 git config --global core.autocrlf false
 git config --global core.safecrlf true
 git config --global core.ignorecase false

这些配置确保Git在构建过程中能够正确处理文件路径和换行符等问题，避免因环境差异导致的异常。
core.quotePath false：确保特殊字符的文件名不会被转义。
core.autocrlf false：避免换行符转换问题（不同系统可能处理不同）。
core.safecrlf true：确保换行符处理安全。
core.ignorecase false：保持文件名大小写敏感。
这些设置虽然不直接决定.Lastmod，但能确保Git仓库的行为一致，避免潜在问题。

代码块过长折叠&展开

准备一张图片作为代码展开的按钮，放到assets/icons文件夹下，并命名为codeMore.png
将下面代码复制粘贴到layouts/partials/footer/custom.html中(文件没有就新建)，有报错不要管

<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>

添加’返回顶部’按钮

图片还是和代码块过长一样放在/assets/icons文件夹下，命名为backtop.png
修改layouts/partials/footer/custom.html文件，下面的代码是直接在代码块折叠的基础上又加了返回最顶按钮.粘贴代码一样也是，vscode报错也别理

<style>
 .highlight {
 max-height: 400px;
 overflow: hidden;
 position: relative;
 }

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

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

 .code-more-btn {
 display: block;
 margin: 0 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 {
 display: block;
 margin: 0 auto;
 width: 22px;
 height: 16px;
 }

 #backTopBtn {
 display: none;
 position: fixed;
 bottom: 30px;
 right: 20px;
 z-index: 99;
 cursor: pointer;
 width: 30px;
 height: 30px;
 background-image: url({{ (resources.Get "icons/backtop.png").RelPermalink }});
 background-size: cover;
 background-repeat: no-repeat;
 }
</style>

<script>
 function initCodeMoreBox() {
 try {
 const codeBlocks = document.querySelectorAll(".highlight");
 if (!codeBlocks.length) return;

 codeBlocks.forEach(codeBlock => {
 if (codeBlock.scrollHeight <= codeBlock.clientHeight) return;

 const codeMoreBox = document.createElement('div');
 codeMoreBox.classList.add('code-more-box');

 const codeMoreBtn = document.createElement('span');
 codeMoreBtn.classList.add('code-more-btn');

 const img = document.createElement('img');
 img.classList.add('code-more-img');
 img.src = "{{ (resources.Get "icons/codemore.png").RelPermalink }}";
 img.alt = 'Show more';

 codeMoreBtn.addEventListener('click', () => {
 codeBlock.classList.add('code-show');
 codeMoreBox.style.display = 'none';
 window.dispatchEvent(new Event('resize'));
 });

 codeMoreBtn.appendChild(img);
 codeMoreBox.appendChild(codeMoreBtn);
 codeBlock.appendChild(codeMoreBox);
 });
 } catch (error) {
 console.error('Error in initCodeMoreBox:', error);
 }
 }

 function initScrollTop() {
 try {
 const rightSideBar = document.querySelector(".right-sidebar");
 if (!rightSideBar) {
 console.warn('Right sidebar not found');
 return;
 }

 const btn = document.createElement("div");
 btn.id = "backTopBtn";
 btn.onclick = backToTop;
 rightSideBar.appendChild(btn);

 window.onscroll = function () {
 if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
 btn.style.display = "block";
 } else {
 btn.style.display = "none";
 }
 };
 } catch (error) {
 console.error('Error in initScrollTop:', error);
 }
 }

 function backToTop() {
 window.scrollTo({ top: 0, behavior: "smooth" });
 }

 document.addEventListener('DOMContentLoaded', () => {
 initCodeMoreBox();
 initScrollTop();
 });
</script>

如何修改导航栏

修改content文件夹中的page文件夹下的文件夹，每一个文件夹代表一个导航栏

文件夹中的md文件就是页面

这里有一个奇怪的页面archives

看到源码，实际上主要是layout这个属性

这个layout属性对应的就是一个html页面，在主题中定义

archives页面中，卡片对应的图片在哪里

这些图片对应的也是页面，在content根目录下面创建两个文件夹，分别是categories和tags就可以了

其他主题（还没使用的

Book

后续： 2025-05-08

我去试了一些，直接修改主题并没有它示例上面的功能，但是想要改配置的话也没有教程可以参考，所以放弃

Lovelt

1-hugo安装使用

Fri, 28 Feb 2025 00:00:00 +0000

hugo

常用命令

# start the hugo server
hugo server -D

# build the hugo site
hugo -D

hugo使用注意事项

文件命名必须是index.xxxx.md

md文件+图片的组合，文件夹的名称是随意命名的，但文件夹里md文件的命名，必须为index.md或index.zh-cn.md否则图片资源可能在打包上传时会消失。

图片资源的放置位置有讲究 看下面两张图，三张图片在md文件中本地查看都是可以的，但是在打包上传时，最后一个图片资源可能会消失。

图片资源必须和.md文件在同一个文件夹下，否则图片资源可能在打包上传时会消失。

hugo在ubuntu系统下安装使用

2025年5月5日，本来想要在服务器上部署到，试了没成功，感觉挺难的，最后把服务器改成了windows系统 2025年7月14日，我在mac到容器中执行apt install hugo 很容易就安装上了啊

https://gohugo.io/getting-started/quick-start/

安装hugo

sudo apt install hugo

安装git

sudo apt install git-all

hugo在windwos安装使用

download 下载

https://github.com/gohugoio/hugo/releases

unzip to local 解压到本地 , example : here I created a folder

run the cmd command under the directory 在目录下面运行cmd命令 ,example : here I created a folder named zata

hugo new site zata

copy hugo.exe to zata folder 把hugo.exe复制到zata文件夹
run the cmd command under the directory 在目录下面运行cmd命令,example : here I created a folder named zata
then you can see the example site
next step, you need to install the theme
choose the theme you want to install , example : here I choose the theme named Stack
unzip the theme to the zata/themes folder, and delete the version number
copy [your-theme-name]/exampleSite/config.toml&content to zata/
delete the toml file, because the toml file is not used, the yaml file is used
delete rich-content folder,because the rich-content folder is cite some website, and the website is not used
run the cmd command under the directory in zata folder, then you can see:
then you can create a new post

hugo new content post/myFristBlog/index.md

myFtistBlog is the name of the page In hugo, a folder is a page, then the default language of index.md that you can modify in the hugo.yaml, the default language of index.zh-cn.md is Chinese, and the images used in md will be placed in this folder.

使用github部署hugo的静态页面常规方式（下面一节使用github action）

将hugo的编译成静态页面

修改配置文件中的baseurl,具体如何修改可以看下一节 :如何对应github静态页面的域名

在根目录下面使用hugo -D 命令生成静态页面 using “hugo -D” command to generate static pages in the root directory
```
hugo -D
```

这将生成一个public文件夹 This will generate a public folder

push 上一步生成的pulic文件夹到github

首先需要在github上创建一个仓库，这个仓库名如果是"[你的用户名].github.io" 那么后续生成的静态页面的地址就不会有后缀，不然就会有后缀，例如我的github名字是zata-zhangtao,我创建了一个仓库为zata-zhangtao.github.io，那么生成的静态页面的地址就是zata-zhangtao.github.io，而如果仓库名为zata-zhangtao, 那么生成的静态页面地址就会是zata-zhangtao.github.io/zata-zhangtao/

First, you need to create a repository on github, and if the repository name is “[your-username].github.io”, then the static pages will not have a suffix, otherwise there will be a suffix, for example, my github username is zata-zhangtao, I created a repository named zata-zhangtao.github.io, then the static pages address will be zata-zhangtao.github.io, but if the repository name iszata-zhangtao, then the static pages address will be z

把刚刚的public文件夹push到github上

push the public folder to github

具体的push命令和方式不在具体说明

the specific push command and way are not detailed

设置github静态页面 setting up github pages

进入仓库的设置页面，然后点击pages,然后再选你那个分支作为你的静态页面，选择完成之后，稍等几分钟，看到页面产生就可以使用了 into the repository settings page, click pages, then choose your branch as your static page, select complete, wait a few minutes, and see if the page is generated, and you can use it

如果你前面配置文件中的baseurl没有配置正确，可能会出现点击域名之后发现页面有问题，解决： 重新修改baseurl，并重新编译和push，并且注意编译的时候有没有报错 if the baseurl in the hogo.yaml is not configured correctly, you will find that the page is not displayed correctly after clicking the domain, solve it by modifying the baseurl, recompiling and pushing, and pay attention to whether there are any errors when compiling

然后你就可以看见你的静态页面了 then you can see your static page

github 自动部署hugo的静态页面

automatically deploy hugo’s static page by github action

参考网址：

https://www.bilibili.com/video/BV1bovfeaEtQ?p=4
https://gohugo.io/hosting-and-deployment/hosting-on-github/#build-hugo-with-github-action

“GitHub 自动部署 Hugo 的静态页面”是指利用 GitHub Actions（GitHub 提供的工作流自动化工具）来实现以下过程：当你推送 Hugo 项目代码到 GitHub 仓库时，自动完成 Hugo 静态网站的构建并将其部署到某个目标位置（通常是 GitHub Pages），无需手动操作。

在自己的根路径下面创建一个.github/workflows/hugo.yaml文件,并将如下代码复制粘贴进去 配置文件中有几点值得注意：

需要修改你的分支名，我这里是hugo,需要改成你自己的分支名

注意一下版本的问题，这里我默认版本是0.141.0，

# Sample workflow for building and deploying a Hugo site to GitHub Pages
name: Deploy Hugo site to Pages

on:
 # Runs on pushes targeting the default branch
 push:
 branches:
 - hugo  # 注意要要修改你的分支名

 # Allows you to run this workflow manually from the Actions tab
 workflow_dispatch:

# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions:
 contents: read
 pages: write
 id-token: write

# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
concurrency:
 group: "pages"
 cancel-in-progress: false

# Default to bash
defaults:
 run:
 shell: bash

jobs:
 # Build job
 build:
 runs-on: ubuntu-latest
 env:
 HUGO_VERSION: 0.141.0
 steps:
 - name: Install Hugo CLI
 run: |
 wget -O ${{ runner.temp }}/hugo.deb https://github.com/gohugoio/hugo/releases/download/v${HUGO_VERSION}/hugo_extended_${HUGO_VERSION}_linux-amd64.deb \
 && sudo dpkg -i ${{ runner.temp }}/hugo.deb
 - name: Install Dart Sass
 run: sudo snap install dart-sass
 - name: Checkout
 uses: actions/checkout@v4
 with:
 submodules: recursive
 fetch-depth: 0
 - name: Setup Pages
 id: pages
 uses: actions/configure-pages@v5
 - name: Install Node.js dependencies
 run: "[[ -f package-lock.json || -f npm-shrinkwrap.json ]] && npm ci || true"
 - name: Build with Hugo
 env:
 HUGO_CACHEDIR: ${{ runner.temp }}/hugo_cache
 HUGO_ENVIRONMENT: production
 TZ: America/Los_Angeles
 run: |
 hugo \
 --gc \
 --minify \
 --baseURL "${{ steps.pages.outputs.base_url }}/"
 - name: Upload artifact
 uses: actions/upload-pages-artifact@v3
 with:
 path: ./public

 # Deployment job
 deploy:
 environment:
 name: github-pages
 url: ${{ steps.deployment.outputs.page_url }}
 runs-on: ubuntu-latest
 needs: build
 steps:
 - name: Deploy to GitHub Pages
 id: deployment
 uses: actions/deploy-pages@v4

创建一个github仓库，然后进入setting，将build and development 改成Github Action ，并且修改环境变量 ctreate a github repository, then enter setting, change build and development to Github Action, and modify the environment variable

修改Github Action

修改环境变量
需要将自己的根目录上传到github的一个仓库中，push之前可以把public文件夹和resources文件夹忽略掉,因为这两个文件夹是hugo编译生成的,自动部署可以自己生成，就不需要了。同时你许要修改根路径下面的yaml文件，主要是其中的baseurl，修改为https://<username>.github.io/<repository> 当然如果你的仓库名是<username>.github.io就可以修改为https://<username>.github.io you need to upload your root directory to a github repository, the repository name is not important, you can ignore the public folder and resources folder before pushing,because these two folders are generated by hugo, you don’t need them. Also you need to modify the yaml file in the root directory, mainly the baseurl, modify it to https://<username>.github.io/<repository>, of course if your repository name is <username>.github.io you can modify it to https://<username>.github.io
准备好之后就可以push了，注意别push错了，必须要是之前配置环境变量和workflows里面的分支,push之后可以到action里面查看进度，稍后就可访问静态页面了 You are ready to push, don’t push wrong, you must push to the branch you configured in the environment variable and workflows,push it, you can see the progress in the action, and you can access the static page later

怎么使用自己的域名访问github pages

配置DNS 登录你自己的域名服务商,我的域名服务商是阿里云，这里配置两条记录,无论你原本是不是访问需要加分支名或者什么，解析地址都是<username>.github.io
到github仓库当中，修改如下配置：setting->Pages->Custom domain->输入你的域名->保存注意如果允许勾选enforce HTTPS，就一定勾选它，这会让你访问的时候浏览器显示安全

配置相关

配置页面的样式可以在项目的根目录下的config.yaml文件中进行配置。
默认index.md文件头

---
title: Chinese Test
description: 这是一个副标题
date: 2020-09-09
slug: test-chinese
image: helena-hertz-wWZzXlDpMog-unsplash.jpg
categories:
 - Test
 - 测试
---

内容解释

在 Hugo（一个流行的静态网站生成器）中，“slug” 是一个用于控制页面 URL 的重要概念。它通常在文件的**前端事项（front matter）**中定义，用于自定义页面或文章的 URL 路径的最后一段。以下是关于 Hugo 中 “slug” 的详细解释：

什么是 slug？

定义：Slug 是一个简洁、URL 友好的字符串，通常由小写字母、数字和连字符（-）组成，用于标识页面或内容的 URL。
作用：它替代了默认的文件名或标题生成的 URL 片段，让 URL 更简洁、可读，并且对搜索引擎优化（SEO）更友好。
默认行为：如果没有在前端事项中定义 slug，Hugo 会使用文件名（去掉扩展名）或标题（经过处理，如空格转为连字符）来生成 URL 的最后一段。

在 Hugo 中使用 slug 你可以在 Markdown 文件的前端事项中手动设置 slug。例如：

---
title: "我的第一篇文章"
slug: "my-first-post"
---

效果：假设文件位于 content/posts/ 目录下，默认情况下，URL 可能是 /posts/我的第一篇文章/（或根据配置转为拼音/其他形式）。设置了 slug: "my-first-post" 后，URL 会变成 /posts/my-first-post/。
适用范围：Slug 只影响 URL 的最后一段（文件名部分），不会改变目录结构（即 posts 部分仍由文件路径决定）。

slug vs 文件名

如果不设置 slug，Hugo 默认使用文件名。例如，文件名为 my-first-post.md，URL 会是 /posts/my-first-post/。
设置 slug 后，它会覆盖文件名。例如：
- 文件名：article-001.md
- 前端事项：slug: "new-article"
- 结果 URL：/posts/new-article/

slug 的规则和注意事项

字符限制：建议使用小写字母、数字和连字符，避免空格、特殊字符或大写字母，以符合 URL 标准。
与 url 的区别：Hugo 中还有一个 url 前端事项选项，它可以完全覆盖整个路径（包括目录部分），而 slug 只修改最后一段。例如：
```
---
slug: "my-post"
url: "/custom/path/to/my-post/"
---
```
- slug 只影响 /my-post 部分。
- url 会覆盖整个路径为 /custom/path/to/my-post/。

多语言支持：在多语言网站中，可以为每种语言设置不同的 slug。例如：

# content/post/my-post.en.md
---
slug: "my-post"
---
# content/post/my-post.fr.md
---
slug: "mon-article"
---