文档属性

文档属性的内容及含意介绍

一、内容原型

在 Hugo 中，archetypes 文件夹用于存储内容原型。内容原型是一些模板文件，当使用 hugo new 命令创建新内容时，它们会用作默认的前置元数据文件。这些原型文件通常包含了一些基础的前置元数据(文档属性)，如标题、日期和布局设置。

在 Hugo 中，当你使用 hugo new 命令创建一个新的内容文件时，Hugo 会按照以下顺序来检索内容原型（archetypes）：

1. 检查内容类型：Hugo 会首先确定你要创建的内容的类型。这通常是通过你提供的命令参数来确定的，例如 hugo new post/my-new-post.md 会创建一个类型为 “post” 的新内容文件。
2. 查找内容原型：一旦内容类型被确定，Hugo 会尝试在 archetypes 目录中查找与内容类型相匹配的原型文件。原型文件的命名通常是基于内容类型的，例如 archetypes/post.md。
3. 应用默认原型：如果你没有为特定内容类型提供原型文件，Hugo 会退而求其次，查找一个名为 default.md 的默认原型文件。
4. 使用原型创建内容：找到合适的原型文件后，Hugo 会使用它来创建新的内容文件。原型文件中的前置元数据会被插入到新内容文件的前置元数据部分。
5. 提示用户输入：在某些情况下，Hugo 可能会提示用户输入缺失的前置元数据值，尤其是如果原型文件中包含了占位符。
6. 生成新内容文件：最后，Hugo 会生成新的内容文件，并将其保存在指定的目录中。

例如，如果你运行命令 hugo new post/my-first-post.md，Hugo 会：

• 确定内容类型为 “post”。
• 查找 archetypes/post.md 文件。
• 如果找到，使用 archetypes/post.md 中的前置元数据来创建 content/post/my-first-post.md 文件。
• 如果没有找到特定于 “post” 的原型文件，Hugo 会尝试使用 archetypes/default.md。
• 如果连默认原型文件都没有，Hugo 会创建一个没有前置元数据的新内容文件。 内容原型是一个非常有用的功能，因为它可以帮助你确保所有新创建的内容都包含必要的前置元数据，从而保持网站的一致性和组织性。

二、文档属性

1.文章属性

在HB主题中，包含以下文档属性（元数据）：

这些属性在 Hugo 博客中用于定义和自定义文档的各个方面，包括其结构、外观和导航菜单中的显示方式。

2.导航栏属性

特别的关于menu属性：

在 Hugo 主题中，menu 是一个用于定义导航菜单的结构，它允许您自定义菜单的布局、内容和外观。以下是 menu 属性及其含义的表格：

例如，以下是一个 Hugo 主题中 menu 部分的示例配置：

 1menu:
 2  main:
 3    parent: column
 4    weight: 2
 5    params:
 6      description: 环境配置
 7      icon:
 8        vendor: bs
 9        name: toggles
10        className: text-primary
11        # color: blue

在这个例子中，main 菜单项被定义为 column 布局的子元素，具有 2 的权重。params 对象包含了菜单项的描述和图标配置，其中图标来自 Bootstrap 框架，名称为 toggles，并且添加了一个名为 text-primary 的类名。 这些属性在 Hugo 主题的配置文件中用于定义和自定义菜单的各个方面，包括其结构、外观和导航菜单中的显示方式。

三、图标

尽管图标的根参数不同，如 icon 或 nav_icon，但成员参数是相同的。

1.成员参数

vendor

图标供应商名称，默认支持 bootstrap（bs），要使用其他供应商，需要导入相应的模块，以 Font Awesome 图标为例。

hugo.yaml

1module:
2  imports:
3  - path: github.com/hugomods/icons/vendors/font-awesome

现在你可以使用 Font Awesome 实体（fas）、常规（far）和品牌（fab）图标了。

name

图标的名称，如 book、house。

color

图标的十六进制颜色，如 green, #7952B3。

className

图标样式的附加类名，如 text-success、text-primary。

 1<p class="text-primary">.text-primary</p>
 2<p class="text-secondary">.text-secondary</p>
 3<p class="text-success">.text-success</p>
 4<p class="text-danger">.text-danger</p>
 5<p class="text-warning">.text-warning</p>
 6<p class="text-info">.text-info</p>
 7<p class="text-light bg-dark">.text-light</p>
 8<p class="text-dark">.text-dark</p>
 9<p class="text-muted">.text-muted</p>
10<p class="text-white bg-dark">.text-white</p>

2.供应商Vendor

3.图标搜索

所有可用的图标都可以在 Hugo Icons Module 上找到

也可在官网查询

• Bootstrap Icons :Bootstrap 图标库 · Bootstrap 官方开源图标（icon）库 (bootcss.com)
• Simple Icons:Simple Icons