Hugo 主题
Adritian-Free-Hugo-Theme
为 Hugo 打造的简约、干净的主题,非常适合单页个人网站。可以轻松扩展到自定义内容类型,并具有简单的博客功能。
Adritian Free Hugo 主题
用于个人网站或专业简约着陆页的 Adritian Hugo 主题
在 adritian-demo.vercel.app(简单演示站点,原始安装)或 adrianmoreno.info(我的个人网站,运行此主题)上查看实际效果
这个免费的 Hugo 主题是 Raditian 主题的分支,Raditian 主题是由 Radity 最初创建的一个很棒的 Hugo 主题。它之所以被称为 Adritian,是因为我,也就是作者,名叫 Adrián - 如果你打乱 Raditian 和 Adrián 的字母顺序,你就会得到… Adritian 😅
它侧重于可访问性、高性能和可用性。它可以通过添加自己的样式或内容类型来扩展,具有坚实的基础。
模板基于 Bootstrap(因此它们是响应式的和移动优先的),我所做的主要更改是对模板的网络性能和可访问性进行了升级。
该主题的一些最佳应用场景是简约网站、单页应用程序和个人作品集。它有一个联系表单,您可以自定义为您的邮件地址,而无需设置后端(https://formspree.io)。
🚀 您可以期待什么
- 🏎️ 快速、简约的代码(无 jQuery)
- 🖼️ Bootstrap 框架 v5 可用作 Scss(可通过变量自定义)
- 🚃 Hugo assets 管道支持
- 📚 多语言 (i18n) 支持
- 🛠️ 支持自定义内容类型(经验、博客)
- 💯 在 Lighthouse Google Page Speed Insights 中,性能、最佳实践、可访问性和 SEO 的得分均为 100%
- 🌚 深色主题支持(基于系统/浏览器设置)
此外,该主题已使用 Vercel 部署和测试。您还可以找到开箱即用的功能
支持 Vercel Speed Insights(通过
hugo.toml
中的参数vercelPageInsights
,默认禁用)支持 Vercel Analytics(通过
hugo.toml
中的参数vercelAnalytics
,默认禁用)
实时演示 & 预览
您可以在 www.adrianmoreno.info(我的个人网站)上看到实际效果,以及主题的深色和浅色变体的首页截图
![]() | ![]() |
深色主题会根据浏览器设置自动选择,并且页脚中有一个颜色切换器。
您有两个主题的参考实现
- 一个功能齐全的站点,我的个人网站也在 github 上
- 该主题的一个更简单的演示站点,adritian-demo(及其代码)。
下载
- 克隆存储库:
git clone https://github.com/zetxek/adritian-free-hugo-theme.git
。从 GitHub 下载。
安装
安装 Hugo
要使用 adritian-free-hugo-theme
,您需要按照 https://gohugo.com.cn/getting-started/installing/ 安装 Hugo。
设置
作为前提条件,您需要安装并运行 Hugo。您可以参考官方指南进行操作。
该主题已使用 Hugo 的版本 0.136
进行测试。如果您遇到有关缺少功能的错误,请检查您是否安装了 Hugo 的最新版本。
注意:该主题尚未迁移到 Hugo Modules。要安装它,您需要通过将主题文件复制到您的网站项目(作为子模块[推荐]或通过复制文件)进行设置。您可以按照这些较旧的说明或接下来的说明进行操作
- 创建一个新的 Hugo 站点(这将创建一个新文件夹):
hugo new site <您的网站名称>
- 进入新创建的文件夹:
cd <您的网站名称>/
- 安装 PostCSS:从顶级站点文件夹执行
npm i -D postcss postcss-cli autoprefixer
[检查 Hugo 的官方文档]。 - 克隆 adritian-free-hugo-theme:
git clone https://github.com/zetxek/adritian-free-hugo-theme.git themes/adritian-free-hugo-theme
。 - 将项目根目录中的
hugo.toml
文件替换为 themes/adritian-free-hugo-theme/exampleSite/config.toml:cp themes/adritian-free-hugo-theme/exampleSite/hugo.toml hugo.toml
(从网站根文件夹执行) - 使用
hugo server -D
启动 Hugo - 🎉 主题在 https://127.0.0.1:1313/ 上运行
可选: 如果您想在决定是否是您想要的之前使用示例内容预览主题,则可以使用示例内容运行主题
cd themes/adritian-free-hugo-theme/exampleSite
hugo server --themesDir ../..
serve
命令的输出将类似于
adritian-demo git:(master) ✗ hugo server -D
Watching for changes in /Users/adrianmorenopena/tmp/theme-test/themes/adritian-free-hugo-theme/{archetypes,assets,data,exampleSite,i18n,layouts,static}
Watching for config changes in /Users/adrianmorenopena/tmp/theme-test/themes/adritian-free-hugo-theme/exampleSite/hugo.toml
Start building sites …
hugo v0.136.2+extended darwin/arm64 BuildDate=2024-10-17T14:30:05Z VendorInfo=brew
| EN | ES | FR
-------------------+----+----+-----
Pages | 24 | 10 | 8
Paginator pages | 0 | 0 | 0
Non-page files | 0 | 0 | 0
Static files | 90 | 90 | 90
Processed images | 24 | 0 | 0
Aliases | 1 | 0 | 0
Cleaned | 0 | 0 | 0
Built in 1788 ms
Environment: "development"
Serving pages from disk
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at https://127.0.0.1:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop
多语言支持
https://github.com/user-attachments/assets/030e765a-275f-4141-88e0-b854ebe551da
该主题实现了 Hugo 的国际化 (i18n) 系统,以启用多语言站点。
查看 i18n
中的内容以编辑翻译,并查看配置 hugo.toml
以定义您的活动语言。示例站点启用了 3 种语言(en
代表英语,es
代表西班牙语,fr
代表法语)。
您可以添加其他语言,或禁用提供的语言(通过在您不需要的语言上将 disabled
设置为 true
)。
i18n 支持的引入是在 v1.3.0
版本中完成的,并且由于内容管理方式的改变,它具有重大更改。您可以在 upgrading.md 中阅读有关升级路径的信息。
其他配置
联系表单
(可选,如果你想使用联系表单) 编辑 homepage.yml
文件中的第 212 行,以自定义你的邮件地址。在 formspree 注册以将邮件重定向到你自己的邮箱。
博客
博客有两种布局可用
default
(文章全宽)sidebar
(带有最近文章和分类的侧边栏)
默认布局 | 侧边栏布局 |
---|---|
![]() | ![]() |
全宽文章 | 带有左侧边栏的文章 |
简洁、专注的阅读体验 | 显示最近文章和分类 |
最大化内容区域 | 默认 25% 宽度的侧边栏 |
最适合图像丰富的文章 | 有助于网站导航 |
要使用博客,你可以使用内容类型 “blog”,并在 URL /blog
中渲染它。你可以在 hugo.toml
中添加一个菜单链接到它。
文章将是存储在 content/blog
文件夹中的 markdown 文件。
布局可以在 hugo.toml
文件中的 [params.blog]
部分进行配置。
经验
此功能和内容特别适合个人专业网站,展示工作经验
它可以用来呈现工作经历、项目或客户。每个经验/项目都有一个持续时间、职位、公司名称、地点和描述/摘要以及更长的文本。
经验是通过特定的内容类型管理的(有关示例,请参见 content/experience
)。你可以使用 hugo new experience/experience-name.md
(将 experience-name
替换为工作经验的名称)。这将在 content/experience
文件夹中创建内容,遵循 experience
原型。
以下字段来自文件的前言(Front Matter):title
、jobTitle
、company
、location
、duration
。你可以在此处找到示例经验文件内容
---
date: 2007-12-01T00:00:00+01:00
draft: false
title: "Job #1"
jobTitle: "Junior Intern"
company: "Internet Affairs Inc. "
location: "Stavanger, Norway"
duration: "2022-2024"
---
### Fixing the world, one byte at a time
The beginning of a great career.
经验在多个位置显示
- 主页,显示有限数量的经验(由
hugo.toml
文件中的配置参数homepageExperienceCount
控制)。显示摘要。 - 经验页面,在
/experience
中,显示所有经验的列表(无限制)。每个项目都显示摘要。 - 单独的经验页面,显示所有详细信息
故障排除
此主题是我网站 adrianmoreno.info 上的一个版本。如果遇到问题,你可以查看我网站上的代码以供参考。
如果你对主题有改进,非常欢迎你提交 PR(pull request),如果你能够做到的话 💕。否则 - 请参阅下文,了解如何获得帮助(也许还可以帮助其他人解决相同的问题)。
获取帮助
该项目按“原样”提供,它是一个为我的个人网站提供支持的业余项目。会在生活允许的情况下提供支持 - 你可以创建一个 issue,以便其他任何人也可以提供帮助,或者作者。
展示
你在你的网站上使用过这个主题吗?发送一个 PR 将它添加到列表中以供参考!(如果仓库是开源的,则会额外加分 :-)
- 演示站点
- adrian moreno 的个人网站
- https://davidcorto.es/ (https://github.com/dcorto/dcorto.github.io) ⭐ 主题贡献者
- https://cwb.dk/ (https://github.com/C0DK/C0DK.github.io)
- https://shaun.gg/ (https://github.com/shauncampbell/shaun_dot_gg)
- https://trevorpiltch.com/ (https://github.com/trevorpiltch/trevorpiltch.github.io)
- https://vega-2135.github.io/ (https://github.com/vega-2135/vega-2135.github.io)
- https://talinashrotriya.com/ (https://github.com/Talina06/talina06.github.io)
- https://loseardes77.github.io/hugo-portfolio/ (https://github.com/LOSEARDES77/hugo-portfolio)
- https://chandanpasunoori.com/ (https://github.com/chandanpasunoori/www.chandanpasunoori.com)
- https://sathvikracha.com/ (https://github.com/sathvikracha/sathvikracha.com)
- https://jlruan.me/ (https://github.com/jlruan/jlruan.github.io)
- https://chenyugu.com/ (https://github.com/ChyenGCY/ChyenGCY.github.io)
- https://benjaminkoltermann.me/ (https://github.com/p4ck3t0/websites)
- https://kaiasaoka.github.io/ (https://KaiAsaoka/KaiAsaoka.github.io.old)
- https://guillaumebabik.github.io/ (https://github.com/guillaumebabik/guillaumebabik.github.io)
- https://oldgo.fael.my.id/danielweb/ (https://github.com/burnblazter/danielweb)
- https://www.davidfreitag.com/ (https://github.com/dkfreitag/davidfreitag-com)
- 在这里添加你的网站!
贡献者
Adrián Moreno Peña | selmanceker | Murat Öcal | Sämi Will | Samuel Martin | D. Corto |
Ozgur Aksakal | Andrei Popov | Brandyn | Eric Reid | Jesper Højgaard | LeahWilleke |
Luka Šulc | Alix |
许可证
- 版权所有 2020 Radity (https://radity.com/), 2022 Adrián Moreno Peña (https://www.adrianmoreno.info)
- 在 MIT 许可下授权 (https://github.com/zetxek/adritian-free-hugo-theme/blob/master/LICENSE)