建设简单和占位符性的Hugo网页

通过建设简单的网页，我们学习hestiaHUGO如何运行。 一个一步一步编好的ZORALab赫斯提亚Hugo从新设置指南。

学习目标

在成功完毕这个指南领导后，您会学到:

  1. 了解hestiaHUGO如何和Hugo一起运作

  2. 了解hestiaHUGO如何管理文件和URL链接系统

  3. 了解hestiaHUGO如何处理界面元件设计自由

  4. 了解hestiaHUGO的设计是如何面对W3C的永久更新

  5. 了解hestiaHUGO的设计如何面对多元化的输出成果(HTML & JSON)

  6. 了解hestiaHUGO在默认情况下如何处理世界多语言

先决条件

这个指南是先决您已经有一份尤其是通过之前的指南设立随时可以运用拥有hestiaHUGO的 Hugo代码库。不然的话，那就请先完整之前的指南才会来这点：

设置拥有hestiaHUGO的Hugo

了解hestiahugo如何处理URL地址和文件系统

hestiaHUGO原生是有支持它自己的多语言（i18n）功能： 它是运用第一层的文件夹为 ISO639-1、ISO639-2、ISO639-3、ISO15924和ISO3166 语言规范 或无语言关系的网页（如：URL地址重向网页）。其余的是和Hugo一样。 我们非常建议您为那文件夹设名时一定要遵守URL地址的模式和规则 （如：没有空格、一切是小字母和没有古怪的符号等等）。 即使您是建设语言单一的网站都好， 您也为了未来不想垄断网页的链接点得遵守这个名字模式。

