探索 Hugo - LoveIt 主题的全部内容和背后的核心概念.
由于 Hugo 提供的便利性, Hugo 本身是这个主题唯一的依赖.
直接安装满足你操作系统 (Windows , Linux , macOS ) 的最新版本 Hugo (> 0.62.0) .
为什么不支持早期版本的 Hugo?
由于 Markdown 渲染钩子函数 在 Hugo 圣诞节版本 中被引入, 本主题只支持高于 0.62.0 的 Hugo 版本.
推荐使用 Hugo extended 版本
由于这个主题的一些特性需要将 SCSS 转换为 CSS, 推荐使用 Hugo extended 版本来获得更好的使用体验.
以下步骤可帮助你初始化新网站. 如果你根本不了解 Hugo, 我们强烈建议你按照此 快速入门文档 进一步了解它.
Hugo 提供了一个 new 命令来创建一个新的网站:
| `1 2` | `hugo new site my_website cd my_website` |
|---|---| ### [](https://18w.me/go/?url=https://hugoloveit.com/zh-cn/theme-documentation-basics/#22-%E5%AE%89%E8%A3%85%E4%B8%BB%E9%A2%98)2.2 安装主题LoveIt 主题的仓库是: https://github.com/dillonzq/LoveIt .
你可以下载主题的 最新版本 .zip 文件 并且解压放到 themes 目录.
另外, 也可以直接把这个主题克隆到 themes 目录:
| `1` | `git clone https://github.com/dillonzq/LoveIt.git themes/LoveIt` |
|---|---| 或者, 初始化你的项目目录为 git 仓库, 并且把主题仓库作为你的网站目录的子模块:| `1 2` | `git init git submodule add https://github.com/dillonzq/LoveIt.git themes/LoveIt` |
|---|---| ### [](https://18w.me/go/?url=https://hugoloveit.com/zh-cn/theme-documentation-basics/#basic-configuration)2.3 基础配置以下是 LoveIt 主题的基本配置:
| `` | ` 注意在构建网站时, 你可以使用 --theme 选项设置主题. 但是, 我建议你修改配置文件 (config.toml ) 将本主题设置为默认主题.
以下是创建第一篇文章的方法:
| `1` | `hugo new posts/first_post.md` |
|---|---| 通过添加一些示例内容并替换文件开头的标题, 你可以随意编辑文章.注意
默认情况下, 所有文章和页面均作为草稿创建. 如果想要渲染这些页面, 请从元数据中删除属性 draft: true, 设置属性 draft: false 或者为 hugo 命令添加 -D/--buildDrafts 参数.
使用以下命令启动网站:
| `1` | `hugo serve` |
|---|---| 去查看 `http://localhost:1313`.[](https://hugoloveit.com/zh-cn/theme-documentation-basics/basic-configuration-preview.zh-cn.png)基本配置下的预览 技巧当你运行 hugo serve 时, 当文件内容更改时, 页面会随着更改自动刷新.
注意
由于本主题使用了 Hugo 中的 .Scratch 来实现一些特性, 非常建议你为 hugo server 命令添加 --disableFastRender 参数来实时预览你正在编辑的文章页面.
| `1` | `hugo serve --disableFastRender` |
|---|---| ### [](https://18w.me/go/?url=https://hugoloveit.com/zh-cn/theme-documentation-basics/#26-%E6%9E%84%E5%BB%BA%E7%BD%91%E7%AB%99)2.6 构建网站当你准备好部署你的网站时, 运行以下命令:
| `1` | `hugo` |
|---|---| 会生成一个 `public` 目录, 其中包含你网站的所有静态内容和资源. 现在可以将其部署在任何 Web 服务器上.技巧
网站内容可以通过 Netlify 自动发布和托管 (了解有关通过 Netlify 进行 HUGO 自动化部署 的更多信息). 或者, 您可以使用 AWS Amplify , Github pages , Render 以及更多…
除了 Hugo 全局配置 和 菜单配置 之外, LoveIt 主题还允许您在网站配置中定义以下参数 (这是一个示例 config.toml, 其内容为默认值).
请打开下面的代码块查看完整的示例配置 :
[](https://18w.me/go/?url=https://github.com/dillonzq/LoveIt/releases/tag/v0.1.1) [](https://18w.me/go/?url=https://github.com/dillonzq/LoveIt/releases/tag/v0.2.0) [](https://18w.me/go/?url=https://github.com/dillonzq/LoveIt/releases/tag/v0.2.0) [](https://18w.me/go/?url=https://github.com/dillonzq/LoveIt/releases/tag/v0.2.5) [](https://18w.me/go/?url=https://github.com/dillonzq/LoveIt/releases/tag/v0.2.0) [](https://18w.me/go/?url=https://github.com/dillonzq/LoveIt/releases/tag/v0.2.0) [](https://18w.me/go/?url=https://github.com/dillonzq/LoveIt/releases/tag/v0.2.0) [](https://18w.me/go/?url=https://github.com/dillonzq/LoveIt/releases/tag/v0.2.0) [](https://18w.me/go/?url=https://github.com/dillonzq/LoveIt/releases/tag/v0.2.0) [](https://18w.me/go/?url=https://github.com/dillonzq/LoveIt/releases/tag/v0.2.0) [](https://18w.me/go/?url=https://github.com/dillonzq/LoveIt/releases/tag/v0.2.0) [](https://18w.me/go/?url=https://github.com/dillonzq/LoveIt/releases/tag/v0.2.0) [](https://18w.me/go/?url=https://github.com/dillonzq/LoveIt/releases/tag/v0.2.1) [](https://18w.me/go/?url=https://github.com/dillonzq/LoveIt/releases/tag/v0.2.3) [](https://18w.me/go/?url=https://github.com/dillonzq/LoveIt/releases/tag/v0.2.1) [](https://18w.me/go/?url=https://github.com/dillonzq/LoveIt/releases/tag/v0.2.4) [](https://18w.me/go/?url=https://github.com/dillonzq/LoveIt/releases/tag/v0.2.0) [](https://18w.me/go/?url=https://github.com/dillonzq/LoveIt/releases/tag/v0.2.7) [](https://18w.me/go/?url=https://github.com/dillonzq/LoveIt/releases/tag/v0.2.0) [](https://18w.me/go/?url=https://github.com/dillonzq/LoveIt/releases/tag/v0.2.0) [](https://18w.me/go/?url=https://github.com/dillonzq/LoveIt/releases/tag/v0.2.0) [](https://18w.me/go/?url=https://github.com/dillonzq/LoveIt/releases/tag/v0.2.0) [](https://18w.me/go/?url=https://github.com/dillonzq/LoveIt/releases/tag/v0.2.0) [](https://18w.me/go/?url=https://github.com/dillonzq/LoveIt/releases/tag/v0.2.0) [](https://18w.me/go/?url=https://github.com/dillonzq/LoveIt/releases/tag/v0.2.0) [](https://18w.me/go/?url=https://github.com/dillonzq/LoveIt/releases/tag/v0.2.0) [](https://18w.me/go/?url=https://github.com/dillonzq/LoveIt/releases/tag/v0.2.0) [](https://18w.me/go/?url=https://github.com/dillonzq/LoveIt/releases/tag/v0.2.0) [](https://18w.me/go/?url=https://github.com/dillonzq/LoveIt/releases/tag/v0.2.4) [](https://18w.me/go/?url=https://github.com/dillonzq/LoveIt/releases/tag/v0.2.0) [](https://18w.me/go/?url=https://github.com/dillonzq/LoveIt/releases/tag/v0.2.9) [](https://18w.me/go/?url=https://github.com/dillonzq/LoveIt/releases/tag/v0.2.0) [](https://18w.me/go/?url=https://github.com/dillonzq/LoveIt/releases/tag/v0.2.0) [](https://18w.me/go/?url=https://github.com/dillonzq/LoveIt/releases/tag/v0.2.11) [](https://18w.me/go/?url=https://github.com/dillonzq/LoveIt/releases/tag/v0.2.11) [](https://18w.me/go/?url=https://github.com/dillonzq/LoveIt/releases/tag/v0.2.0) [](https://18w.me/go/?url=https://github.com/dillonzq/LoveIt/releases/tag/v0.2.0) [](https://18w.me/go/?url=https://github.com/dillonzq/LoveIt/releases/tag/v0.2.0) [](https://18w.me/go/?url=https://github.com/dillonzq/LoveIt/releases/tag/v0.1.1) [](https://18w.me/go/?url=https://github.com/dillonzq/LoveIt/releases/tag/v0.1.1) [](https://18w.me/go/?url=https://github.com/dillonzq/LoveIt/releases/tag/v0.2.6) [](https://18w.me/go/?url=https://github.com/dillonzq/LoveIt/releases/tag/v0.2.0) [](https://18w.me/go/?url=https://github.com/dillonzq/LoveIt/releases/tag/v0.2.0) [](https://18w.me/go/?url=https://github.com/dillonzq/LoveIt/releases/tag/v0.2.5) [](https://18w.me/go/?url=https://github.com/dillonzq/LoveIt/releases/tag/v0.2.7) [](https://18w.me/go/?url=https://github.com/dillonzq/LoveIt/releases/tag/v0.2.10) [](https://18w.me/go/?url=https://github.com/dillonzq/LoveIt/releases/tag/v0.2.5) [](https://18w.me/go/?url=https://github.com/dillonzq/LoveIt/releases/tag/v0.2.10) [](https://18w.me/go/?url=https://github.com/dillonzq/LoveIt/releases/tag/v0.2.0) [](https://18w.me/go/?url=https://github.com/dillonzq/LoveIt/releases/tag/v0.2.7) [](https://18w.me/go/?url=https://github.com/dillonzq/LoveIt/releases/tag/v0.2.7) [](https://18w.me/go/?url=https://github.com/dillonzq/LoveIt/releases/tag/v0.2.8) [](https://18w.me/go/?url=https://github.com/dillonzq/LoveIt/releases/tag/v0.2.0) [](https://18w.me/go/?url=https://github.com/dillonzq/LoveIt/releases/tag/v0.2.0) | `` | ` 注意请注意, 本文档其他部分将详细解释其中一些参数.
Hugo 的运行环境
hugo serve 的默认运行环境是 development, 而 hugo 的默认运行环境是 production.
由于本地 development 环境的限制, 评论系统 , CDN 和 fingerprint 不会在 development 环境下启用.
你可以使用 hugo serve -e production 命令来开启这些特性.
关于 CDN 配置的技巧
[](https://18w.me/go/?url=https://github.com/dillonzq/LoveIt/releases/tag/v0.2.7) | `1 2 3 4` | `[params.cdn] # CDN 数据文件名称, 默认不启用 # ["jsdelivr.yml"] data = ""` |
|---|---| 默认的 CDN 数据文件位于 `themes/LoveIt/assets/data/cdn/` 目录. 可以在你的项目下相同路径存放你自己的数据文件: `assets/data/cdn/`.关于社交链接配置的技巧
[](https://18w.me/go/?url=https://github.com/dillonzq/LoveIt/releases/tag/v0.2.0) 你可以直接配置你的社交 ID 来生成一个默认社交链接和图标:| `1 2` | `[params.social] Mastodon = "@xxxx"` |
|---|---| 生成的社交链接是 `https://mastodon.technology/@xxxx`.或者你可以通过一个字典来设置更多的选项:
[params.social.Mastodon]
# 排列图标时的权重 (权重越大, 图标的位置越靠后) weight = 0 # 你的社交 ID id = “@xxxx” # 你的社交链接的前缀 prefix = “https://mastodon.social/" # 当鼠标停留在图标上时的提示内容 title = “Mastodon” " title=“复制到剪贴板” style=“display: inline; padding: 0.4rem;">
| `1 2 3 4 5 6 7 8 9 10` | `[params.social] [params.social.Mastodon] # 排列图标时的权重 (权重越大, 图标的位置越靠后) weight = 0 # 你的社交 ID id = "@xxxx" # 你的社交链接的前缀 prefix = "https://mastodon.social/" # 当鼠标停留在图标上时的提示内容 title = "Mastodon"` |
|---|---| 所有支持的社交链接的默认数据位于 `themes/LoveIt/assets/data/social.yaml`. 你可以参考它来配置你的社交链接.[](https://hugoloveit.com/zh-cn/theme-documentation-basics/complete-configuration-preview.zh-cn.png)完整配置下的预览 ### [](https://18w.me/go/?url=https://hugoloveit.com/zh-cn/theme-documentation-basics/#32-%E7%BD%91%E7%AB%99%E5%9B%BE%E6%A0%87-%E6%B5%8F%E8%A7%88%E5%99%A8%E9%85%8D%E7%BD%AE-%E7%BD%91%E7%AB%99%E6%B8%85%E5%8D%95)3.2 网站图标, 浏览器配置, 网站清单强烈建议你把:
apple-touch-icon.png (180x180) favicon-32x32.png (32x32) favicon-16x16.png (16x16) mstile-150x150.png (150x150) android-chrome-192x192.png (192x192) android-chrome-512x512.png (512x512) 放在 /static 目录. 利用 https://realfavicongenerator.net/ 可以很容易地生成这些文件.
可以自定义 browserconfig.xml 和 site.webmanifest 文件来设置 theme-color 和 background-color.
[](https://18w.me/go/?url=https://github.com/dillonzq/LoveIt/releases/tag/v0.2.8) 注意Hugo extended 版本对于自定义样式是必需的.
通过定义自定义 .scss 样式文件, LoveIt 主题支持可配置的样式.
包含自定义 .scss 样式文件的目录相对于 你的项目根目录 的路径为 assets/css.
在 assets/css/_override.scss 中, 你可以覆盖 themes/LoveIt/assets/css/_variables.scss 中的变量以自定义样式.
这是一个例子:
| `1 2` | `@import url('https://fonts.googleapis.com/css?family=Fira+Mono:400,700&display=swap&subset=latin-ext'); $code-font-family: Fira Mono, Source Code Pro, Menlo, Consolas, Monaco, monospace;` |
|---|---| 在 `assets/css/_custom.scss` 中, 你可以添加一些 CSS 样式代码以自定义样式.LoveIt 主题完全兼容 Hugo 的多语言模式, 并且支持在网页上切换语言.
[](https://hugoloveit.com/zh-cn/theme-documentation-basics/language-switch.gif)语言切换 ### [](https://18w.me/go/?url=https://hugoloveit.com/zh-cn/theme-documentation-basics/#language-compatibility)4.1 兼容性[](https://18w.me/go/?url=https://github.com/dillonzq/LoveIt/releases/tag/v0.2.10) | 语言 | Hugo 代码 | HTML `lang` 属性 | 主题文档 | Lunr.js 支持 |
|---|---|---|---|---|
| 英语 | `en` | `en` | | |
| 简体中文 | `zh-cn` | `zh-CN` | | |
| 繁體中文 | `zh-tw` | `zh-TW` | | |
| 法语 | `fr` | `fr` | | |
| 波兰语 | `pl` | `pl` | | |
| 巴西葡萄牙语 | `pt-br` | `pt-BR` | | |
| 意大利语 | `it` | `it` | | |
| 西班牙语 | `es` | `es` | | |
| 德语 | `de` | `de` | | |
| 塞尔维亚语 | `pl` | `pl` | | |
| 俄语 | `ru` | `ru` | | |
| 罗马尼亚语 | `ro` | `ro` | | |
| 越南语 | `vi` | `vi` | | |
| 阿拉伯语 | `ar` | `ar` | | |
| 加泰罗尼亚语 | `ca` | `ca` | | |
| 泰语 | `th` | `th` | | |
| 泰卢固语 | `te` | `te` | | |
| 印尼语 | `id` | `id` | | |
| 土耳其语 | `tr` | `tr` | | |
| 韩语 | `ko` | `ko` | | |
| 印地语 | `hi` | `hi` | | | ### [](https://18w.me/go/?url=https://hugoloveit.com/zh-cn/theme-documentation-basics/#42-%E5%9F%BA%E6%9C%AC%E9%85%8D%E7%BD%AE)4.2 基本配置学习了 Hugo如何处理多语言网站 之后, 请在 站点配置 中定义你的网站语言.
例如, 一个支持英语, 中文和法语的网站配置:
| `` | ` 然后, 对于每个新页面, 将语言代码附加到文件名中.单个文件 my-page.md 需要分为三个文件:
英语: my-page.en.md 中文: my-page.zh-cn.md 法语: my-page.fr.md 注意
请注意, 菜单中仅显示翻译的页面. 它不会替换为默认语言内容.
技巧
也可以使用 文章前置参数 来翻译网址.
翻译字符串用于在主题中使用的常见默认值. 目前提供一些语言 的翻译, 但你可能自定义其他语言或覆盖默认值.
要覆盖默认值, 请在你项目的 i18n 目录 i18n/<languageCode>.toml 中创建一个新文件，并从 themes/LoveIt/i18n/en.toml 中获得提示.
另外, 由于你的翻译可能会帮助到其他人, 请花点时间通过 创建一个 PR 来贡献主题翻译, 谢谢!
[](https://18w.me/go/?url=https://github.com/dillonzq/LoveIt/releases/tag/v0.2.0) 基于 [Lunr.js](https://18w.me/go/?url=https://lunrjs.com/) 或 [algolia](https://18w.me/go/?url=https://www.algolia.com/), **LoveIt** 主题支持搜索功能.为了生成搜索功能所需要的 index.json, 请在你的 网站配置 中添加 JSON 输出文件类型到 outputs 部分的 home 字段中.
| `1 2` | `[outputs] home = ["HTML", "RSS", "JSON"]` |
|---|---| ### [](https://18w.me/go/?url=https://hugoloveit.com/zh-cn/theme-documentation-basics/#52-%E6%90%9C%E7%B4%A2%E9%85%8D%E7%BD%AE)5.2 搜索配置基于 Hugo 生成的 index.json 文件, 你可以激活搜索功能.
这是你的 网站配置 中的搜索部分:
[params.search.algolia]
index = "” appID = "” searchKey = "" " title=“复制到剪贴板” style=“display: inline; padding: 0.4rem;">
| `1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20` | `[params.search] enable = true # 搜索引擎的类型 ["lunr", "algolia"] type = "lunr" # 文章内容最长索引长度 contentLength = 4000 # 搜索框的占位提示语 placeholder = "" # maxResultLength = 10 # snippetLength = 50 # highlightTag = "em" # absoluteURL = false [params.search.algolia] index = "" appID = "" searchKey = ""` |
|---|---| 怎样选择搜索引擎?以下是两种搜索引擎的对比:
lunr: 简单, 无需同步 index.json, 没有 contentLength 的限制, 但占用带宽大且性能低 (特别是中文需要一个较大的分词依赖库)algolia: 高性能并且占用带宽低, 但需要同步 index.json 且有 contentLength 的限制h2 和 h3 HTML 标签切分来提高查询效果并且基本实现全文搜索. contentLength 用来限制 h2 和 h3 HTML 标签开头的内容部分的最大长度.
关于 algolia 的使用技巧
你需要上传 index.json 到 algolia 来激活搜索功能. 你可以使用浏览器来上传 index.json 文件但是一个自动化的脚本可能效果更好. 官方提供的 Algolia CLI 是一个不错的选择. 为了兼容 Hugo 的多语言模式, 你需要上传不同语言的 index.json 文件到对应的 algolia index, 例如 zh-cn/index.json 或 fr/index.json…
