Obsidian模板创建测试

Sun, 26 Apr 2026 00:00:00 +0000

这是文章的引言部分。通过这篇文章，你可以检查你的主题是否能完美渲染目录、图片、代码以及其他常用组件。

1. 测试：TOC 目录导航

本段落用于检查右侧或顶部的 TOC (Table of Contents)。只要文章内有多个标题，Hugo 会自动提取它们。

1.1 子标题测试

这是一个三级标题，它应该在目录中显示为二级标题的缩进项。

2. 测试：图片组件 (Page Bundle)

3. 测试：代码块高亮

检查你的主题是否支持代码语法高亮：


def hello_hugo():

    title = "Hugo Test"

    print(f"Hello, {title}!")

  

hello_hugo()

4. 测试：引用与列表

这两个组件常用于强调内容和整理思路。

引用演示

这是一个引用块。通常用于展示名言警句，或者补充说明。

—— 某位著名的程序员

列表演示

功能项 A：测试加粗效果
功能项 B：测试列表排列
功能项 C：测试层级嵌套

* 子选项 1

* 子选项 2

Hugo 博客功能测试文章

Mon, 20 May 2024 10:00:00 +0800

这是文章的引言部分。通过这篇文章，你可以检查你的主题是否能完美渲染目录、图片、代码以及其他常用组件。

1. 测试：TOC 目录导航

本段落用于检查右侧或顶部的 TOC (Table of Contents)。只要文章内有多个标题，Hugo 会自动提取它们。

1.1 子标题测试

这是一个三级标题，它应该在目录中显示为二级标题的缩进项。

2. 测试：图片组件 (Page Bundle)

如果你使用了文件夹模式（Page Bundle），请将图片放在同一个文件夹下。

图 1：本地图片测试（请确保 images 文件夹下有 dog.png）

3. 测试：代码块高亮

检查你的主题是否支持代码语法高亮：

def hello_hugo():
    title = "Hugo Test"
    print(f"Hello, {title}!")

hello_hugo()

4. 测试：引用与列表

这两个组件常用于强调内容和整理思路。

引用演示

这是一个引用块。通常用于展示名言警句，或者补充说明。 —— 某位著名的程序员

列表演示

功能项 A：测试加粗效果
功能项 B：测试列表排列
功能项 C：测试层级嵌套
- 子选项 1
- 子选项 2

第一次搭建博客

Mon, 01 Jan 0001 00:00:00 +0000

终于搭好了这个博客

博客框架：hugo 主题：stack 成品如下：

搭博客遇见的问题

博客框架好搭，主题不好选，
选好了博客，博客主题不好装，
装好了博客主题整个界面是空白的，无从下手，
知道从哪里写文章了，博客主界面什么都没有，都要自己设置参数，
设置参数的过程看不懂代码，
作者的文档好简单，网上搭博客的教程都是以前的。

写这个记录的时候已经搭好了，复盘一下。再搭建一个。

复盘从头开始搭建一个采用stack主题的博客

安装go

Hugo 是基于 go 语言的，所以第一步肯定是安装 go

从go官网下载安装程序：https://go.dev/dl/

目前 go 的 Windows 版本安装程序为：https://go.dev/dl/go1.20.3.windows-amd64.msi

github上抄下来的，昨天我是问的ai报错了才去装这个东西

安装hugo

hugo有好多个版本，从github那里下载压缩包下来。地址在这https://github.com/gohugoio/hugo/releases/tag/v0.160.1 要下载hugo_extended_0.160.1_windows-amd64.zip 一定要选带extended版本的，我第一次下载了没有extended版本的安装包就报错了，我理解是这个版本的能支持更多功能。

解压之后有三个文件夹，只要hugo就可以了，其他两个可以不要。

这个exe执行文件就放在和博客根目录同级那里放这里的好处是不用把hugo加入环境变量，我是直接在hugo文件夹下面博客文件夹，后面都进这个文件夹命令。看下面

创建博客文件夹

接下来就可以用黑框框上场了。 powershell 昨天一个博客上看到的，说是官方文档推荐用这个，并普及了一把知识 Windows powershell，powershell，还有CMD这三个不是一个东西，推荐用✅powershell，刚开始不明白为什么，后面发现这个工具可以快速输入命令，输入一个字母再按方向键的右键，整个命令就输完了。

# 进入D盘 
d: 

# 进入博客文件夹 
cd D:\hugo 

# 创建新博客 这个myblog就是博客文件夹的根目录，后面每次用hugo命令就要cd进入myblog
hugo new site myblog

接下来运行

# 启动hugo
hugo server

出现这个就是成功了，在浏览器里输这个地址http://localhost:44093

第一次以为这不行，看其他博主的记录才知道这样就代表装好了，因为还没装主题。

装主题stack

github项目在这https://github.com/CaiJimmy/hugo-theme-stack，最下面有安装教程，有中文版的。

看教程安装使用那里一堆字，第一个快速入门那里也用了，到创建代码空间就没跟着弄，没想到下面的花了更多时间，看这个意思作为子模块安装更新稳定，选它，又说没有themes文件夹，为了方便查看代码，把他也下下来。

myblog这个文件夹的层级和themes的结构层级是一样的，要有自定义新的，就要在myblog文件夹下面的assets，layouts，staics这几个文件夹里自定义一样层级的东西改。

官方文档截个图

之后去myblog文件夹下找到toml文件加上这个

# hugo.toml
[[module.imports]]
    path = "github.com/CaiJimmy/hugo-theme-stack/v4"

为了编辑这个文件我又装了一个VS code 输完这个之后，ctrl+s保存一下不用退出，保存了就可以，再去powershell运行hugo sever，记住每次都要在自己创建的博客文件夹下面运行这个命令。这个端口每次都不一样，这里快捷访问基于是按住ctrl单击就可以快速访问了。

