如何添加新的hugo静态页面?

Posted

技术标签:

【中文标题】如何添加新的hugo静态页面?【英文标题】:How to add a new hugo static page? 【发布时间】:2015-04-18 14:50:44 【问题描述】:

从“入门”部分看来,这应该可行,但实际上并没有。

hugo new site my-site
hugo new privacy.md
hugo server --watch --includeDrafts

curl -L localhost:1313/privacy/index.html
# 404 page not found
curl -L localhost:1313/privacy.html
# 404 page not found
curl -L localhost:1313/privacy/
# 404 page not found

如何添加新页面?

【问题讨论】:

据我了解:像任何其他帖子一样创建它,但它应该位于content 目录中。即不要把它放在content/posts 目录中 【参考方案1】:

刚刚在 Hugo 0.13 上对此进行了测试:

hugo new site my-site
cd my-site
hugo new privacy.md
hugo server -w -D
curl -L localhost:1313/privacy/

注意:您必须使用主题或提供自己的布局模板才能获得比空白页面更多的东西。当然,privacy.md 中的一些 Markdown 也会让它变得更好。

有关最新文档,请参阅 http://gohugo.io/overview/introduction。

【讨论】:

为什么需要 -w -d? 使用 hugo 0.69.0,这对我来说不再适用了。 % curl -L localhost:1313/privacy/:404 page not found 确保设置 draft: 'false' 以显示页面 如果您看到404 page not found,请确保设置type: page 并具有single.html 布局,如本文所述:***.com/questions/46216333/…【参考方案2】:

让你在archetypes/default.md中设置一些默认的frontmatter

# archetypes/default.md
+++
title: " replace .Name "-" " " | title "
date:  .Date 
draft: true
+++

以及layouts/_default/single.html中的单一布局来渲染一些变量或内容

# tags to render markdown content
<h1> .Title </h1>
<p> .Content </p>
<span> .Params.date </span>

现在输入hugo new privacy.md,这将在content/privacy.md的以下目录中创建一个新页面

【讨论】:

【参考方案3】:

以“关于”为例:

# will create content/about.md
hugo new about.md

编辑 about.md 并添加最后 2 行,元数据/前面的内容如下:

title: "About"
date: 2019-03-26
menu: "main"
weight: 50

应该可以的。

【讨论】:

这得到了菜单中的链接。但我也可以在主页上看到它作为帖子。有什么办法可以去掉?【参考方案4】:

我有类似的要求,添加静态页面(在这种情况下为aboutus)。以下步骤成功了,

创建了一个空文件content/aboutus/_index.md 创建aboutus.html页面layouts/section/aboutus.html

【讨论】:

【参考方案5】:

这是如何在 Hugo 上创建静态“登陆页面”的最佳教程:https://discuss.gohugo.io/t/creating-static-content-that-uses-partials/265/19?u=royston

基本上,您在/content/ 中创建.md 并在前面的内容中使用type: "page",然后为其创建自定义布局,例如在前面的内容中layout: "simple-static",然后在themes/&lt;name&gt;/layouts/page/ 中创建布局模板,例如, simple-static.html。然后,像往常一样使用所有部分,并使用 .Content 调用原始 .md 文件中的内容。

我所有的静态(登陆)页面都在使用这个方法。

顺便说一句,我没有使用hugo new,我只是克隆.md 文件或将模板复制到/content/ 并使用我的iA Writer 文本编辑器打开它。但我也没有使用 Hugo server,改编后的 npm-build-boilerplate 正在运行服务器并构建。

【讨论】:

这个过程有点复杂。但是谢谢你指明了方向! =) 这应该是正确的答案,并且与 2020 年的 Hugo 文档一致。

以上是关于如何添加新的hugo静态页面?的主要内容,如果未能解决你的问题,请参考以下文章

Hugo/markdown 中的链接页面

为啥 Hugo 提供空白页?

如何将静态页面添加到WordPress?

如何在不使用 +150k 静态页面重建应用的情况下添加新页面?

如何将静态页面转化为动态页面

ReactJS静态站点生成器Gatsby