组织文件

组织文件

目录结构

默认情况下,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 为不同类型的内容提供了三种布局:

    布局目录特性
    docscontent/docs/适合结构化文档,与本部分相同。
    blogcontent/blog/用于博客文章,包含列表和详细文章视图。
    default其他所有目录单页文章视图,无侧边栏。

    要将某个部分自定义为与内置布局相同的行为,可以在该部分的 _index.md 的前言中指定所需的类型。

    content/my-docs/_index.md
    ---
    title: 我的文档
    cascade:
      type: docs
    ---

    上述示例配置确保 content/my-docs/ 中的内容文件默认会被视为文档(docs 类型)。

    侧边栏导航

    侧边栏导航会根据内容组织按字母顺序自动生成。要手动配置侧边栏顺序,可以在 Markdown 文件的前言中使用 weight 参数。

    content/docs/guide/_index.md
    ---
    title: 指南
    weight: 2
    ---
    ℹ️
    建议不要让侧边栏过深。如果你有很多内容,考虑将它们分成多个部分

    面包屑导航

    面包屑导航会根据 /content 的目录结构自动生成。

    例如,考虑上面展示的目录结构。根据该结构,页面 /docs/guide/organize-files/ 顶部的面包屑导航会自动显示如下:

    文档 > 指南 > 组织文件

    自定义面包屑链接标题

    默认情况下,每个面包屑链接是根据页面的 title 参数生成的。你可以通过指定 linkTitle 来自定义。

    例如,如果我们希望面包屑显示为 Foo Bar 而不是 Organize Files

    content/docs/guide/organize-files.md
    ---
    linkTitle: Foo Bar
    title: 组织文件
    ---

    现在会生成以下面包屑:

    文档 > 指南 > Foo Bar

    隐藏面包屑

    你可以通过在页面的前言中指定 breadcrumbs: false 来完全隐藏面包屑:

    content/docs/guide/organize-files.md
    ---
    breadcrumbs: false
    title: 组织文件
    ---

    配置内容目录

    默认情况下,Hugo 使用根目录 content/ 来构建网站。 如果你需要使用不同的目录来存放内容,例如 docs/,可以通过在站点配置文件 hugo.yaml 中设置 contentDir 参数来实现。

    添加图片

    添加图片的最简单方法是将图片文件放在与 Markdown 文件相同的目录中。 例如,将图片文件 image.pngmy-page.md 文件放在一起:

      • my-page.md
      • image.png
  • 然后,我们可以使用以下 Markdown 语法将图片添加到内容中:

    content/docs/my-page.md
    ![](image.png)

    我们还可以利用 Hugo 的 页面包 功能将图片文件与 Markdown 文件一起组织。为此,将 my-page.md 文件转换为目录 my-page,并将内容放入名为 index.md 的文件中,然后将图片文件放入 my-page 目录中:

        • index.md
        • image.png
  • content/docs/my-page/index.md
    ![](image.png)

    或者,我们也可以将图片文件放在 static 目录中,这样所有页面都可以访问这些图片:

      • image.png
      • my-page.md
  • 注意,图片路径以斜杠 / 开头,并且相对于静态目录:

    content/docs/my-page.md
    ![](/images/image.png)
    最后更新于