前言

在搭建Hugo博客的过程中，遇到了不少困难。主要原因是Hugo的版本迭代较快，导致网上很多教程已经过时，需要自己判断和验证。

Hugo项目结构详解

Hugo项目的目录结构中每个目录都有其特定的用途：

myblog/                  # 项目根目录
├── archetypes/         # 内容模板目录
│   └─ default.md      # 默认模板
├── assets/             # 需要处理的资源文件（如SCSS、JS等）
│   └── css/
│       └── extended/   # 自定义样式目录
├── content/            # 内容文件目录
│   ├── posts/         # 文章目录
│   │   ├── _index.md  # 文章列表页配置
│   │   ├── blog/      # 博客分类
│   │   ├── tech/      # 技术分类
│   │   ├── life/      # 生活分类
│   │   └── read/      # 阅读分类
│   ├── about.md       # 关于页面
│   ├── search.md      # 搜索页面
│   └── archives.md    # 归档页面
├── data/              # 数据文件目录（YAML、JSON、TOML）
├── layouts/           # 布局模板目录
│   ├── _default/     # 默认模板
│   └── partials/     # 部分模板
├── static/           # 静态文件目录（直接复制到public）
│   ├── img/         # 图片资源
│   └── js/          # JavaScript文件
├── themes/           # 主题目录
│   └── PaperMod/    # PaperMod主题
├── public/          # 生成的静态网站（不需要版本控制）
├── resources/       # 处理后的资源文件（不需要版本控制）
└── hugo.yaml        # 站点配件

目录说明：

  1. archetypes/：

    • 存放内容模板
    • 使用 hugo new 创建内容时会使用这些模板
    • 可以为不同类型的内容创建不同的模板

  2. assets/：

    • 需要通过Hugo Pipes处理的资源文件
    • 支持SCSS/Sass编译
    • 支持JavaScript打包和压缩
    • 支持图片处理和优化

  3. content/：

    • 网站的所有内容文件
    • 支持Markdown、HTML等格式
    • 使用目录结构组织内容层次
    • _index.md 用于节点页面（如列表页）
    • 普通的 .md 文件用于叶子页面

  4. layouts/：

    • 定义网站的外观
    • 可以覆盖主题中的模板
    • _default/ 包含默认模板
    • partials/ 包含可重用的模板片段

  5. static/：

    • 静态资源文件
    • 直接复制到生成的网站中
    • 适合存放图片、CSS、JavaScript等

  6. themes/：

    • 存放主题
    • 可以使用git submodule管理主题
    • 主题可以提供默认配置和模板

  7. public/：

    • 生成的静态网站
    • 每次构建时会重新生成
    • 不需要加入版本控制

  8. resources/：

    • 缓存的处理后的资源
    • 提高构建性能
    • 不需要加版本控制

安装过程

  1. Hugo安装

    • Windows: 使用Chocolatey包管理器 
      choco install hugo-extended
    • 验证安装 
      hugo version
    • 确保安装的是extended版本，某些主题功能将无法使用

  2. 创建新站点

    hugo new site myblog
cd myblog

  3. 安装PaperMod主题

    git init
git submodule add https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod

本地预览

  1. 开发服务器启动

    hugo server  # 基本启动命令

  2. 常用预览参数

    hugo server -D  # 同时预览草稿文章
hugo server --navigateToChanged  # 自动导航到更改的页面
hugo server --disableFastRender  # 禁用快速渲染，完整重新加载
hugo server --bind=0.0.0.0 --baseURL=http://你的IP地址  # 局域网访问

  3. 预览说明

    • 默认访问地址: http://localhost:1313/
    • 支持热重载：修改文件后自动刷新页面
    • 开发服务器仅用于本地预览，不要用于生产环境

内容组织

  1. 文章目录结构

    content/posts/
├── _index.md          # 文章列表主页
├── blog/              # 建站相关文章
│   ├── _index.md      # 权重：2
│   ├── hugo-blog-setup.md
│   └── hugo-blog-begin.md
├── tech/              # 技术相关文章
│   ├── _index.md      # 权重：1
│   └── ...
├── read/              # 阅读相关文章
│   ├── _index.md      # 权重：3
│   └── ...
└── life/              # 生活相关文章
    ├── _index.md      # 权重：4
    └── ...

  2. 分类目录配置 a. 技术分类 (content/posts/tech/_index.md):

    ---