第一次看见这个真懵了，以为能和演示的一样。白花花的一片啊。想着已经弄到这里了，接着弄把。

装饰博客

左半边的自定义菜单

现在的文件夹结构是这样的，hugo的exe文件在hugo文件夹下，和myblog同级

在content文件夹里创建page文件夹，page文件夹里创建4个md文件，search和archives的md内容有点不一样。

主页：

--- # 上下要用---包起来
title: "主页"  
menu:
    main:
        weight: 10  # 这个越小这个东西就越在前
        params:
            icon: home # 这个是图标，themes下assets下icons里有
url: "/"  # 这一行把这个页面指向根目录
---

关于：

---
title: "关于"
menu:
    main:
        weight: 40
        params:
            icon: user
---

归档：

---

title: "归档"
layout: "archives" # 多个这个layout，为了后面使用小部件
menu:
    main:
        weight: 120
        limit: 5  # 没看出来什么意思，ai给的代码复盘发现可能不需要，
        params:
            icon: archives
---

搜索：

---
title: "搜索"
layout: "search"
outputs: ["HTML", "JSON"]  # 必须包含 JSON,这一行后面查为什么搜不到内容的时候ai加的。
menu:
    main:
         weight: 160
         params:
               icon: search
---

四个主菜单就装好了

个人信息和头像

头像

在hugo文件夹下的hugo.toml里修改（看很多教程用config文件夹下面的配置改，说把这个默认生成的toml删了，免得配置冲突，把这个删了我这个博客直接不运行了，最后就只能改这里）

[params]
# 修改这里：加上 params. 前缀
[params.sidebar]
    compact = false
    avatar = "images/dog.png" # 图片的位置
    avatarRound = true

这个图片事先放在D:\hugo\myblog\assets\images 这里，这个图片也可以用图床链接，就这么一张图像放这里把。

站点名称和副标题

名字也在这里改,把title改一下，就是站点名字

baseURL = '/'
locale = 'en-us'
title = '这是个问题'
subtitle = "这里写你的副标题"

# hugo.toml
[[module.imports]]
    path = "github.com/CaiJimmy/hugo-theme-stack/v4"
    
[params]
# 修改这里：加上 params. 前缀
[params.sidebar]
    compact = false
    avatar = "images/dog.png"
    avatarRound = true
    subtitle = '我是一个美丽的副标题' # 在这个下面加一个这个，副标题就可以生效了

目前博客长这个样子。

社交链接

之前主菜单是在content下面创建了page文件夹再创建各个md文件这个社交链接，没有看到说可以再创一个，就用的在toml里添加参数。就这段，如果要加别的把menu.social往下复制，填不同的信息，注意的就是那个icon图标，如果有自定义的图标，就要新在assets文件夹下创建一个icons文件夹，再把svg图标文件放进去这里填上名字

[menu]
# 1. 社交菜单配置 (Social Menu)
[[menu.social]]
    identifier = "github"
    name = "GitHub"
    url = "https://github.com/CaiJimmy/hugo-theme-stack"
    weight = 1
    [menu.social.params]
        icon = "brand-github"

小部件

这个试了好久，代码是这段

[params] # 这个有只能有一个，[params.sidebar]这个参数头像和副标题也放这个下面

[params.widgets]
    homepage = [
        # 注意：search 后面必须跟着 params 键，哪怕它是空的 {}
        { type = "search", params = {} }, 
        { type = "archives", params = { limit = 5, name = "归档hg" } },
        { type = "categories", params = { limit = 10, title = "分类" } },
        { type = "tag-cloud", params = { limit = 10, title = "标签" } }
    ]
    page = [{ type = "toc" }]

当时又出现了新问题，小部件大家都中文的好好的，就你archives一个人是英文，各种搜为什么，ai现在被训练的只会说我不给你废话，给你这个代码百分之百能解决，然后又是错误的解决。

最后我是又搜到了语言这里的问题默认生成的toml是

baseURL = '/'
locale = 'en-us'
title = '这是个问题'

改成下面这个全部都显示中文了

baseURL = '/'
locale = 'en-us'
languageCode = "zh-cn"
defaultContentLanguage = "zh"
hasCJKLanguage = true
title = '这是个问题'

撰写博客

这个博客的文章内容要放在content文件夹下面的post文件夹里，这个post里再创建各个博客. ai给的结构是这个样子，和我的Obsidian类似，先创建一个试试

content/
└── post/
    └── my-first-blog/          <-- 为这篇文章建个文件夹
        ├── index.md            <-- 文章内容（必须叫 index.md）
        └── images/             <-- 存放该文章的图片
            └── cover.jpg

叫ai生成了一个测试文章，然后按条件放了进去，完成后面就要推到github上部署到vercel上，这篇也一起发，后面自己就能网上看到了。真棒。

这是个问题

Obsidian模板创建测试

1. 测试：TOC 目录导航

1.1 子标题测试

2. 测试：图片组件 (Page Bundle)

3. 测试：代码块高亮

4. 测试：引用与列表

引用演示

列表演示

Hugo 博客功能测试文章

1. 测试：TOC 目录导航

1.1 子标题测试

2. 测试：图片组件 (Page Bundle)

3. 测试：代码块高亮

4. 测试：引用与列表

引用演示

列表演示

第一次搭建博客

终于搭好了这个博客

搭博客遇见的问题

复盘从头开始搭建一个采用stack主题的博客

安装go

安装hugo

创建博客文件夹

装主题stack

装饰博客

左半边的自定义菜单

个人信息和头像

头像

站点名称和副标题

社交链接

小部件

撰写博客

不爱写博客，是真爱这种教程，一弄就上头。