Hugo 木兰花 🌸 | 演示

一个简单、可定制、多语言的 Hugo 主题，专为专业人士和小型企业设计。

我决定通过制作这个主题供大家使用，以此表达我对 Hugo 开发人员和社区的个人感谢。

这个主题实际上对“Hugo 新手”非常友好，因为它提供了一个示例站点，可以与主题的最新版本一起使用，主要页面可以直接使用，大多数参数已在配置文件中。您可以自定义调色板和一些页面图像。此主题还旨在提供非常完善的文档，以便即使是完全陌生的人也可以访问并尽快运行您的网站。

我非常重视开源社区，因为这些年来，我一直在使用许多开源项目，这些项目使我的生活变得更好，并在许多方面提高了我的数字自由。

自由使我们成为更好的人，并使我们更快、更轻松地改善我们的状态。

请务必给这个仓库加星！

特性 ⚡

我在构建这个主题时考虑到了简单性，它小巧且易于定制，响应迅速，模块化且多语言。但它也为进一步的深入定制留出了一些空间，因为它使用了 Bootstrap 和 SCSS。这个主题被认为是个人/商业主题，它可以为您的活动提供一个很棒的着陆页或博客！

1. 响应式

• 该主题是完全响应式的，并在每个屏幕尺寸上完美显示。

2. 模块化

• 从配置文件中轻松隐藏和显示一些元素。

3. 多语言

• 默认内容语言为英语（可以更改），但您可以非常轻松地添加任意多种语言，主题包括一个意大利语示例和一个下拉菜单，用于轻松切换语言。永久链接可以在每种语言中进行本地化（例如，英语可以使用 /contacts，意大利语可以使用 /contatti）。

4. 可定制

以下是目前可自定义的部分

• 着陆页
• 具有任意数量点的“服务”页面
• 带有集成 Google 地图视图以获取方向的“办公室”页面
• 带有 FormSpree 连接表单和营业时间的联系页面

5. SEO 就绪

• 每个页面都有一个易于自定义的元描述和一个唯一的元标题，以便更好、更容易地建立索引。每个帖子都可以选择添加特色图片，如果找不到，则将使用 assets/img/meta-image 作为 Google、Facebook 和 Twitter 的元图片。所有没有特色图片的页面都将默认使用 meta-image（例如主页、办公室等）。有一个 robots.txt 文件指示站点地图索引的正确位置，以便更快地建立索引。

6. 支持 Google Analytics

• 将您的 Google Analytics 代码插入 config.toml 文件中，并准备好轻松跟踪您的网站性能。

7. 包含 Google 地图

• 通过添加 Google 地图链接以获取前往您的活动位置的方向，可以轻松自定义联系页面。

8. 准备好写博客

• 该主题提供了一些原型和一个简单的目录结构，您可以用多种语言发布文章/帖子，设置发布日期、特色图片、过期日期并标记您的帖子。您可以创建和翻译自定义标签。最新帖子将显示在主页上，每个标签都有自己的列表页面，每个帖子都将显示基于标签的最新相关帖子列表。如果您在帖子中包含标题，它们将自动呈现在目录中。帖子的 SEO 也经过精心处理。如果您不需要，您也可以完全禁用主题的博客部分！

快速入门：如何安装 📥

1. 安装 hugo extended，请按照官方安装指南进行操作。要使用此主题，您无需执行 hugo new site，因为您将在第 2 步中克隆一个示例站点。

2. 从仓库克隆 exampleSite 和主题：git init && git clone -b exampleSite --recurse-submodules https://github.com/ololiuhqui/magnolia-free-hugo-theme <您的网站名称>（将命令中的 <您的网站名称> 更改为您想给您的网站的名称）。

3. 从您网站的根文件夹中删除您的默认 config.toml；新配置将在 config/_default 中找到。主要的配置文件是 config/_default/config.toml，但大多数变量被各个语言配置文件（例如 config/_default/languages/.en.toml）覆盖或定义。

4. 移动到您的站点目录，并使用 hugo serve -D 查看网站预览。

如何更新 ♻

• 从您网站的根目录运行：git submodule update --remote --merge。

如何自定义 🎨

• 通过修改 assets/scss/custom-variables.scss 中的 Bootstrap 变量，使用您喜欢的调色板。

• 更改 /config/_default 和 /config/_default/languages 中的配置文件，将您自己的元素添加到页面中。您也可以在那里更改页面名称。

• 编辑 content/<语言>/pages/_index.html 中的主页内容，支持 Markdown。

• 编辑 content/<语言>/pages/<页面>/index.html 中的页面名称、别名和元描述。

• 从 content/<语言>/pages/<页面>/<图像> 文件夹（页面和帖子使用页面包）更改网站的图像。

• 在 assets/img 文件夹中添加您自己的网站图标 (favicon)、背景和默认的元图像 (meta-image，用于 SEO 的图像)。这些文件可以是任何扩展名，但必须与示例网站 assets 目录中当前的文件名相同。

如何管理文章 ✏️

启用/禁用博客

等等，你告诉我这个主题对新手友好，我不想处理所有博客的东西！

我需要一个简单的着陆页，我根本不在乎所有的博客功能！

如果你不需要文章，你可以从配置文件中完全禁用主题的博客部分，只将 Magnolia 用作简单的着陆页。