title: "技术"
date: 2024-06-01
lastmod: 2024-11-22
tags:
keywords:
description: "折腾记录"
cover:
    image: ""
hidemeta: true 
weight: 1
---

    b. 建站分类 (content/posts/blog/_index.md):

    ---
title: "建站"
date: 2024-06-01
lastmod: 2024-11-22
tags:
keywords:
description: "记录本博客的实现流程与配置修改"
cover:
    image: ""
hidemeta: true
weight: 2
---

    c. 阅读分类 (content/posts/read/_index.md):

    ---
title: "阅读"
date: 2024-06-01
lastmod: 2024-11-22
tags:
keywords:
description: "素食则气不浊；独宿则神不浊；默坐则心不浊；读书则口不浊。"
cover:
    image: ""
hidemeta: true 
weight: 3
---

    d. 生活分类 (content/posts/life/_index.md):

    ---
title: "生活"
date: 2024-06-01
lastmod: 2024-11-22
tags:
keywords:
description: "日记呀，感悟呀"
cover:
    image: ""
hidemeta: true 
weight: 4
---

  3. 特殊页面配置

    a. 搜索页面 (content/search.md)

    +++
title = "搜索"
layout = "search"
summary = "search"
placeholder = "搜索"
+++

    b. 标签页面 (content/tags/_index.md)

    ---
title: "标签"
layout: tags
summary: tags
---

    c. 归档页面 (content/archives.md)

    +++
title = "归档"
layout = "archives"
url = "/archives/"
summary = "archives"
+++

    d. 关于页面 (content/about.md)

    +++
title = "关于"
layout = "about"
url = "/about/"
summary = "about"
+++

# 欢迎光临🥂

主要内容包括笔记，积累，感悟

精通 CSS JavaScript PHP C C++ C# java Ruby Perl Python 等单词的拼写
熟悉 Windows Linux Mac Android IOS 等系统的开关机

站点初建，任何东西随着想法或者思路都可能会改变

  4. 文章模板配置 (content/mod.md)

    ---
title: "文章抬头"
date: 2024-08-22
lastmod: 2024-08-22
author: "rzl"
tags: # 标签
  - 
  - 
keywords: # 关键词
  - 
  - 
description: "文章描述"
weight: # 权重
slug: "" # 使用 slug属性 来作为当前文章的有效 url 的末尾部分
draft: false # 是否为草稿
comments: false # 本页面是否显示评论
reward: false # 打赏
mermaid: false #是否开启mermaid
showToc: true # 显示目录
TocOpen: true # 自动展开目录
hidemeta: false # 是否隐藏文章的元信息
disableShare: true # 底部不显示分享栏
showbreadcrumbs: true #顶部显示路径
cover:
    image: "" #图片路径例如：posts/tech/123/123.png
    caption: "" #图片底部描述
    alt: "" # 图片的替代文本
    relative: false # 控制图片路径的解析方式
---

### 前言

### 步骤流程

### 总结

Hugo配置详解 (hugo.yaml)

  1. 基础配置

    baseURL: "https://blog.rzlnb.top/"  # 你的博客的根URL
languageCode: "zh-cn"  # 网站的默认语言代码
title: "Coolzr's Blog"  # 博客的标题
theme: "PaperMod"  # 使用的主题名称

enableInlineShortcodes: true  # 启用内联短代码
enableEmoji: true  # 启用Emoji表情支持
enableRobotsTXT: true  # 生成 robots.txt 文件
hasCJKLanguage: true  # 启用CJK语言支持

  2. 构建选项

    buildDrafts: false  # 是否构建草稿文章
buildFuture: false  # 是否构建将来发布时间的文章
buildExpired: false  # 是否构建过期的文章

paginate: 15  # 每页显示的文章数量
summaryLength: 140  # 文章概要显示的字数

minify:
  disableXML: true  # 用XML文件压缩

  3. 多语言支持

    defaultContentLanguage: "zh-cn"  # 默认内容语言代码
