Hugo 主题
lynx
一个使用 Tailwind CSS 构建的 Hugo 链接页面主题。
Lynx
Lynx 被设计为由 Hugo 驱动的简单链接页面。它使用 Tailwind CSS 构建,并受 LinkTree 等服务的启发。
🌏 演示站点 🐛 错误报告 & 问题 💡 问题 & 功能请求
功能
- 使用 Tailwind CSS 3.0 构建的完全响应式布局
- 深色模式(根据浏览器自动切换)
- 来自 FontAwesome 5 的 SVG 图标
- HTML 和 Emoji 支持
- Fathom Analytics 和 Google Analytics 支持
- Favicons 支持
安装
Lynx 支持多种安装方法 - 作为 Hugo 模块(最简单)、git 子模块或完全手动安装。
以下是使用 Hugo 模块的快速入门指南。
使用 Hugo 快速入门
注意:请确保您已安装 Go 和 Hugo,并且在继续之前已创建一个新的 Hugo 项目。
从您的项目目录中,初始化 Hugo 模块
hugo mod init github.com/<username>/<repo-name>
创建
config/_default/module.toml
并添加以下内容[[imports]] path = "github.com/jpanther/lynx"
使用
hugo server
启动服务器,主题将自动下载。在您网站的根文件夹中,将 Hugo 生成的
config.toml
文件替换为 Lynx 中的文件。您将在 Hugo 缓存目录中找到主题配置文件,或从 GitHub 下载副本。按照下面的配置说明进行操作。
安装主题更新
当发布新版本时,您可以使用 Hugo 更新主题。只需从您的项目目录运行 hugo mod get -u
,主题将自动更新到最新版本。
配置
主要主题配置在 config.toml
文件中进行管理。大多数参数都是不言自明的,默认配置包含一些基本示例。
作者姓名和图像显示在页面顶部。两者都是可选的,如果未提供,则默认使用站点标题,且不显示图像。
链接可以是包含链接 URL 的简单字符串,也可以是定义链接参数的对象。链接将按照配置文件中提供的顺序显示。
可接受的链接参数有
href
= 链接应指向的 URL(必需)icon
= 用于此链接的图标名称text
= 链接文本target
= 链接的目标(默认:_blank
)title
= 链接的 HTML 标题
[params.author]
links = {
# Simple link
{ github = "https://github.com/jpanther/lynx" }
# Custom link
{ github = { href = "https://github.com/jpanther/lynx", text = "GitHub Project" } }
}
可以通过在 content/_index.md
创建 Markdown 文件来提供其他页面内容。此文件的内容将显示在标题和链接之间。查看 exampleSite 以了解实际应用。
也可以通过在 content
目录中放置 Markdown 文件来创建基本内容页面。然后可以使用配置文件中的链接或主页内容链接到这些页面。
添加自定义图标和链接样式
Lynx 支持添加您自己的 SVG 图标和链接样式,以完全自定义您的链接页面。在 您的 Hugo 项目的根目录 中,只需创建一个 assets
文件夹并添加您的资源。图标应放置在 icons
文件夹中,任何 CSS 都应放在名为 css/custom.css
的文件中。
构建站点时,自定义 CSS 文件将自动包含并缩小。样式可以随意发挥创意,自定义 CSS 中的任何内容都将覆盖默认主题。
如果您需要图标,可以在 FontAwesome 上找到许多服务的免费 SVG 图标。
示例
让我们使用 FA 标志作为链接图标和渐变背景作为链接样式,为 FontAwesome 创建一个自定义链接。
如果您更喜欢检查代码,exampleSite 包含一个指向 FontAwesome 的自定义链接,演示了此过程。
将 SVG 图标放置在图标文件夹
/assets/icons/font-awesome.svg
中。在
/assets/css/custom.css
创建 CSS 文件,并添加规则来设置链接的样式.link-font-awesome { background: rgb(131, 58, 180); background: linear-gradient( 90deg, rgba(131, 58, 180, 1) 0%, rgba(253, 29, 29, 1) 50%, rgba(252, 176, 69, 1) 100% ); }
注意:CSS 类名应为图标名称,前缀为
link-
。最后,在
config.toml
文件中,通过引用新图标来创建链接font-awesome = { href = "https://fontawesome.com", text = "FontAwesome" }
当重新构建站点时,将出现新的自定义链接。
贡献
Lynx 预计会随着时间的推移而发展。我打算根据需要不断添加功能和进行更改。
欢迎就您希望看到的新功能的任何问题或建议与我联系。
- 🐛 错误报告 & 问题:使用 GitHub 问题
- 💡 新功能想法:在 GitHub Discussions 上发起讨论
- 🙋♀️ 一般问题:前往 GitHub Discussions
如果您能够修复错误或实现新功能,我欢迎为此目的的 PR。在贡献指南中了解更多信息。