**模式**
文件路线 ：          content/[i18n]/url-compatible-pathing/file.extension
URL地址  ： [http://baseURL]/[i18n]/url-compatible-pathing/file.extension?query=value#tags

**例子**
content/ (https://hestia.zoralab.com/)
	重定向去 ➔ content/en (https://hestia.zoralab.com/en)
	重定向去 ➔ content/zh-hans (https://hestia.zoralab.com/zh-hans/)

content/releases (https://hestia.zoralab.com/releases)
	重定向去 ➔ content/en/releases/ (https://hestia.zoralab.com/en/releases/)
	重定向去 ➔ content/zh-hans/releases/ (https://hestia.zoralab.com/zh-hans/releases/)

content/zh-hans/releases/v1-0-0/ (https://hestia.zoralab.com/zh-hans/releases/v1-0-0/)
content/zh-hans/releases/v1-1-0/ (https://hestia.zoralab.com/zh-hans/releases/v1-1-0/)
content/zh-hans/releases/v1-2-0/ (https://hestia.zoralab.com/zh-hans/releases/v1-2-0/)
content/zh-hans/releases/v1-2-0/index.html (https://hestia.zoralab.com/zh-hans/releases/v1-2-0/)
content/zh-hans/releases/v1-2-0/index.json (https://hestia.zoralab.com/zh-hans/releases/v1-2-0/index.json)
content/zh-hans/releases/v1-2-0/my-file.zip (https://hestia.zoralab.com/zh-hans/releases/v1-2-0/my-file.zip)

制造Hugo的Content文件夹

我们先开始制造Hugo需要的Content文件夹吧。 它的名字其实在您的config/_default/config.toml文件里的 contentDir数码价值(常名为content）。 您可以改成别的名字。在这个指南里，我们还是运用常名content来制造。 过后呢，您需要重新启动您的 Hugo Server(提示：server.cmd命令）。全部命令菜单如下：

# LINUX / MACOS
	[ CTRL+C 停止Hugo Server ]
	$ cd sites/        # 如果您不在您的Hugo文件夹里
	$ mkdir -p content
	$ hugo server .... # 如果忘记，请复习之前的指南


# WINDOWS
	[ CTRL+C 停止Hugo Server ]
	> cd sites/        # 如果您不在您的Hugo文件夹里
	> mkdir content
	> hugo server .... # 如果忘记，请复习之前的指南

建设占位符性的网页

现在系统需要的文件夹已经有了， 我们可以开始为/zh-hans登陆网页建设成占位符性网页。 我们暂时是不会建设这一页。不过呢， /zh-hans/404网页是需要它的出现才能开始建设。 hestiaHUGO原生是和Hugo系统综合的。 既然这个指南的语言是国际华语，那我们就通过Hugo命令来建出 content/zh-hans的网页吧。 切记：这个命令是又重要和又常用的。您最好把它给记得起来。命令模式如下：

**模式**
$ hugo new --kind hestia [filesystem path]


**例子**
$ hugo new --kind hestia content/zh-hans

了解hestiahugo如何处理网页的设置

在还未继续建设时，我们先了解hestiahugo如何处理网页的设置。 如果您现在观光那content/zh-hans/文件夹里，您会找到很多TOML设置文件。 由于现代的互联网的构造已经变得非常复杂， 我们也无可奈何只能把那么多的设置分成因该的设置文件。 有一个固定的思维一定要记住：千万不可碰Hugo原本的_index.html文件。 它现在只是让Hugo寻找您的网页地图而已。 我们的hestiaHUGO设计是很少会和其他Hugo界面的模块有冲突的 而且您还是可以继续在同一个文件夹里放入网页有关而已的文件 （如：有关图画只有这个网页运用、 .docx文件、 .csv文件， .pdf文集等等）。 每个设置TOML文件如：

__assets.toml            ➤ 处理所有要在编制中加入CSS和JS代码库文件
__components.toml        ➤ 例出所有在编制这页运里需要的hestiaHUGO界面模块
__content.hestiaCSS      ➤ 这网页有关和将会被内嵌进HTML输出成果的最后一份CSS文件
__content.hestiaHTML     ➤ 这网页输出的HTML内容模型
__content.hestiaJS       ➤ 这网页有关和将会被内嵌进HTML输出成果的最后一份JS文件
__content.hestiaJSON     ➤ 这网页输出的JSON内容模型
__content.hestiaLDJSON   ➤ 这网页有关和将会被内嵌进HTML输出成果的LD+JSON文件
__contributors.toml      ➤ 例出所有在这网页有关的贡献者
__data.toml              ➤ 一份网页层的数据文件
__i18n.toml              ➤ 一份网页层的数据文件
_index.html              ➤ hugo网页察觉文件 (**绝对不可碰**)
__languages.toml         ➤ 这网页的其他语言(翻译）网页链接菜单
__page.toml              ➤ 这网页的主要第一设置文件
__robots.toml            ➤ 这网页有关和将会被内嵌进HTML输出成果的擦寻机械器指南
__thumbnails.toml        ➤ 这网页的是在社交网络运用的展览缩略图
__twitter.toml           ➤ 这网页的推特设置
__wasm.toml              ➤ 这网页的WASM设置

更新__page.toml

别担心，要处理占位符性的网页只需更新__page.toml设置文件就行了。 这份文件是网页的最重要的设置数据。一些您需要更新的数据有如：

...

[Date]
Created   = 'Sat, 05 Mar 2023 11:22:21 +0800'  # 记得更新到今天时间
Published = 'Sat, 05 Mar 2023 11:22:21 +0800'  # 记得更新到今天时间

...

[Content]
Title = '我的APP'
Keywords = [
        '我的APP',
]

...

[Description]
Pitch = '''
待确认中。
'''
Summary = '''
待会儿在回来。
'''

...

Git Commit占位符性的网页

现在全部东西已经设好了，您可以为这占位符性的网页的网页Git Commit掉然后往我们想要 的/zh-hans/404网页建设。如果您需要Git的帮助，您可以通过以下的URL链接了解他们的官 方书。大致上的命令列单是：

Git手册书
$ git add .
$ git commit -s

--- 在您的文本编辑器里更改 ---
sites: 加入/zh-hans/占位符性的网页

为了我们想建设的/zh-hans/404网页，我们还是先建设需要的/zh-hans/占位符性
的网页。如此，我们就开工吧。

这个补丁是在sites/文件夹里加入/zh-hans/占位符性的网页。


Signed-off-by: Name <EMAIL>
--- 在您的文本编辑器里更改 ---

$ git push

为404网页建设重复所学的技巧

现在轮到您表演啦。我们要建设简单的/zh-hans/404网页 （提示：content/zh-hans/404）。 请运用您之前所学的技巧先假设需要的网页设置但是不需要Git Commit就行了。 我们要接下来开发它。

提示：
(1) $ hugo new --kind hestia [filesystem path]
(2) $ 为404网页的__page.toml更新它需要和合适的数据。
(3) $ git add .

更新网页推特的设置

和之前占位符性的网页不同的是这一轮我们要彻底建设网页了。 首先， 如果您有推特的用户您可先更新content/zh-hans/404/__twitter.toml 的这篇网页有关的设置。由于这是个404网页（因该没有人特地去询问吧）， 您只需要更新以下的数据就行了：

...

[Creator]
Handle = 'yourTwitterHandle'    # 有没有@都可以

...

更新擦寻机械器指南设置

由于这页是个404网页，我们是不要网络擦寻机械器给放入大众的擦寻菜单里。如此以来， 我们需要更新那content/zh-hans/404/__robots.toml设置文件了。 这些网络擦寻机械器的指南数据将会被内嵌进HTML的meta标签里。例子有如：

...

[[Meta]]
Name = 'googleBot'
Content = 'noindex, nofollow'

[[Meta]]
Name = 'robots'
Content = 'noindex, nofollow'

更新网页的语言设置

为了避免在以后制造太多复制粘贴的错误，我们还是最好更新 content/zh-hans/404/__languages.toml语言设置。 我们非常建议您运用RFC3986符合的URL链接相对型网址。 我们会在下一步好好解释让您了解更多。以下是需要的更新工作：

...

[zh-hans]
URL = '/zh-hans/404'

了解hestiahugo如何处理URL

hestiaHUGO运用它自己的URL数据处理器（名为hestiaURL/Sanitize功能）。 我们非常建议您在编译之前的范围运用相对型网址（如：您的网页模板等等） 然后让hestiaHUGO把它编译成绝对型网址。 您的网络游客不管任何原因永远都一定要得到绝对型网址。 这个功能是RFC3986符合的。 所以呢，您在建设相对型网址要小心啦。以下的例子可以详细描述它们的不同点：

RFC3986 URL规范
例子1 - 输入无关的绝对型网址
基地地址 : https://hestia.zoralab.com/default-path
现任网页 : https://hestia.zoralab.com/default-path/this-page/
输入     : https://www.example.com/
输出     : https://www.example.com/


例子2 - 输入与基地地址有关的相对型网址
基地地址 : https://hestia.zoralab.com/default-path/
现任网页 : https://hestia.zoralab.com/default-path/this-page/
输入     : /my-page
输出     : https://hestia.zoralab.com/default-path/my-page


例子3 - 输入与现任网页的对型网址（注意：地址没有带头的斜线'/'）
基地地址 : https://hestia.zoralab.com/default-path/
现任网页 : https://hestia.zoralab.com/default-path/this-page/
输入     : my-page
输出     : https://hestia.zoralab.com/default-path/this-page/my-page

开发网页的HTML内容模型

给予hestiaHUGO， 那份HTML内容模型文件其实是在__page.toml 设置文件里的Sources.HTML所设的数据。 原型数据其实是在同一个文件夹的__content.hestiaHTML文件。 在这个指南里，如今我们是初学者， 那我们就用那原型__content.hestiaHTML文件吧。 咱们就打开来研究一下。 如果您是已经上轨的Hugo模型开发者，您会马上发现到我们是运用Go的模型呈现功能 （包括Hugo的partial功能）而不再是Markdown格式和Hugo的shortcode系统。 在运用任何ZORALab赫斯提亚的产品时， 我们是会要把它们开发成统一和越通用越好的。 如果您已经是Go的开发者，您的Go Template智慧和经验自动和完整无亏损地在这个重用。 在这个指南里，我们把文件给更新成一下的代码吧。当您完成任务后， 让那Hugo服务器处理之后， 您可以询问那服务器给的地址+/zh-hans/404/网页检验内容的准确。

...

{{- /* render outputs */ -}}
<main>
	<section id='自介' class='banner'>
		<h1>{{- .Titles.Page -}}</h1>
		<p>{{- .Descriptions.Page.Pitch }} {{ .Descriptions.Page.Summary -}}</p>


		{{- $ret := merge . (dict "Input" (dict "Data" "/en/")) -}}
		{{- $ret = partial "hestiaURL/Sanitize" $ret -}}
		<a class='button' href='{{- $ret -}}'>回去主页</a>
	</section>
</main>

了解hestiaHUGO如何处理网页数据

不像Hugo需要让网页设计师去猜测数据价值，hestiaHUGO处理和运用自己的网页数据结构好 让设计师容易运用。更好的是，我们还有网页内可设计自适应的调试器控制台让您检验任何 有关可用的数据。有注意到荧幕右边底下有个非常彩色的按钮吗？按按看就可以看到调试器 控制台了。 例如呢，您有注意到{{- .Titles.Page -}} 被呈现成它的数据.Titles.Page价值了？

了解hestiahugo的数据路径

hestiaHUGO终于完成设计它对content 文件夹的控制和设计好让每一个文件夹输入有关网页需要的数码资料。 还记得__i18n.toml和__data.toml文件吗？ 这些数码文件有在__page.toml的[[Data]]数组菜单里。 hestiaHUGO维持足够的自由来建设网页的数据架构。 当它完成解析所有的数据文件后， 您的数据可以通过hestiaHUGO.Page数据架构来建设您的网页。 其他的设置文件当然也是会供应不同的数据。请随心通过调试器控制台玩玩研究吧。 以下的链接是hestiaHUGO.Page数据架构的规范 （的空时才阅读吧，我们先向前走）。

hestiaHUGO.Page数据架构规范
__data.toml + __i18n.toml + ...   (切记: 跟着__page.toml的[[Data]]数组菜单)
             ⤋
         .Field.[...]
             ⤋
     {{- .Field.[...] -}}

了解hestiaHUGO如何授权Hugo

hestiaHUGO如其他ZORALab赫斯提亚模块供应自己的标准代码库。刚才有注意到您运用 hestiaURL.Sanitize吗？那是hestiaHUGO的URL数据检验功能。 它把URL链接从相像型去稳定的绝对型。 能供应自己的标准代码库主要是我们可以继续专心发展 ZORALab赫斯提亚尤其是所有模块通用而不是整天只是忙着寻擦Hugo不稳定的输出成果根源。 所有ZORALab赫斯提亚元件都是经过同样的上下文写出的。 以下的链接是ZORALab赫斯提亚全部的API规范官方文件。为了这份指南，我们会向前走。 待会阅读吧。

规范

开发网页的界面造型元件菜单

现在我们已经肯定了呈现HTML而已的网页数据，我们可以开始开发它的造型了。hestiaHUGO 运用界面元件方式去把网页稳重地造型出来。 请更新/zh-hans/404/__components.toml的设置数据如以下显示的资料。 但您做好了后，就让Hugo服务器内部更新一下才再次刷新观看那404网页。 您会注意到那网页已经美化好（尤其是那按钮）。 您可以通过调试器控制台寻找.CSS.Inline的编这页制出的CSS代码。

...
[[List]]
Name = "zoralabCORE"
Include = true
Variables = [
        { "--body-scroll-behavior" = "smooth" },
]

[[List]]
Name = "zoralabFONT_NOTOSANS"
Include = true
Variables = []

[[List]]
Name = "zoralabANCHOR"
Include = true
Variables = []

[[List]]
Name = "zoralabBUTTON"
Include = true
Variables = []

了解hestiaHUGO如何处理网页造型

hestiaHUGO是像Backbone、Angular和React结构把页造型元件化但与它们不同的是 hestiaHUGO把每个元件的HTML、CSS、和JS综合起来而不是分开偏向JS单一处理。如此一来， 通过Hugo，hestiaHUGO可以编制网页只需要的CSS、CSS变化值和JS的代码然后内嵌进它的 HTML代码里。那编制出的HTML文件是AMP最初设想自给自足而不再需要而外远程架构的网页 啦。另外呢，这个编制出的HTML文件可以很容易地支持PWA离线情况下继续运用而且还让造 型元件设计师专住和容易化元件更新W3C的不向后兼容的进展工作。3件事1次性搞定⥤价廉 物美啊。

界面造型元件规范菜单

了解hestiaHUGO为何集装每个网页的造型

主要是要避免在更新UI时在全站里搞出打鼹鼠游戏类似的网页造型破裂。我们已经实验过很 多种方式了。 如今，这个方式是最优化了。若要好像以前一样地在全站里规模化， 您只需复制那__components.toml就行了。 这样做也可以让初学设计师可以安全地地去制作网站同时放心地搞错误来学习和进展。

了解hestiaHUGO如何操作界面元件

如同之前所说的：CSS代码是用来造型界面、CSS变化值是用来随环境更改界面定制和JS代码 用来造型动画和反映设计等等用途。当您加入一份界面元件时，您会有一个Include的开关 在设计中用来容易寻找问题根点（好过把一大堆的代码给删掉）。您也同时可以同时改写 界面元件CSS变化值现有的价值，好让hestiaHUGO只需编制一份CSS变化值菜单就足够了。

...

[[List]]
Name = "zoralabCORE"
Include = true
Variables = [
        { "--body-scroll-behavior" = "smooth" },   # 这个改写原本的none价值
]

...

了解ZORALab赫斯提亚为何只专注HTML和CSS造型而已

为了2个重要的原因：

  1. 支持隐私优先的呈现（如：完全禁用JS）➤ 在2022新冠疫情时期， 每个人对隐私数据泄漏非常敏感所以完全禁用JS的用法是迟早的。 在这种情况里， 您的出名JS构架和我们的WASM是完全没用但是游客还是要网站可以依然使用。

  2. ZORALab赫斯提亚有目的把JS给一些正常点的代码语言如Go或Nim通过WASM完全代替。 如果只是HTML和CSS而已，那界面元件WASM进化工作会非常容易 「不需要烦JS的控制骚扰」。

无论如何，您还是可以运用Javascript（我们会迟点教您）。 在ZORALab赫斯提亚行政里， 我们绝不像某些科技那么狠心霸道来控制任何人的艺术自由发挥和表现。

了解zoralab和JavaScript关系

咱们面对现实吧：JavaScript虽然在历史至今还是不稳定和唯一可以在网络运用的代码语 言。它的不定弱点搞出一些架构如Angular和Typescript等等来变通地“解决”问题。由于它 们本身也是来自Javascript出生，就这样制造了它们本身的问题。如今WASM的诞生， ZORALab坚决地要迎面地解决这JavaScript的问题啦。我们不是讨厌JavaScript而是发现它 还蛮高风险的。很久以前的JavaScript架构出生和淘汰就足够证明一切了。

了解hestiaHUGO的未来

如今想要达到我们的网络科技梦想，那就有3个使用案例必须实现：

  1. 可被SEO和SMO发现的网页、

  2. 单一APP - 1个WASM操作整个网站和

  3. 反应式渲染网页 - 每个网页都有自己的WASM渲染网页内容。

hestiaHUGO将会满足使用案例：

  1. 和供应WASM给使用案例

  2. 和使用案例

  3. 这也就是为何我们还在支持Hugo（还把它改成内容编译器）。

通过CSS再更改进化网页造型

现在那404网站已经规模化地美化了，您可以通过CSS再更改进化那网页到它独特的造型。 您只需要在__content.hestiaCSS加入您的CSS代码就行了。 hestiaHUGO会把它编译为最后一份内嵌的CSS文件。 当Hugo服务器做好了，您可以回去那网页看看。它因该是在以颜色跳舞吧。

main {
	height: 100vh;
	width: 100vw;

	 isplay: flex;
	justify-content: center;
	align-items: center;

	background: linear-gradient(245deg,
					#192fe3,
					#19e33b,
					#bbe319,
					#e35019,
					#e31919,
					#e319c1);
	background-size: 1200% 1200%;

	animation: BgDiscoFlasher 4s ease infinite;
}

@keyframes BgDiscoFlasher {
	0%{background-position:0% 86%}
	50%{background-position:100% 15%}
	100%{background-position:0% 86%}
}

.banner {
	width: 50%;
	max-height: fit-content;

	padding: 5rem;
	border-radius: 2rem;

	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	background: rgba(255, 255, 255, .75);
}

通过JavaScript更新进化网页

同时，您也可以通过JavaScript更新进化网页造型。 那文件是__content.hestiaJS。虽然那404网页已经不需要在进化造型了， 为了完整化这份指南，我们就加入以下的JS代码经历一下吧。 当Hugo处理器搞定好了， 您可以再次观赏那404网页然后打开浏览器的检查器控制台（F12键盘键)。 您应该会看到一只喵喵的猫咪。就如CSS一样：这份JS也是编译为最后一份内嵌的JS文件。

window.onload = function() {
	console.log("\nMeow~~~~ ₍⌯ᴖⱅᴖ⌯ ^₎◞ ̑̑ෆ⃛ \n\n");
};

为SEO更新LD+JSON数据

hestiHUGO有内置支持Schema.org的网页数码构架。 那有关文件是__content.hestiaLDJSON。 如今是404网页，我们只需要加入以下的代码程序就行了。 当Hugo服务器完成它的更新程序之后， 您可以在网页内通过我们的调试器控制台索取输出的成果然后送去Schema.org 的验证室检验一下。

LD+JSON验证室
...
{{- /* prepare variables for function */ -}}
...



{{- /* execute function */ -}}
{{- $dataList = merge $dataList (partial "hestiaJSON/schemaorgLDJSON/WebPage" .) -}}




{{- /* render output */ -}}
...

了解hestiaHUGO如何处理LD+JSON

为了在自由发挥和稳重输出内保持平衡，两件要记得的是：

  1. hesitaHUGO只能帮您快速地建设先知常用的数据构架（如作者、页类、等等）。

  2. 您需要自己另加网页有关的仔细数据（如：煮法步骤等等类型）。

Schema.org Data Structures

暂存当前的状态

现在HTML的输出成果已经做好了，我们就应该Git暂存目前的状态。我们的目前工作还未做 完。请继续下一步吧。

提示：
$ git add .

制造JSON的输出内容

hestiaHUGO在默认情况下支持JSON为同时第二输出内容。 这是hestiaHUGO的功能，而不是运用Hugo的。 有如之前的LD+JSON相似，您可以在这儿建设网页的数据架构。 但是和LD+JSON不同的是，您是不会被Schema.org的数据架构规范给横行锁住。 这是纯真JSON（可以在URL地址加上index.json就可以看到）。 那文件是在__page.toml里被.Sources.JSON规定的 （常用的是__content.hestiaJSON）。 既然我们现在是建设404网页，我们可以放着就好。您可以去看看那文件来了解更多。

了解hestiaHUGO为何默认情况支持JSON输出内容

5个原因：

  1. 可以运用hestiaHUGO制作CDN推动的开源数据API的服务网站、

  2. 一个在网络搜寻服务工商接近为了广告收入破坏SEO的情况下备份原因来运用Hugo、

  3. 供应一个没有被LD+JSON锁控的数据输出、

  4. 确定和测试hestiaHUGO可以输出多个一种内容和

  5. 准备一个方法为AI输入数据。

在默认情况下的设置是为没有需求而定。 如果您不需要运用JSON输出内容， 您可以完全不碰那__content.hestiaJSON文件。

提交和推送

在这检查站，我们已经完整地把一个简单和基本的404网页做好了。您可以Git提交和推送 了。

提示：
$ git add .
$ git commit -s
----
... 如之前所教的写出一个好Git论文 ...
----
$ git push

记得hestiaHUGO的强点

如果您还未发现， hestiaHUGO只需要输入1分网页数据来输出多种内容格式和可以稳重地同时支持多种语言。 其实，它还私低下为每份网页输出sitemap.xml和 sitemap-page.xml的文件。 这也就是我们一路想解决的Hugo问题：1个稳重的输入数据安稳地输出多种内容格式。 我们目前所学的只是一小部分而已。 在以后的指南里，我们会继续研究更多hestiaHUGO的功能。

下一步？

现在您明白如何制作简单的网页了，下一步是如何从一开始就支持多语言系统。 以下是下一步的URL链接：

从一开始就运用多语言系统

终结

我们已经抵达终结段落了。如有询问，您是可以通过以下管道来联系我们吧：


GitHub论坛