演示网站|变更日志
Yue 是一个最小的、多语言的、可定制的 Hugo 主题,适合博客。
屏幕截图可能已过时,因此最好访问演示网站。
桌面上的灯光模式
桌面上的深色模式
手机上的灯光模式
手机上的深色模式
最小的外观
易于安装(安装了 Git 和 Hugo,几秒钟内创建一个网站)
详细文档
自动深色模式
多种语言
单页翻译列表
语言选择器(转到相应页面或主页)
多名作者
目录(可折叠,仅在可用时生成)
首页、单页、章节页和术语页的修改日期
自定义日期格式
主页和分区页上的分页
全文RSS
标签和类别
版权声明(可设置作者和年份跨度)
RSS 链接
标题锚链接
移动优先且响应迅速
社会保障体系
搜索引擎优化
微观数据
元描述
打开图
各部分的页数( /posts/
、 /tags/
等)
定制化
网站图标
样式 (SCSS)
内容(HTML)
要了解所有功能,请检查hugo.yaml(默认配置)和exampleSite/hugo.yaml(演示站点的配置)。
安装 Git 和最新的 Hugo 扩展。
# 创建网站git init my-websitecd my-website# 安装themegit子模块 add --depth=1 https://github.com/CyrusYip/hugo-theme-yue theme/hugo-theme-yue git commit --message "add theme"# 创建演示内容cp --recursive主题/hugo-theme-yue/exampleSite/* .# 预览hugo服务器
现在我们有了一个可以运行的演示网站。 content
目录包含内容, hugo.yaml
是配置文件。随意和他们一起玩。
cd 我的网站 git 子模块更新 --remote
建议在更新主题之前阅读 CHANGELOG.md。
您可以在提要聚合器(例如 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 [email protected]:your-user-name/my-website.git
设置网站后,您可能希望将其托管在 Internet 上。有很多方法可以做到这一点,请参阅托管和部署|雨果.如果您不知道选择什么,可以从 Netlify 开始,请参阅 Netlify 上的 Host |雨果.
确保在hugo.yaml
中将baseURL更改为您的域名(例如https://my-cool-domain.org/
)。
-baseURL:https://yue.cyrusyip.org/+baseURL:https://my-cool-domain.org/
推荐的构建命令:
雨果--gc--minify
--gc
删除未使用的缓存文件, --minify
减小网站的大小(主要是 HTML)。
创建一个新帖子。
hugo new content content/en/posts/my-first-post.md
要了解有关用法的更多信息,请参阅:
基本用法 |雨果
目录结构|雨果
设置列在 exampleSite/hugo.yaml (演示站点的配置)和hugo.yaml (默认配置,由前者导入)中。
在网站项目的根目录中, hugo.yaml
是配置文件,它是 exampleSite/hugo.yaml 的副本。
要了解配置,请参阅配置 Hugo |雨果.
支持的语言:
en
: 英语
fr
: 法语
zh-CN
:简体中文
要创建多语言网站,请参阅多语言模式 | Hugo 和 exampleSite/hugo.yaml。
翻译文件位于 i18n 目录和 data/i18n.yaml 中。欢迎对其他语言做出贡献。
贡献一种新语言:
在 i18n 目录中创建一个语言文件(例如,法语的fr.yaml
)。
将 i18n/en.yaml 的内容复制到新文件中。
删除所有注释( # ...
)并翻译内容。
也翻译 data/i18n.yaml 中的内容。
如果您想继续为翻译做出贡献,可以通过订阅 i18n/en.yaml 的 feed 来获取最新更改(https://github.com/CyrusYip/hugo-theme-yue/commits/main/i18n/en.yaml .atom)使用 RSS 阅读器。
如果您的网站不是英文的,您可能需要自定义/tags
和/categories
的标题。
例如,自定义zh-CN
网站的/tags
标题,创建content/zh-CN/tags/_index.md
,并在文件中添加以下内容。
--- title: Chinese Tags ---
Yue 允许您自定义图标、样式 (SCSS) 和内容 (HTML)。
Favicon 是浏览器选项卡中标题旁边的图标。要使用您的 favicon,请将favicon.ico
放在static
目录下。您可以在在线 favicon.ico 生成器上创建favicon.ico
。
Yue使用SCSS(libsass)来添加样式。所有文件都位于 assets/scss 中。要自定义样式,请创建assets/scss/_style-start.scss
和assets/scss/_style-end.scss
。
首先应用_style-start.scss
,您可以覆盖此文件中的变量。
$基本字体大小:15px;
_style-end.scss
最后应用,您可以在此文件中添加样式。
Vanilla CSS 在 SCSS 中也有效。
参考:
CSS:层叠样式表 | MDN
Sass:Sass 基础知识
目录结构|雨果
您可以创建这些文件来插入 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-end.html
添加到元素的末尾。
使用案例:
加载脚本
加载样式
以下是添加 Google Analytics 和本地脚本的示例:
{{ with resources.Get "js/my-script .js" | js.Build }} {{ end }}
single-end.html
添加到帖子中元素的末尾。
使用案例:
评论服务,例如 Disqus 和 giscus
以下是添加 Giscus 的示例:
{{ $语言 := "" }} {{-/* 小写 LanguagePrefix 的解决方法, 请参阅 https://github.com/gohugoio/hugo/issues/9404 */-}} {{ if eq site.LanguagePrefix "/zh-cn" }} {{ $语言 = "zh-CN" }} {{ 别的 }} {{ $语言 = "en" }} {{ end }}
评论服务列表: 评论 |雨果.
body-end.html
添加到元素的末尾。
使用案例:
动态加载脚本
要报告错误,请提交问题。要提出问题,请开始讨论。
Hugo有很多功能,阅读Hugo文档来学习。
请参阅 CHANGELOG.md。
该项目使用hugo-bin - npm 来管理Hugo 版本。先决条件:Node.js 和 npm。
克隆这个存储库。
npm 安装 npm run clean:服务器:共享
package.json 中列出了其他有用的命令。要使用推荐的 Hugo 版本,请运行npx hugo
。
如果您没有安装 Node.js 和 npm,只需安装 package.json 中列出的版本即可。
"hugo-bin": { "buildTags": "扩展", "version": "x.yyy.z"},
CHANGELOG.md 应在每次提交中更新。
如果您使用的是 Yue 并且您网站的源代码托管在 GitHub 上,您可以将hugo-theme-yue
主题添加到您的存储库中。
链接到hugo-theme-yue
主题。
我从很多项目中学到了很多东西。谢谢你们,开发者。
Hugo-xmin(最小模板)
雨果主题简(RSS 模板)
Hugo-theme-zen(语言选择器)
雨果主题 gruvbox(颜色)
gruvbox(彩色)
Hugo-theme-stack(源代码、文档和配置)
hugo-PaperMod(源代码、文档和配置)
该项目已获得麻省理工学院的许可。