• 要禁用整个站点的仅标签渲染和索引 -> 在 config.toml 文件中取消注释 #disableKinds = ['taxonomy', 'term']。
• 要禁用整个站点的文章和标签渲染和索引 -> 在 config.toml 文件中取消注释 #disableKinds = ['taxonomy', 'term'] 和 #ignoreFiles= ['posts/*']。

内容组织

/content 文件夹包含不同类型的内容，内容的组织结构模仿了网站结构。

content
├── en
│   ├── _index.md
│   ├── pages
│   ├── posts
│   ├── profile.webp
│   └── tags
└── it
    ├── _index.md
    ├── pages
    ├── posts
    ├── profile.webp
    └── tags

对于每种语言，您都会看到首页 _index.md 和用于首页演示部分的图像 (profile.webp)。其他目录将包含您期望的内容。

pages = 普通网站页面（办公室、服务等）。posts = 网站文章。tags = 自定义标签。

文章

• 使用以下命令创建新文章：hugo new --kind post-bundle content/<lang>/posts/<post-name>。这将是其非常简单的结构

content/en/posts
├── a-poem-about-flowers
│   ├── images
│   │   └── featured.jpg
│   └── index.md

• 编辑 index.md 中的元数据，并在下面添加您的文章内容。

• 通过替换 /images 中的 featured.webp 占位符来添加文章特色图像。特色图像必须命名为 “featured”，但可以是任何扩展名。如果您愿意，可以删除占位符，以获得纯文本的文章。

标签

1. 一种选择是通过将标签添加到文章的前言中来自动创建标签。

2. 第二种选择是使用以下命令创建新标签：hugo new --kind tag content/<lang>/tags/<tag-name>。以这种方式创建标签可以进行更精细的操作，您可以在此处翻译标签，方法是在每种不同的语言的前言中提供相同的 translationKey。因此，您可以为每种语言对文章进行相同的排序，并提供标签页面的翻译。

content/en/tags
├── flowers
│   └── _index.md

有关内容组织的更多信息，请参考内容组织 | Hugo。

添加新语言 🚩

1. 前往 config/_default/languages。
2. 复制其中一个语言文件，更改语言标签、文件名（en、it、fr 等）：这应符合 RFC 5646。使用 RFC 5646 语言标签列表进行更快地设置。
3. 根据语言翻译 .toml 文件中的变量值。
4. 在 /content 目录中，复制其中一个语言文件夹，并按照步骤 2 中新语言的名称更改名称。
5. 对于 /content/pages 中的每个 .html 文件，您可以自由更改 title 和 slug。translationKey 应保持不变，或在每种语言的页面文件中进行更改。我强烈建议您也在此处翻译 SEO。
6. 对于 content/posts/<my-post> 中的每个 .md 文件，翻译您需要的内容和前言值（例如，摘要）。

自定义 404 页面

要添加自定义 404 页面并使其在 GitHub Pages 上工作，您必须在构建网站时手动添加它，方法是执行 hugo。这是因为 GitHub Pages 在项目的根目录中查找 404 模板，因此您只能为所有语言拥有一个 404 页面。要创建指向英文 404 版本的符号链接，该链接将在托管后用作默认 404，请在运行 hugo 后运行 ln -s public/en/404/index.html public/404.html。

感谢我的时间和精力 💫

设计这个主题并使其可供您使用，花费了大量的时间和精力。

MIT 许可证意味着您可以完全自由地使用此主题做任何事情，甚至可以通过它赚钱！唯一的要求是包含署名！

如果您愿意，可以通过多种方式支持我

单次捐款：

bc1q26f4gscc5ksujdx6wzxfnlqeqt02p3sjcqwvln

定期捐款：

贡献 🛠

首先，欢迎在此处提交 PR！

关于此仓库如何工作的说明

此仓库包含两个主要分支：main 和 exampleSite。

exampleSite 目录将不会显示在 main 分支中。因此，如果您克隆 main 分支，您将只能修改主题及其内容；如果您克隆 exampleSite 分支，您将只能修改 exampleSite 内容。作为替代方案，您还可以使用 recurse-submodules 选项克隆 exampleSite，这也将添加主题 main 作为子模块，使其可用于更改。

内容：

可能应该添加到此主题中的内容

为文章添加 RSS 订阅模板

对于设置使用 RSS 订阅作为来源的自动化工具（如 Zapier 或 IFTTT）来说，这将非常棒。

添加适当的 Bootstrap 主题

只有部分 Bootstrap 变量被重新赋值，很多变量仍然使用默认值。正确地赋值所有最重要的变量，可以更轻松地构建、修改和样式化主题，减少手动编写 SCSS/CSS 的需求。

我包含了 scss/custom-variable.scss 文件来覆盖默认变量。这个文件也需要随着主题中样式的变量进行更新，以便让主题用户能够轻松自定义网站外观。

请参考

• 自定义 · Bootstrap v5.0。
• Bootstrap 主题示例 + 通过 UI 轻松设置样式

确保可访问性

该网站仍然缺乏对可访问性的关注，这个问题需要解决。

另请参阅

• Paige
• Lightbi
• Up Business Theme
• 个人博客和文档的 Bootstrap 主题
• Frühling