Hugo 主题

上一页/下一页: 所有主题

Yue

一个最小化、多语言和可定制的主题，适合博客

下载
Yue

Yue

演示网站 | 更新日志

Yue 是一个最小化、多语言和可定制的 Hugo 主题，适合博客。

截图

截图可能已过时，最好访问演示网站。

桌面上的浅色模式

light-desktop

桌面上的深色模式

dark-desktop

移动设备上的浅色模式

light-mobile

移动设备上的深色模式

dark-mobile

功能

  • 极简外观
  • 易于安装（安装 Git 和 Hugo 后，几秒钟即可创建一个网站）
  • 详细的文档
  • 自动深色模式
  • 多语言
    • 单页中的翻译列表
    • 语言选择器（转到相应的页面或主页）
  • 多作者
  • 目录（可折叠，仅在可用时生成）
  • 主页、单页、部分页和术语页上的修改日期
  • 自定义日期格式
  • 主页和部分页上的分页
  • 全文 RSS
  • 标签和类别
  • 版权声明（可以设置作者和年份范围）
  • RSS 链接
  • 标题锚点链接
  • 移动优先和响应式
  • SCSS
  • 搜索引擎优化
    • 微数据
    • 元描述
  • Open Graph
  • 部分页面计数（/posts/、/tags/ 等）
  • 自定义
    • 网站图标
    • 样式 (SCSS)
    • 内容 (HTML)

要了解所有功能，请查看 hugo.yaml（默认配置）和 exampleSite/hugo.yaml（演示站点的配置）。

开始

安装

安装 Git 和最新的 Hugo 扩展版。

# Create website
git init my-website
cd my-website
# Install theme
git submodule add --depth=1 https://github.com/CyrusYip/hugo-theme-yue themes/hugo-theme-yue
git commit --message "add theme"
# Create demo content
cp --recursive themes/hugo-theme-yue/exampleSite/* .
# Preview
hugo server

现在我们有了一个可用的演示网站。content 目录包含内容，hugo.yaml 是配置文件。请随意使用它们。

更新主题 

cd my-website
git submodule update --remote

建议在更新主题之前阅读 CHANGELOG.md。

您可以在 feed 聚合器（例如 Inoreader）中订阅更新和更新日志。

  • 更新：https://github.com/CyrusYip/hugo-theme-yue/commits/main.atom
  • 更新日志：https://github.com/CyrusYip/hugo-theme-yue/commits/main/CHANGELOG.md.atom

克隆网站

克隆网站项目时，您需要使用其他选项。

git clone --recurse-submodules --shallow-submodules git@github.com:your-user-name/my-website.git

部署

设置网站后，您可能想要将其托管在互联网上。有很多方法可以做到这一点，请参阅托管和部署 | Hugo。如果您不知道选择什么，可以从 Netlify 开始，请参阅在 Netlify 上托管 | Hugo。

请确保在 hugo.yaml 中将 baseURL 更改为您的域名（例如 https://my-cool-domain.org/）。

-baseURL: https://yue.cyrusyip.org/
+baseURL: https://my-cool-domain.org/

推荐的构建命令

hugo --gc --minify

--gc 删除未使用的缓存文件，--minify 减小网站的大小（主要是 HTML）。

用法

创建一个新的帖子。

hugo new content content/en/posts/my-first-post.md

要了解有关用法的更多信息，请参阅

  • 基本用法 | Hugo
  • 目录结构 | Hugo

配置

设置在 exampleSite/hugo.yaml（演示站点的配置）和 hugo.yaml（默认配置，由前者导入）中列出。

在您的网站项目根目录中，hugo.yaml 是配置文件，它是 exampleSite/hugo.yaml 的副本。

要了解配置，请参阅配置 Hugo | Hugo。

多语言模式

支持的语言

  • en：英语
  • fr：法语
  • zh-CN：简体中文

要创建多语言网站，请参阅多语言模式 | Hugo 和 exampleSite/hugo.yaml。

翻译文件位于 i18n 目录和 data/i18n.yaml 中。欢迎提供其他语言的贡献。

贡献一种新语言

  1. 在 i18n 目录中创建一个语言文件（例如，法语的 fr.yaml）。
  2. 将 i18n/en.yaml 的内容复制到新文件中。
  3. 删除所有注释（# ...）并翻译内容。
  4. 同时翻译 data/i18n.yaml 中的内容。

如果您想继续贡献翻译，可以使用 RSS 阅读器订阅 i18n/en.yaml (https://github.com/CyrusYip/hugo-theme-yue/commits/main/i18n/en.yaml.atom) 的 feed 来获取最新更改。

标签和类别的标题

如果您的网站不是英文的，您可能想要自定义 /tags 和 /categories 的标题。

例如，要自定义 zh-CN 网站的 /tags 标题，请创建 content/zh-CN/tags/_index.md 并将以下内容添加到文件中。

---
title: Chinese Tags
---

自定义

Yue 允许您自定义网站图标、样式 (SCSS) 和内容 (HTML)。

网站图标

网站图标是浏览器标签页中标题旁边的图标。要使用您的网站图标，请将 favicon.ico 放在 static 目录下。您可以在在线 favicon.ico 生成器上创建 favicon.ico。

样式 (SCSS)

Yue 使用 SCSS (libsass) 来添加样式。所有文件都在 assets/scss 中。要自定义样式，请创建 assets/scss/_style-start.scss 和 assets/scss/_style-end.scss。

_style-start.scss 会首先应用，您可以在此文件中覆盖变量。

$base-font-size: 15px;

_style-end.scss 会最后应用，您可以在此文件中添加样式。

原生 CSS 在 SCSS 中也是有效的。

参考

  • CSS：层叠样式表 | MDN
  • Sass: Sass 基础
  • 目录结构 | Hugo

内容 (HTML)

您可以创建以下文件以插入 HTML 代码。

  • layouts/partials/head/head-start.html
  • layouts/partials/head/head-end.html
  • layouts/partials/single/single-end.html
  • layouts/partials/body/body-end.html

head-start.html

head-start.html 会被添加到 <head> 元素的开头附近。

使用案例

  • 预加载脚本
  • 加载脚本
  • 加载样式

这是一个预加载脚本的示例

<link rel="preload" as="script" href="https://unpkg.com/@swup/head-plugin@2">
<link rel="preload" as="script" href="https://unpkg.com/@swup/preload-plugin@3">
<link rel="preload" as="script" href="https://unpkg.com/swup@4">

head-end.html

head-end.html 会被添加到 <head> 元素的末尾。

使用案例

  • 加载脚本
  • 加载样式

这是一个添加 Google Analytics 和本地脚本的示例

<!-- Google Analytics -->
<script async src="https://127.0.0.1/gtag/js?id=G-F46B15BRUF"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-F46B15BRUF');
</script>

<!-- Local script, path: assets/js/my-script.js -->
{{ with resources.Get "js/my-script.js" | js.Build }}
  <script defer src="{{ .RelPermalink }}"></script>
{{ end }}

single-end.html

single-end.html 会被添加到文章中 <main> 元素的末尾。

使用案例

  • 评论服务，例如，Disqus 和 giscus

这是一个添加 Giscus 的示例

{{ $language := "" }}
{{- /*
Workaround for lowercase LanguagePrefix,
see https://github.com/gohugoio/hugo/issues/9404
*/ -}}
{{ if eq site.LanguagePrefix "/zh-cn" }}
  {{ $language = "zh-CN" }}
{{ else }}
  {{ $language = "en" }}
{{ end }}
<script src="https://giscus.app/client.js"
        data-repo="CyrusYip/yue-test"
        data-repo-id="P_9hJMbXtqr"
        data-category="General"
        data-category-id="SIB_ldsflk712ldRsjf7"
        data-mapping="pathname"
        data-strict="0"
        data-reactions-enabled="1"
        data-emit-metadata="0"
        data-input-position="bottom"
        data-theme="preferred_color_scheme"
        data-lang="{{ $language }}"
        crossorigin="anonymous"
        async>
