❤️💕💕CS自学指南,大学教育无论是深度还是广度都没有办法支撑我们的职业素养,这个板块算是自己在CS学习中额外补充和记录的。个人博客:http://nsddd.top
[TOC]
在搭建博客之前我们先了解以下什么是
hugo?
Hugo 是一个用 [Go][] 编写的静态 HTML 和 CSS 网站生成器。它针对速度、易用性和可配置性进行了优化。Hugo 获取一个包含内容和模板的目录，并将它们呈现为一个完整的 HTML 网站。
Hugo 依赖于 Markdown 文件和元数据的前端，你可以从任何目录运行 Hugo。这适用于您没有特权帐户的共享主机和其他系统。
Hugo 在几分之一秒内渲染了一个中等大小的典型网站。一个好的经验法则是，每条内容的呈现时间约为 1 毫秒。
Hugo 旨在适用于任何类型的网站，包括博客、静态页面和文档。
相比较之前用过的hexo、vuepress这些静态博客，hugo的优势是部署速度快，并发能力强，上手容易
相比较workpress、halo这些动态的博客，静态博客不需要用服务器部署，可以用仓库部署
- 你知道如何打开一个命令提示窗口。
- 你运行的是一个现代64位的 Windows。
- 你的网站地址是
nsddd.top。 - 你将使用
D:\Hugo\Sites作为网站的起点。 - 你将使用
D:\Hugo\bin存储可执行文件。
你将需要一个存储 Hugo 可执行文件、博客内容（你创建的的那些文件），以及生成文件（Hugo 为你创建的 HTML）的地方。
- 打开 Windows Explorer。
- 创建一个新的文件夹，
D:\Hugo。- 创建一个新的文件夹，
D:\Hugo\bin。- 创建一个新的文件夹，
D:\Hugo\Sites。
使用 go 编译 Hugo 的一个优势就是仅有一个二进制文件。你不需要运行安装程序来使用它。相反，你需要把这个二进制文件复制到你的硬盘上。我假设你将把它放在 D:\Hugo\bin 文件夹内。如果你选择放在其它的位置，你需要在下面的命令中替换为那些路径。
- 在浏览器中打开 https://github.com/spf13/hugo/releases。
- 当前的版本是 hugo_0.13_windows_amd64.zip。
- 下载那个 ZIP 文件，并保存到
D:\Hugo\bin文件夹中。 - 在 Windows Explorer 中找到那个 ZIP 文件，并从中提取所有的文件。
- 你应该可以看到一个
hugo_0.13_windows_amd64.exe文件。 - 把那个文件重命名为
hugo.exe。 - 确保
hugo.exe文件在D:\Hugo\bin文件夹。（有可能提取过程会把它放在一个子文件夹中。如果确实这样的话，使用 Windows Explorer 把它移动到D:\Hugo\bin。） - 使用
D:\Hugo\bin>set PATH=%PATH%;D:\Hugo\bin把 hugo.exe 可执行文件添加到你的 PATH路径中。
运行几个命令来验证可执行命令可以运行，然后构建一个示例网站作为起点。
-
打开一个命令提示符窗口。
-
在提示符中，输入
hugo help并按下 Enter 键。你看到的输出应该以下面的文字开始：
A Fast and Flexible Static Site Generator built with love by spf13 and friends in Go. Complete documentation is available at http://gohugo.io如果你看到了，那么安装就完成了。如果你没有看到，仔细检查下你放置
hugo.exe文件的路径，在 PATH 变量中输入了正确的路径。如果你依旧没有得到那个输出结果，在 Hugo 讨论列表中把你的命令和输出贴出来。 -
在命令提示符中，跳转当前目录到
Sites文件夹。C:\Program Files> cd D:\Hugo\Sites C:\Program Files> D: D:\Hugo\Sites> -
运行命令来生成一个新的网站。我使用
example.com作为网站的名字。D:\Hugo\Sites> hugo new site example.com -
你现在应该拥有一个叫做
D:\Hugo\Sites\example.com的文件夹。进入这个文件夹，并列出文件夹中的内容。你应该得到类似下面的输出内容：D:\Hugo\Sites>cd example.com D:\Hugo\Sites\example.com>dir Directory of D:\hugo\sites\example.com 04/13/2015 10:44 PM . 04/13/2015 10:44 PM .. 04/13/2015 10:44 PM archetypes 04/13/2015 10:44 PM 83 config.toml 04/13/2015 10:44 PM content 04/13/2015 10:44 PM data 04/13/2015 10:44 PM layouts 04/13/2015 10:44 PM static 1 File(s) 83 bytes 7 Dir(s) 6,273,331,200 bytes free
现在你就拥有了安装好的 Hugo 和工作的网站。你需要添加一个布局（或者主题），然后创建一些博客内容。前往 http://gohugo.io/overview/quickstart/ 了解相关的步骤。
-
命令行切换到新创建站点项目nsddd.top内
cd nsddd.top -
添加主题 maupassant执行
git clone https://github.com/JokerQyou/maupassant-hugo.git themes/maupassant -
主题下载完成然后，在当前项目目录内打开
config.toml配置文件，在最后添加一行theme = "maupassant"
下载下来的主题会放在themes 目录中：
└── hugo-theme-bootstrap4-blog
├── CHANGELOG.md
├── LICENSE.txt
├── README.md
├── archetypes
├── assets
├── exampleSite # 本主题示例内容
| ├── content # 示例博客文章
│ |-- static
│ |-- config.toml # 本主题配置
├── i18n
├── images
├── layouts
├── package-lock.json
├── package.json
├── screenshot.png
├── source
├── theme.toml
└── webpack.config.js在站点项目内执行命令
hugo server -D
我们需要按照Markdown 的格式编写自己的文章，让后将写好的文章放在myblog/content/posts，hugo 就会读取到这片文章，并将这片文章展示在比的博客中。
与普通Markdown 文章不一样的地方是，你需要在文章的开头写入如下结构的内容，这些内容包含在三杠线之间，在三杠线下边就是Markdown 的正文了：
---
文章属性内容
---
Markdown 正文
这些内容会被hugo 解析，作为当前文章的一些属性，常用的属性如下：
---
title: "文章标题" # 文章标题
author: "作者" # 文章作者
description : "描述信息" # 文章描述信息
date: 2015-09-28 # 文章编写日期
lastmod: 2015-04-06 # 文章修改日期
tags = [ # 文章所属标签
"文章标签1",
"文章标签2"
]
categories = [ # 文章所属标签
"文章分类1",
"文章分类2",
]
keywords = [ # 文章关键词
"Hugo",
"static",
"generator",
]
next: /tutorials/github-pages-blog # 下一篇博客地址
prev: /tutorials/automated-deployments # 上一篇博客地址
---比如我们编写了这样一篇文章，文件名为my-first.md：
---
title: "我的第一篇博客"
author: "xiongxinwei"
description : "我的第一篇博客，介绍了hugo"
date: 2022-08-21
lastmod: 2022-08-21
tags : [
"go",
]
categories : [
"博客",
]
keywords : [
"go","hugo",
]
---
这里是Markdown 正文我们将myblog/content/posts 目录中的其它文章删除，只留我们自己的这篇文章：
.
└── my-first.md
使用hugo server 重启博客服务，打开地址http://localhost:1313/，可以看到现在的博客中，只有我们自己写的文章：
博客的配置文件可以根据自己的需要修改，我们来看下Bootstrap v4 主题的配置文件，这些配置属性通过应为并不难理解。
配置文件中属性的内容我做了修改，并添加了中文注释。
# Hugo 属性设置
# 网站地址
baseurl = "https://localhost:1313/"
# 网站语言
languageCode = "en-us"
# 网站title
title = "我的博客"
# 主题的名字，这个要跟myblog/themes 目录中的子目录的目录名一致
theme = "hugo-theme-bootstrap4-blog"
# home/category/tag 页面显示的文章数 (Default: 10)
paginate = 5
# home/category/tag 页面用于摘要的字数 (Default: 70)
summaryLength = 50
# optionally override the site's footer with custom copyright text
# copyright = "Except where otherwise noted, content on this site is licensed under a [Creative Commons Attribution 4.0 International license](https://creativecommons.org/licenses/by-sa/4.0/)."
#googleAnalytics = "UA-123-45"
#disqusShortname = "XYW"
# 博客链接的路径格式
[permalinks]
posts = "/:year/:month/:title/"
page = "/:slug/"
# 顶部栏
[[menu.navbar]]
name = "首页"
url = "http://localhost:1313"
# 侧边栏，可以写多个
[[menu.sidebar]]
name = "新浪"
url = "https://www.sina.com"
[[menu.sidebar]]
name = "Github"
url = "https://github.com"
# Theme 属性设置
#
[params]
# Site author
author = "作者名"
# homepage 页描述信息
description = "我的博客站点"
# Show header (default: true)
#header_visible = true
# Format dates with Go's time formatting
date_format = "Mon Jan 02, 2006"
# verification string for Google Webmaster Tools
#google_verify_meta = "BAi57DROASu4b2mkVNA_EyUsobfA7Mq8BmSg7Rn-Zp9"
# verification string for Bing Webmaster Tools
#bing_verify_meta = "3DA353059F945D1AA256B1CD8A3DA847"
# verification string for Yandex Webmaster Tools
#yandex_verify_meta = "66b077430f35f04a"
# Optionally display a message about the site's use of cookies, which may be
# required for your site in the European Union. Set the parameter below to a
# page where the user can get more information about cookies, either on your
# site or externally, for example:
#cookie_consent_info_url = "/cookie-information/"
#cookie_consent_info_url = "http://cookiesandyou.com"
# show sharing icons on pages/posts (default: true)
#sharingicons = true
# Display post summaries instead of content in list templates (default: true)
#truncate = true
# Disable the use of sub-resource integrity on CSS/JS assets (default: false)
# Useful if you're using a CDN or other host where you can't control cache headers
#disable_sri = false
[params.sidebar]
# Optional about block for sidebar (can be Markdown)
about = "我的博客[简单示例](http://localhost:1313/)."
# 侧边栏显示最近几条文章 (Default: 5)
#num_recent_posts = 2
[params.social]
# Optional, used for attribution in Twitter cards (ideally not a person
# for example: nytimes, flickr, NatGeo, etc).
# See: https://dev.twitter.com/cards/types/summary-large-image
twitter = "username"
# Default content language for Hugo 0.17's multilingual support (default is "en")
# See: https://github.com/spf13/hugo/blob/master/docs/content/content/multilingual.md
#DefaultContentLanguage = "en"
# Languages to render
#[languages.en]
#[languages.bg]
# Bulgarian date format is dd.mm.yyyy
#date_format = "02.01.2006"
# vim: ts=2 sw=2 et我们使用以上配置文件，再次启动服务，访问http://localhost:1313，得到如下页面：
建好自己的博客后，需要将其部署在公网，才能让别人访问。有两种方法：
- 购买自己的域名和服务器，将博客部署在上面。
- 将博客托管在github。
这里我们介绍第2中方式。
要想讲博客部署在github，首先得有一个github 账号。
然后需要在github 上创建一个仓库，用于存放我们的博客系统。
我们创建的仓库的名字应该是这种格式"账户名.github.io"，比如我创建的仓库的名字为"codeshellme.github.io"。
要向仓库中存放的内容，使用hugo 命令生成的。在myblog 目录下，运行hugo 命令：
>>> hugo
| EN
-------------------+-----
Pages | 14
Paginator pages | 0
Non-page files | 0
Static files | 1
Processed images | 0
Aliases | 6
Sitemaps | 1
Cleaned | 0
Total in 74 ms
执行成功后，会生成一个public 目录，这个目录中的内容，就是我们博客系统的所有内容，我们需要将这些内容存放在Git 仓库中。
按照如下步骤将博客内容上传到Git 仓库，在public 目录下，依次执行下面的命令：
# 初始化仓库
git init
# 将所有内容添加到git
git add .
# 提交到git 本地
git commit -m "我的博客第一次提交"
# 关联到远程git，注意这里需要写你自己的git 地址
git remote add origin https://github.com/codeshellme/codeshellme.github.io.git
# 推送到远程git
git push origin master
经过上面的步骤，我们就将博客内容托管在了github。那么你的博客的地址将是这种格式：
https://仓库名字
例如我的博客地址就是：
https://codeshellme.github.io
访问这个地址就可以访问我们的博客了。
如果以后我们写了新的博客，则需要再使用hugo 命令生成新的内容，再将新的内容push 到Git 仓库就可以了。
文档型博客部署，选择的博客是ugo-geekdoc
克隆到本地themes下面
git clone https://github.com/thegeeklab/hugo-geekdoc.git themes/hugo-geekdoc
修改配置文件config中的theme
2022-09-10测试博客主题有问题，没办法部署
hugo-theme-techdoc主题测试
git clone https://github.com/thingsym/hugo-theme-techdoc.git themes/hugo-theme-techdoc
techdoc是可以正常部署的，运行成功后的页面是：
上面的自定义选择
该网站正在运行。不要忘记使用您自己的自定义此主页。您通常有 2 个选择：
- **在
content**文件夹中创建一个_index.md文档并用Markdown内容填充它 - 在静态文件夹中创建一个**
index.html**文件，并用HTML内容填充该文件 - 将您的服务器配置为自动将主页重定向到您的文档页面
将站点部署到 public_html 目录
hugo -t hugo-theme-techdoc -d public_html
接下来就是如何使用
hugo了
我们在前面知道了hugo的基本用法：打包和实时渲染，还有在config配置文件中修改主题
先观察下目录结构
PS C:\Users\smile\Desktop\test\Hugo\Sites\docs> tree 卷 系统 的文件夹 PATH 列表 卷序列号为 DE95-1D97 C:. ├─archetypes ├─content │ └─posts │ └─脑图笔记 │ └─脑图笔记 ├─data ├─layouts ├─public ├─public_html │ ├─1 │ │ └─01 │ ├─categories │ ├─css │ ├─js │ │ └─fontawesome6 │ ├─posts │ │ └─脑图笔记 │ │ └─脑图笔记 │ └─tags ├─resources │ └─_gen │ ├─assets │ └─images ├─static └─themes ├─hugo-documentation-theme │ ├─.github │ ├─assets │ │ └─media │ │ └─icons │ ├─config │ │ └─_default │ ├─content │ │ ├─docs │ │ │ ├─chapter1 │ │ │ └─chapter2 │ │ └─home │ └─static │ └─uploads ├─hugo-geekdoc │ ├─.chglog │ ├─.github │ ├─archetypes │ ├─assets │ │ └─search │ ├─exampleSite │ │ ├─assets │ │ │ └─sprites │ │ ├─config │ │ │ └─_default │ │ ├─content │ │ │ └─en │ │ │ ├─asciidoc │ │ │ ├─collapse │ │ │ │ ├─level-1 │ │ │ │ └─level-2 │ │ │ ├─features │ │ │ │ ├─dark-mode │ │ │ │ │ └─images │ │ │ │ ├─multilingual │ │ │ │ │ └─images │ │ │ │ └─theming │ │ │ │ └─images │ │ │ ├─posts │ │ │ ├─shortcodes │ │ │ │ └─images │ │ │ ├─toc-tree │ │ │ │ ├─level-1 │ │ │ │ │ └─level-1-3 │ │ │ │ └─level-2 │ │ │ ├─usage │ │ │ └─_includes │ │ ├─data │ │ │ ├─menu │ │ │ └─properties │ │ ├─layouts │ │ │ └─shortcodes │ │ └─static │ │ ├─media │ │ └─_includes │ ├─i18n │ ├─images │ ├─layouts │ │ ├─partials │ │ │ ├─head │ │ │ ├─microformats │ │ │ ├─posts │ │ │ └─utils │ │ ├─posts │ │ ├─shortcodes │ │ └─_default │ │ └─_markup │ └─src │ ├─icons │ ├─js │ ├─sass │ └─static │ ├─favicon │ └─fonts └─hugo-theme-techdoc ├─.github │ └─workflows ├─archetypes ├─exampleSite │ ├─content │ │ ├─archives │ │ ├─blog │ │ ├─chapter1 │ │ ├─chapter2 │ │ ├─chapter3 │ │ │ └─chapter3-2 │ │ ├─chapter4 │ │ │ └─chapter4-1 │ │ │ └─chapter4-1-1 │ │ │ └─chapter4-1-1-1 │ │ │ └─chapter4-1-1-1-1 │ │ │ └─chapter4-1-1-1-1-1 │ │ │ └─chapter4-1-1-1-1-1-1 │ │ ├─entry │ │ ├─getting-started │ │ ├─post │ │ ├─posts │ │ └─sample │ └─static │ └─images ├─images ├─layouts │ ├─blog │ ├─partials │ │ ├─menu │ │ └─meta │ ├─posts │ ├─shortcodes │ └─_default ├─src │ ├─js │ │ └─jquery.backtothetop │ └─scss │ ├─foundation │ └─function └─static ├─css └─js └─fontawesome6
Hugo 模块的大多数命令都需要安装较新版本的 Go（请参阅https://golang.org/dl/）和相关的 VCS 客户端（例如 Git，请参阅https://git-scm.com/downloads/） . 如果您有一个在 Netlify 上运行的“旧”站点，您可能必须在环境设置中将 GO_VERSION 设置为 1.12。
用于hugo mod init初始化一个新的 Hugo 模块。如果它无法猜测模块路径，则必须将其作为参数提供，例如：
hugo mod init github.com/gohugoio/myShortcodes另请参阅CLI 文档。
将模块用于主题的最简单方法是将其导入配置中。
- 初始化hugo模块系统：
hugo mod init github.com/<your_user>/<your_project> - 导入主题：
配置。
yaml通俗易懂json
module:
imports:
- path: github.com/spf13/hyde当您将模块作为导入添加到配置中时，将下载并添加模块，请参阅模块导入。
要更新或管理版本，您可以使用hugo mod get.
一些例子：
hugo mod get -uhugo mod get -u ./...hugo mod get -u github.com/gohugoio/myShortcodeshugo mod get github.com/gohugoio/[email protected]另请参阅CLI 文档。
对项目中导入的模块进行本地开发的一种方法是将替换指令添加到本地目录，源代码位于go.mod：
replace github.com/bep/hugotestmods/mypartials => /Users/bep/hugotestmods/mypartials如果你有hugo server运行，配置将被重新加载并/Users/bep/hugotestmods/mypartials放在监视列表中。
请注意，从 v.0.77.0 开始，您可以使用 modules 配置replacements选项。 v0.77.0 中的新功能
从相关模块目录中使用hugo mod graph，它将打印依赖关系图，包括供应商、模块更换或禁用状态。
例如：
hugo mod graph
github.com/bep/my-modular-site github.com/bep/hugotestmods/[email protected]
github.com/bep/my-modular-site github.com/bep/hugotestmods/[email protected]
github.com/bep/hugotestmods/[email protected] github.com/bep/hugotestmods/[email protected]
github.com/bep/hugotestmods/[email protected] github.com/bep/hugotestmods/[email protected]
DISABLED github.com/bep/my-modular-site github.com/spf13/[email protected]
github.com/bep/my-modular-site github.com/bep/[email protected]
github.com/bep/my-modular-site in-themesdir
另请参阅CLI 文档。
hugo mod vendor将所有模块依赖项写入一个_vendor文件夹，然后将用于所有后续构建。
注意：
- 您可以
hugo mod vendor在模块树中的任何级别上运行。 - 供应商不会存储存储在您的
themes文件夹中的模块。 - 大多数命令都接受一个
--ignoreVendorPaths标志，然后它不会将供应商模块_vendor用于匹配给定Glob模式的模块路径。请注意，在 Hugo 0.75 之前，此标志被命名--ignoreVendor为“全有或全无”。 v0.75.0 中的新功能
另请参阅CLI 文档。
运行hugo mod tidy以删除go.mod和中未使用的条目go.sum。
另请参阅CLI 文档。
运行hugo mod clean以删除整个模块缓存。
请注意，您还可以使用 配置modules缓存maxAge，请参阅文件缓存。
另请参阅CLI 文档。
hugo可以配置多个主题组合
theme = ['my-shortcodes', 'base-theme', 'hyde']
您甚至可以嵌套它，并让主题组件本身包含主题组件config.toml（主题继承）。1
上面的主题定义示例config.toml创建了一个具有 3 个主题组件的主题，优先级从左到右。
对于任何给定的文件、数据条目等，Hugo 将首先在项目中查找，然后在my-shortcode,中查找base-theme，最后在hyde.
Hugo 使用两种不同的算法来合并文件系统，具体取决于文件类型：
- 对于
i18n和data文件，Hugo 使用文件中的翻译 id 和数据键进行深度合并。 - 对于
static、layouts（模板）和archetypes文件，它们在文件级别合并。所以最左边的文件将被选中。
上述定义中使用的名称theme必须与 中的文件夹匹配/your-site/themes，例如/your-site/themes/my-shortcodes. 有计划对此进行改进并获得一个 URL 方案，以便可以自动解决此问题。
另请注意，作为主题一部分的组件可以有自己的配置文件，例如config.toml. 目前对主题组件可以配置的内容有一些限制：
params（全球和每种语言）menu（全球和每种语言）outputformats和mediatypes
此处适用相同的规则：具有相同 ID 的最左边的参数/菜单等将获胜。上面有一些隐藏和实验性的命名空间支持，我们将在未来努力改进，但鼓励主题作者创建自己的命名空间以避免命名冲突。
- 对于托管在Hugo Themes Showcase上的主题，需要将组件添加为指向目录的 git 子模块
exampleSite/themes↩︎
Hugo0.32宣布将页面相关图像和其他资源打包到Page Bundles.
这些术语是相互关联的，还需要阅读有关页面资源和图像处理的信息才能全面了解。
在 Hugo 中，您的内容应该以反映呈现网站的方式组织。
虽然 Hugo 支持在任何级别嵌套内容，但顶层（即content/<DIRECTORIES>）在 Hugo 中是特殊的，被认为是用于确定布局等的内容类型。要阅读有关部分的更多信息，包括如何嵌套它们，请参阅部分。
没有任何额外的配置，以下将自动工作：
.
└── content
└── about
| └── index.md // <- https://example.com/about/
├── posts
| ├── firstpost.md // <- https://example.com/posts/firstpost/
| ├── happy
| | └── ness.md // <- https://example.com/posts/happy/ness/
| └── secondpost.md // <- https://example.com/posts/secondpost/
└── quote
├── first.md // <- https://example.com/quote/first/
└── second.md // <- https://example.com/quote/second/
下面演示了您的内容组织与您的 Hugo 网站呈现时的输出 URL 结构之间的关系。这些示例假设您使用的是漂亮的 URL，这是 Hugo 的默认行为。baseURL = "https://example.com"这些示例还假定您站点的配置文件中的键值是。
_index.md在hugo中有一个特殊的角色。它允许您在列表模板中添加头条内容和内容。这些模板包括部分模板、分类模板、分类术语模板和您的主页模板。
提示：_index.md您可以在使用该.Site.GetPage函数时获得对内容和元数据的引用。
您可以_index.md为您的主页创建一个，并在每个内容部分、分类法和分类术语中创建一个。以下显示了一个典型的放置，其中包含Hugo 网站上部分列表页面的_index.md内容和头条：posts
. url
. ⊢--^-⊣
. path slug
. ⊢--^-⊣⊢---^---⊣
. filepath
. ⊢------^------⊣
content/posts/_index.md
在构建时，这将使用相关值输出到以下目标：
url ("/posts/")
⊢-^-⊣
baseurl section ("posts")
⊢--------^---------⊣⊢-^-⊣
permalink
⊢----------^-------------⊣
https://example.com/posts/index.html
这些部分可以嵌套任意深度。要理解的重要一点是，要使部分树完全导航，至少最下面的部分必须包含一个内容文件。（即_index.md）。
每个部分中的单个内容文件将呈现为单个页面模板。下面是一个 inside 的post例子posts：
path ("posts/my-first-hugo-post.md")
. ⊢-----------^------------⊣
. section slug
. ⊢-^-⊣⊢--------^----------⊣
content/posts/my-first-hugo-post.md
当 Hugo 构建您的站点时，内容将输出到以下目的地：
url ("/posts/my-first-hugo-post/")
⊢------------^----------⊣
baseurl section slug
⊢--------^--------⊣⊢-^--⊣⊢-------^---------⊣
permalink
⊢--------------------^---------------------⊣
https://example.com/posts/my-first-hugo-post/index.html
在为网站构建输出时，以下概念可以更深入地了解项目组织与默认 Hugo 行为之间的关系。
默认内容类型由存储内容项的部分确定。section由项目content目录中的位置决定。section 不能在前面指定或覆盖。
内容slug是name.extension或name/。的值slug由下式确定
- 内容文件的名称（例如
lollapalooza.md）或 - 前面的事情覆盖
内容path由该部分的文件路径决定。文件path
- 基于内容位置的路径和
- 不包括蛞蝓
这url是一段内容的相对 URL。这url
- 基于目录结构中内容项的位置或
- 在前面定义，在这种情况下，它会覆盖上述所有内容
Hugo 假设您的内容是有目的的。用于组织源内容的相同结构用于组织呈现的站点。如上所示，源内容的组织将在目的地镜像。
有时您可能需要对内容组织进行更细粒度的控制。在这种情况下，可以使用前端字段来确定特定内容的目的地。
以下项目按特定顺序定义是有原因的：列表中较低解释的项目会覆盖较高的项目。请注意，并非所有项目都可以在前面定义。
filename不是前沿领域。它是实际的文件名，减去扩展名。这将是目标中文件的名称（例如，content/posts/my-post.md变成example.com/posts/my-post/）。
在前面定义时，slug可以代替目标中的文件名。
内容/帖子/old-post.md
---
title: A new post with the filename old-post.md
slug: "new-post"
---这将根据 Hugo 的默认行为呈现到以下目的地：
example.com/posts/new-post/
section由内容项在磁盘上的位置决定，不能在前面指定。有关详细信息，请参阅部分。
内容项的type位置也由其在磁盘上的位置决定，但与 不同的是section，它可以在前面的内容中指定。见类型。当您希望使用不同的布局呈现一段内容时，这会特别方便。在下面的示例中，您可以创建一个布局layouts/new/mylayout.html，Hugo 将使用该布局来呈现这段内容，即使在许多其他帖子中也是如此。
内容/帖子/my-post.md
---
title: My Post
type: new
layout: mylayout
---可以提供完整的 URL。这将覆盖上述所有内容，因为它与最终目的地有关。这必须是来自 baseURL 的路径（以 开头/）。url将完全按照前面的定义使用，并将忽略--uglyURLs站点配置中的设置：
内容/帖子/旧网址.md
---
title: Old URL
url: /blog/new-url/
---假设您baseURL的配置为https://example.com，添加url到前面的内容将使old-url.md渲染到以下目标：
https://example.com/blog/new-url/
您可以在URL 管理中查看有关如何控制输出路径的更多信息。