languages:
  zh-cn:
    languageName: "简中"  # 语言显示名称
    weight: 1  # 权重，决定语言的显示顺序
    params:
      homeInfoParams:
        Title: "欢迎来到我的个人博客！"
        Content: >
          ## 总得写点什么吧

  4. 菜单配置

    menu:
  main:
    - identifier: "search"
      name: "搜索"
      url: "search"
      weight: 10
    - identifier: "posts"
      name: "文章"
      url: "posts"
      weight: 30
    - identifier: "archives"
      name: "归档"
      url: "archives"
      weight: 50
    - identifier: "about"
      name: "关于"
      url: "about"
      weight: 60

  5. 主题参数配置

    params:
  env: "production"  # 当前环境
  description: "个人博客，记录和分享"  # 网站描述
  author: "coolzr"  # 作者名称
  defaultTheme: "auto"  # 默认主题模式
  ShowCodeCopyButtons: true  # 显示代码复制按钮
  ShowReadingTime: false  # 显示阅读时间
  ShowShareButtons: false  # 显示分享按钮
  ShowPostNavLinks: true  # 显示文章导航链接
  ShowBreadCrumbs: true  # 显示面包屑导航

  6. 社交链接配置

    params:
  socialIcons:
    - name: "github"
      url: "https://github.com/RZLNB"
    - name: "email"
      url: "mailto:[email protected]"
    - name: "RSS"
      url: "index.xml"

  7. 搜索功能配置

    outputs:
  home:
    - "HTML"
    - "RSS"
    - "JSON"  # 用于搜索功能

params:
  fuseOpts:
    isCaseSensitive: false
    shouldSort: true
    location: 0
    distance: 1000
    threshold: 0.4
    minMatchCharLength: 0
    keys: ["title", "permalink", "summary"]

布局文件配置

  1. 布局文件结构

    layouts/
├── _default/          # 默认布局
│   ├── about.html     # 关于页面布局
│   └── single.html    # 单页面布局
├── partials/          # 部分模板
│   ├── extend_head.html  # 扩展头部
│   └── extend_footer.html # 扩展页脚
└── 404.html           # 404错误页面

  2. 自定义布局说明

    • 创建与主题相同路径的文件来覆盖主题布局
    • 不建议直接修改主题文件，便于主题更新
    • 使用 Hugo 的模板语法自定义内容

  3. 站点地图配置

    enableRobotsTXT: true   # 启用robots.txt
sitemap:
  changefreq: "weekly"
  priority: 0.5
  filename: "sitemap.xml"

  4. 输出配置

    outputs:
  home:
    - "HTML"
    - "RSS"
    - "JSON"    # 用于搜索功能

自定义样式配置

  1. 目录样式配置

    /* 目录图标 */
.toc details summary::before {
    content: "📋";
    margin-right: 8px;
    font-size: 1.2em;
    vertical-align: middle;
}

/* 移除原有图标 */
.toc details summary::marker,
.toc details summary::-webkit-details-marker {
    display: none;
}

/* 调整目录样式 */
.toc {
    margin: 0 2px 40px 2px;
    padding: 12px 20px;
    border-radius: 6px;
}

/* 调整目录标题样式 */
.toc summary {
    cursor: pointer;
    margin-bottom: 10px;
    font-size: 1.1em;
    font-weight: 600;
    display: flex;
    align-items: center;
}