</script>

评论服务列表：评论 | Hugo。

body-end.html

body-end.html 会被添加到 <body> 元素的末尾。

使用案例

  • 动态加载脚本

支持

要报告错误，请提交 issue。要提出问题，请发起讨论。

延伸阅读

Hugo 有许多功能，请阅读 Hugo 文档 来了解。

更新日志

请参阅 CHANGELOG.md。

开发

此项目使用 hugo-bin - npm 来管理 Hugo 版本。先决条件：Node.js 和 npm。

克隆此存储库。

npm install
npm run clean:server:shared

package.json 中列出了其他有用的命令。要使用推荐的 Hugo 版本，请运行 npx hugo。

如果您没有安装 Node.js 和 npm，只需安装 package.json 中列出的版本。

"hugo-bin": {
  "buildTags": "extended",
  "version": "x.yyy.z"
},

每次提交时都应更新 CHANGELOG.md。

使用 Yue 构建的网站

如果您正在使用 Yue 并且您的网站源代码托管在 GitHub 上，您可以将 hugo-theme-yue 主题添加到您的存储库中。

链接到 hugo-theme-yue 主题。

鸣谢

我从很多项目中学习了很多。谢谢你们，开发者们。

  • hugo-xmin (最小模板)
  • hugo-theme-jane (RSS 模板)
  • hugo-theme-zen (语言选择器)
  • hugo-theme-gruvbox (颜色)
  • gruvbox (颜色)
  • hugo-theme-stack (源代码、文档和配置)
  • hugo-PaperMod (源代码、文档和配置)

许可证

此项目根据 MIT 许可证获得许可。

另请参阅