组织文件
目录结构
默认情况下,Hugo 会在 content
目录中查找 Markdown 文件,目录的结构决定了网站最终的输出结构。
以本网站为例:
- _index.md
- _index.md
- getting-started.md
- _index.md
- organize-files.md
- _index.md
- post-1.md
每个 _index.md
文件都是对应部分的索引页面。其他 Markdown 文件则是常规页面。
content
├── _index.md // <- /
├── docs
│ ├── _index.md // <- /docs/
│ ├── getting-started.md // <- /docs/getting-started/
│ └── guide
│ ├── _index.md // <- /docs/guide/
│ └── organize-files.md // <- /docs/guide/organize-files/
└── blog
├── _index.md // <- /blog/
└── post-1.md // <- /blog/post-1/
布局
Hextra 为不同类型的内容提供了三种布局:
布局 | 目录 | 特性 |
---|---|---|
docs | content/docs/ | 适合结构化文档,与本部分相同。 |
blog | content/blog/ | 用于博客文章,包含列表和详细文章视图。 |
default | 其他所有目录 | 单页文章视图,无侧边栏。 |
要将某个部分自定义为与内置布局相同的行为,可以在该部分的 _index.md
的前言中指定所需的类型。
---
title: 我的文档
cascade:
type: docs
---
上述示例配置确保 content/my-docs/
中的内容文件默认会被视为文档(docs
类型)。
侧边栏导航
侧边栏导航会根据内容组织按字母顺序自动生成。要手动配置侧边栏顺序,可以在 Markdown 文件的前言中使用 weight
参数。
---
title: 指南
weight: 2
---
面包屑导航
面包屑导航会根据 /content
的目录结构自动生成。
例如,考虑上面展示的目录结构。根据该结构,页面 /docs/guide/organize-files/
顶部的面包屑导航会自动显示如下:
文档 > 指南 > 组织文件
自定义面包屑链接标题
默认情况下,每个面包屑链接是根据页面的 title
参数生成的。你可以通过指定 linkTitle
来自定义。
例如,如果我们希望面包屑显示为 Foo Bar
而不是 Organize Files
:
---
linkTitle: Foo Bar
title: 组织文件
---
现在会生成以下面包屑:
文档 > 指南 > Foo Bar
隐藏面包屑
你可以通过在页面的前言中指定 breadcrumbs: false
来完全隐藏面包屑:
---
breadcrumbs: false
title: 组织文件
---
配置内容目录
默认情况下,Hugo 使用根目录 content/
来构建网站。
如果你需要使用不同的目录来存放内容,例如 docs/
,可以通过在站点配置文件 hugo.yaml
中设置 contentDir
参数来实现。
添加图片
添加图片的最简单方法是将图片文件放在与 Markdown 文件相同的目录中。
例如,将图片文件 image.png
与 my-page.md
文件放在一起:
- my-page.md
- image.png
然后,我们可以使用以下 Markdown 语法将图片添加到内容中:
![](image.png)
我们还可以利用 Hugo 的 页面包 功能将图片文件与 Markdown 文件一起组织。为此,将 my-page.md
文件转换为目录 my-page
,并将内容放入名为 index.md
的文件中,然后将图片文件放入 my-page
目录中:
- index.md
- image.png
![](image.png)
或者,我们也可以将图片文件放在 static
目录中,这样所有页面都可以访问这些图片:
- image.png
- my-page.md
注意,图片路径以斜杠 /
开头,并且相对于静态目录:
![](/images/image.png)