/* 调整目录内容样式 */
.toc details > div {
    margin-left: 20px;
}

  2. 进度条配置

    .progress-bar {
    background: linear-gradient(to right, #50c878 0%, #3cb371 100%);
    height: 2px;
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    z-index: 9999;
    transition: width 0.2s ease-out;
}

  3. 标题样式配置

    /* 标题统一配置 */
.post-content h1,
.post-content h2,
.post-content h3,
.post-content h4,
.post-content h5,
.post-content h6 {
    font-family: "Noto Serif SC", serif;
    font-optical-sizing: auto;
    font-style: normal;
    margin: 20px 0 10px;
    letter-spacing: 0.02em;
}

/* 标题大小设置 */
.post-content h1 { font-size: 1.8em; font-weight: 700; }
.post-content h2 { font-size: 1.6em; font-weight: 600; }
.post-content h3 { font-size: 1.3em; font-weight: 600; }
.post-content h4,
.post-content h5,
.post-content h6 { font-size: 1em; font-weight: 500; }

/* h1 和 h2 的下划线样式 */
.post-content h1,
.post-content h2 {
    border-bottom: 1px solid var(--border);
    padding-bottom: 10px;
    margin-bottom: 20px;
}

/* 移除其他标题的下划线 */
.post-content h3,
.post-content h4,
.post-content h5,
.post-content h6 {
    border-bottom: none !important;
    padding-bottom: 0;
    margin-bottom: 10px;
}

  4. 标题锚点样式

    .post-content h1 .anchor,
.post-content h2 .anchor,
.post-content h3 .anchor,
.post-content h4 .anchor,
.post-content h5 .anchor,
.post-content h6 .anchor {
    text-decoration: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    opacity: 0;
    transition: opacity 0.2s;
    color: #3cb371 !important;
}

.post-content h1:hover .anchor,
.post-content h2:hover .anchor,
.post-content h3:hover .anchor,
.post-content h4:hover .anchor,
.post-content h5:hover .anchor,
.post-content h6:hover .anchor {
    opacity: 1;
}

  5. 动画效果配置

    /* 页面加载画 */
.main {
    animation: fadeInAnimation 0.8s ease-in-out;
}

@keyframes fadeInAnimation {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 文章卡片动画 */
.post-entry {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.post-entry:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

/* 图片动画 */
img {
    transition: transform 0.3s ease;
}

img:hover {
    transform: scale(1.02);
}

  6. 最新文章模块配置

    /* 最新文章模块样式 */
.recent-container {
    margin: 10px 0 0 0;
}

.recent-container.wide {
    position: absolute;
    height: 100%;
    right: calc((var(--toc-width) + var(--gap)) * -0.85);
    top: calc(var(--gap) * 1);
    width: var(--toc-width);
}

.wide .recent {
    position: sticky;
    top: var(--gap);
    border: unset;
    background: unset;
    border-radius: unset;
    width: 100%;
    margin: 0 2px 40px 2px;
}

.recent details summary {
    cursor: pointer;
    margin-bottom: 10px;
    font-size: 1.1em;
    font-weight: 600;
    display: flex;
    align-items: center;
}

.recent details summary::before {
    content: "📰";
    margin-right: 8px;
    font-size: 1.2em;
    vertical-align: middle;
}

.recent-post-item a {
    color: var(--secondary);
    text-decoration: none;
    transition: color 0.3s ease;
    padding: 2px 0;
    border-bottom: 1px solid transparent;
}

.recent-post-item a:hover {
    color: #3cb371;
    border-bottom-color: #3cb371;
}

/* 适配移动设备 */
@media screen and (max-width: 1400px) {
    .recent-container.wide {
        display: none;
    }
}

功能定制与扩展

  1. 评论系统集成

    • Twikoo配置
    params:
  comments: false      # 全局评论开关
  Twikoo:
    envId: "https://rongzl-twikoo.hf.space"

  2. 友链功能实现

    • 使用shortcode定义友链样式
    • 在content/links.md中使用友链shortcode
    
     
    
       
    
         
       
    
       
    
         
    博客名称
    
         
    描述

  3. 最新文章模块实现 a. 创建最新文章模块模板文件

    mkdir -p layouts/partials
touch layouts/partials/recent-posts.html

    b. 添加模板代码 (layouts/partials/recent-posts.html)

    <aside id="recent-container" class="recent-container wide">
    <div class="recent">
        <details open>
            <summary>
                <span class="details">最新文章</span>
            </summary>
            <div class="inner">
                {{ range first 5 (where .Site.RegularPages "Type" "posts") }}
                <div class="recent-post-item">
                    <a href="{{ .RelPermalink }}">{{ .Title }}</a>
                </div>
                {{ end }}
            </div>
        </details>
    </div>
</aside>

    c. 修改文章页面布局，添加最新文章模块

    • 复制主题的文章页面布局
    mkdir -p layouts/_default
cp themes/PaperMod/layouts/_default/single.html layouts/_default/
    • 在 single.html 中添加最新文章模块
    {{- if (.Param "ShowToc") }}
{{- partial "toc.html" . }}
{{- end }}
{{- partial "recent-posts.html" . }}  <!-- 添加这一行 -->
<div class="post-content">{{ .Content }}</div>

    d. 添加样式配置 (assets/css/extended/custom.css)

    /* 最新文章模块样式 */
.recent-container {
    margin: 10px 0 0 0;
}

.recent-container.wide {
    position: absolute;
    height: 100%;
    right: calc((var(--toc-width) + var(--gap)) * -0.85);
    top: calc(var(--gap) * 1);
    width: var(--toc-width);
}

.wide .recent {
    position: sticky;
    top: var(--gap);
    border: unset;
    background: unset;
    border-radius: unset;
    width: 100%;
    margin: 0 2px 40px 2px;
}

.recent details summary {
    cursor: pointer;
    margin-bottom: 10px;
    font-size: 1.1em;
    font-weight: 600;
    display: flex;
    align-items: center;
}

.recent details summary::before {
    content: "📰";
    margin-right: 8px;
    font-size: 1.2em;
    vertical-align: middle;
}

.recent-post-item a {
    color: var(--secondary);
    text-decoration: none;
    transition: color 0.3s ease;
    padding: 2px 0;
    border-bottom: 1px solid transparent;
}

.recent-post-item a:hover {
    color: #3cb371;
    border-bottom-color: #3cb371;
}

/* 适配移动设备 */
@media screen and (max-width: 1400px) {
    .recent-container.wide {
        display: none;
    }
}

    e. 在主页添加最新文章模块

    • 修改 layouts/_default/list.html，添加最新文章组件：
    {{- if (.Param "ShowToc") }}
{{- partial "toc.html" . }}
{{- end }}
{{- partial "recent-posts.html" . }}  <!-- 添加这一行 -->
<div class="post-content">{{ .Content }}</div>

    f. 重启 Hugo 服务器以应用更改

    hugo server -D

版本控制与更新维护

  1. Git配置

    # 主题作为子模块
git submodule add https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod

# 更新主题
git submodule update --remote --merge

  2. 重要文件备份

    • hugo.yaml 配置文件
    • 自定义布局文件
    • 静态资源文件

  3. 更新注意事项

    • 检查Hugo版本兼容性
    • 备份重要配置
    • 测试新功能
    • 保持文档更新

总结

通过这些配置和优化，我们成功搭建了一个功能完善的Hugo博客。关键点：

  1. 选择合适的Hugo版本
  2. 仔细阅读官方文档
  3. 做好版本控制
  4. 重视性能优化
  5. 保持主题和Hugo的更新

最后，建议将配置文件做好备份，并记录重要的修改。遇到问题时，优先查看官方文档和GitHub issues。

关于博客的部署方案，请参考文章：使用 Hugo + GitHub + Cloudflare Pages 搭建个人博客

参考资料

  1. Hugo官方文档
  2. PaperMod主题文档
  3. Hugo中文文档

i18n配置

  1. 创建中文翻译文件 (i18n/zh-cn.yaml)

    - id: toc
  translation: "目录"

- id: table_of_contents
  translation: "目录"

  2. 配置说明

    • 用于将界面元素翻译为中文
    • 支持自定义翻译内容
    • 可以覆盖主题默认翻译

文章模板配置

  1. 创建文章模板 (content/mod.md)

    ---
title: "文章抬头"
date: 2024-08-22
lastmod: 2024-08-22
author: "rzl"
tags: # 标签
  - 
  - 
keywords: # 关键词
  - 
  - 
description: "文章描述"
weight: # 权重
slug: "" # 使用 slug属性 来作为当前文章的有效 url 的末尾部分
draft: false # 是否为草稿
comments: false # 本页面是否显示评论
reward: false # 打赏
mermaid: false #是否开mermaid
showToc: true # 显示目录
TocOpen: true # 自动展开目录
hidemeta: false # 是否隐藏文章的元信息
disableShare: true # 底部不显示分享栏
showbreadcrumbs: true #顶部显示路径
cover:
    image: "" #图片路径例如：posts/tech/123/123.png
    caption: "" #图片底部描述
    alt: "" # 图片的替代文本
    relative: false # 控制图片路径的解析方式
---

### 前言

### 步骤流程

### 总结

  2. 使用模板创建新文章

    hugo new posts/tech/article-name.md

功能实现步骤

  1. 基础配置 a. 创建或修改 hugo.yaml：

    baseURL: "https://blog.rzlnb.top/"  # 你的博客的根URL
languageCode: "zh-cn"  # 网站的默认语代码
title: "Coolzr's Blog"  # 博客的标题
theme: "PaperMod"  # 使用的主题名称

# 基础功能配置
enableInlineShortcodes: true  # 启用内联短代码
enableEmoji: true  # 启用Emoji表情支持
enableRobotsTXT: true  # 生成 robots.txt 文件
hasCJKLanguage: true  # 启用CJK语言支持

# 构建选项
buildDrafts: false  # 是否构建草稿文章
buildFuture: false  # 是否构建将来的文章
buildExpired: false  # 是否构建过期的文章

# 分页和摘要
paginate: 15  # 每页显示的文章数量
summaryLength: 140  # 文章概要显示的字数

# 压缩设置
minify:
  disableXML: true  # 禁用XML文件压缩

# 多语言支持
defaultContentLanguage: "zh-cn"
languages:
  zh-cn:
    languageName: "简中"
    weight: 1
    params:
      homeInfoParams:
        Title: "欢迎来到我的个人博客！"
        Content: >
          ## 总得写点什么吧          

# 菜单配置
menu:
  main:
    - identifier: "search"
      name: "🔎 搜索"
      url: "search"
      weight: 10
    - identifier: "posts"
      name: "📝 文章"
      url: "posts"
      weight: 30
    - identifier: "archives"
      name: "📅 归档"
      url: "archives"
      weight: 50
    - identifier: "about"
      name: "🎯 关于"
      url: "about"
      weight: 60

# 主题参数配置
params:
  env: "production"
  description: "个人博客，记录和分享"
  author: "coolzr"
  defaultTheme: "auto"
  ShowCodeCopyButtons: true
  ShowReadingTime: false
  ShowShareButtons: false
  ShowPostNavLinks: true
  ShowBreadCrumbs: true
  ShowToc: true
  TocOpen: true
  comments: false

  # 社交链接
  socialIcons:
    - name: "github"
      url: "https://github.com/RZLNB"
    - name: "email"
      url: "mailto:[email protected]"
    - name: "rss"
      url: "index.xml"

  # 搜索功能配置
  fuseOpts:
    isCaseSensitive: false
    shouldSort: true
    location: 0
    distance: 1000
    threshold: 0.4
    minMatchCharLength: 0
    keys: ["title", "permalink", "summary"]

  2. 字体配置 a. 创建扩展头部文件：

    mkdir -p layouts/partials
touch layouts/partials/extend_head.html

    b. 添加字体引入代码：

    <!-- 引入 Noto Serif SC 字体 -->
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&display=swap" rel="stylesheet">

  3. 进度条实现 a. 在 extend_head.html 中添加进度条代码：

    <!-- 进度条 HTML -->
<div class="progress-bar"></div>

<!-- 进度条 JavaScript -->
<script>
document.addEventListener('DOMContentLoaded', () => {
    const progressBar = document.querySelector('.progress-bar');

    // 计算滚动进度
    const calculateScrollProgress = () => {
        const windowHeight = window.innerHeight;
        const documentHeight = document.documentElement.scrollHeight - windowHeight;
        const scrollTop = window.scrollY;
        const progress = (scrollTop / documentHeight) * 100;
        progressBar.style.width = `${progress}%`;
    };

    // 监听滚动事件
    window.addEventListener('scroll', calculateScrollProgress);

    // 初始计算
    calculateScrollProgress();
});
</script>

  4. 最新文章模块 a. 创建最新文章模板：

    touch layouts/partials/recent-posts.html

    b. 添加模板代码：

    <aside id="recent-container" class="recent-container wide">
    <div class="recent">
        <details open>
            <summary>
                <span class="details">最新文章</span>
            </summary>
            <div class="inner">
                {{ range first 5 (where .Site.RegularPages "Type" "posts") }}
                <div class="recent-post-item">
                    <a href="{{ .RelPermalink }}">{{ .Title }}</a>
                </div>
                {{ end }}
            </div>
        </details>
    </div>
</aside>

    c. 修改文章页面布局：

    mkdir -p layouts/_default
cp themes/PaperMod/layouts/_default/single.html layouts/_default/

    d. 在 single.html 中添加最新文章模块：

    {{- if (.Param "ShowToc") }}
{{- partial "toc.html" . }}
{{- end }}
{{- partial "recent-posts.html" . }}  <!-- 添加这一行 -->
<div class="post-content">{{ .Content }}</div>

  5. 样式配置 a. 创建自定义样式文件：

    mkdir -p assets/css/extended
touch assets/css/extended/custom.css

    b. 添加样式配置：

    /* 标题样式统一配置 */
.post-content h1,
.post-content h2,
.post-content h3,
.post-content h4,
.post-content h5,
.post-content h6 {
    font-family: "Noto Serif SC", serif;
    font-optical-sizing: auto;
    font-style: normal;
    margin: 20px 0 10px;
    letter-spacing: 0.02em;
}

/* 标题大小设置 */
.post-content h1 { font-size: 1.8em; font-weight: 700; }
.post-content h2 { font-size: 1.6em; font-weight: 600; }
.post-content h3 { font-size: 1.3em; font-weight: 600; }
.post-content h4,
.post-content h5,
.post-content h6 { font-size: 1em; font-weight: 500; }

/* h1 和 h2 的下划线样式 */
.post-content h1,
.post-content h2 {
    border-bottom: 1px solid var(--border);
    padding-bottom: 10px;
    margin-bottom: 20px;
}

/* 移除其他标题的下划线 */
.post-content h3,
.post-content h4,
.post-content h5,
.post-content h6 {
    border-bottom: none !important;
    padding-bottom: 0;
    margin-bottom: 10px;
}

/* 目录样式 */
.toc details summary::before {
    content: "📋";
    margin-right: 8px;
    font-size: 1.2em;
    vertical-align: middle;
}

/* 进度条样式 */
.progress-bar {
    background: linear-gradient(to right, #50c878 0%, #3cb371 100%);
    height: 2px;
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    z-index: 9999;
    transition: width 0.2s ease-out;
}

/* 页面切换动画 */
.main {
    animation: fadeInAnimation 0.8s ease-in-out;
}

@keyframes fadeInAnimation {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 最新文章模块样式 */
.recent-container.wide {
    position: absolute;
    height: 100%;
    right: calc((var(--toc-width) + var(--gap)) * -0.85);
    top: calc(var(--gap) * 1);
    width: var(--toc-width);
}

.recent-post-item a {
    color: var(--secondary);
    text-decoration: none;
    transition: color 0.3s ease;
    padding: 2px 0;
    border-bottom: 1px solid transparent;
}

.recent-post-item a:hover {
    color: #3cb371;
    border-bottom-color: #3cb371;
}

  6. i18n配置 a. 创建中文翻译文件：

    mkdir -p i18n
touch i18n/zh-cn.yaml

    b. 添加翻译内容：

    - id: toc
  translation: "目录"

- id: table_of_contents
  translation: "目录"

  7. 友链功能实现 a. 创建友链页面：

    touch content/links.md

    b. 添加友链页面内容：

    ---
title: "🤝 友链"
layout: links
date: 2021-11-06
description: 
hidemeta: true
showToc: false
disableShare: true
reward: false
showbreadcrumbs: false
---
<div style="font-size: 20px;">👉友链为随机顺序</div>

<div class="friend">
<!-- 
  
    
    
    
      
    
    
    
    
      
    博客名称
    
      
    描述
    
    
    
  
    
    
 -->    
    </div>

<div style="font-size: 20px;">👉友链格式</div>

<div style="text-indent: 1em;">
名称: Coolzr's Blog
网址: https://blog.rzlnb.top
图标: https://blog.rzlnb.top/img/my.jpg
描述: 
</div>

<div style="font-size: 20px;">👉友链申请要求</div>

> 秉承互换友链原则、文章定期更新、不能有太多广告

<br/>

  8. 关于页面实现 a. 创建关于页面：

    touch content/about.md

    b. 添加关于页面内容：

    +++
title = "关于"
layout = "about"
url = "/about/"
summary = "about"
+++

# 欢迎来到我的个人博客！

## 总得写点什么吧

主要内容包括笔记，积累，感悟

精通 CSS JavaScript PHP C C++ C# java Ruby Perl Python 等单词的拼写
熟悉 Windows Linux Mac Android IOS 等系统的开关机

站点初建，任何东西随着想法或者思路都可能会改变

  9. 搜索功能实现 a. 创建搜索页面：

    touch content/search.md

    b. 添加搜索页面内容：

    +++
title = "搜索"
layout = "search"
summary = "search"
placeholder = "搜索"
+++

  10. 归档页面实现 a. 创建归档页面：

    touch content/archives.md

    b. 添加归档页面内容：

    +++
title = "归档"
layout = "archives"
url = "/archives/"
summary = "archives"
+++

  11. 标签页面实现 a. 创建标签页面：

    mkdir -p content/tags
touch content/tags/_index.md

    b. 添加标签页面内容：

    ---
title: "🏷️ 标签"
layout: tags
summary: tags
---

  12. 百度统计配置（可选） a. 在 extend_head.html 中添加百度统计代码：

    <!-- 百度分析 -->
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = ""; //填自己的百度统计代码
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>

  13. 重启Hugo服务器应用更改

    hugo server -D

部署说明

关于博客的部署方案，请参考文章：使用 Hugo + GitHub + Cloudflare Pages 搭建个人博客

参考资料

  1. Hugo官方文档
  2. PaperMod主题文档
  3. Hugo中文文档