Hugo 主题
Split
Split 是一种居中分割的布局,适用于专业的在线形象,左侧是大型图像或视频,旁边是内容。
- 作者:Christian Mendoza Felix Börner
- GitHub 星星:77
- 更新时间:2024-11-13
- 许可证:Creative Commons Attribution 3.0 Unported
- 标签:着陆页 极简 个人 响应式
Split
Split 是一个单页、居中分割的布局,适用于专业的在线形象,左侧是大型图像或视频,旁边是内容。它是 One Page Love 的 Split 的移植版本。
此 Hugo 主题具有图像或视频视觉部分,以及用于您的姓名、标语、简介和链接的内容部分。
安装
在您的 Hugo 网站的文件夹中运行
$ cd themes
$ git clone https://github.com/escalate/hugo-split-theme.git
有关更多信息,请阅读 Hugo 的官方设置指南。
入门
成功安装 Split 主题后,只需几个步骤即可使您的网站最终运行。
配置文件
查看此主题的 tests
文件夹。您会找到一些示例配置。要使用其中一个,请将 hugo.toml
复制到您的 Hugo 网站的根文件夹中。随意自定义此主题。
添加内容
主页
在内容目录中添加一个名为 _index.md
的文件以创建您的主页。使用 TOML 配置元素设置页面的 title
和 tagline
。以 markdown 样式简单地编写您的内容。
$ hugo new content/_index.md
+++
title = "Jenny Jones"
tagline = "Designer. Stylist. Nomad."
+++
Donec at libero id lectus porta dapibus eu in nibh. Cras id mauris sapien. Fusce viverra [luctus urna]({{< ref "long-text.md" >}}) ac rutrum. Duis semper elit eu mi facilisis eleifend. Donec semper, [ipsum in]({{< ref "commonmark.md" >}}) malesuada congue, purus sem ullamcorper massa, sit amet lacinia nibh enim sed massa.
其他页面
您可以在内容目录中像往常一样创建其他页面。
$ hugo new content/long-text.md
+++
title = "Long Text"
+++
Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna dolor sagittis lacus. Donec elit libero, sodales nec, volutpat a, suscipit non, turpis. Nullam sagittis. Suspendisse pulvinar, augue ac venenatis condimentum, sem libero volutpat nibh, nec pellentesque velit pede quis nunc.
使用图像
将 enable
设置为 true
。将您的图像添加到 static
文件夹,并将 file
相应地更改为您图像的位置。默认情况下,图像位置居中,但是您可以通过为 position
提供有效的 CSS 位置来指定自己的位置。
[[params.visual.image]]
enable = true
file = "images/background.jpg"
position = "center center"
您可以通过在每个页面的 FrontMatter 上配置 visual.image.enable
来控制每个页面上图像的显示。
+++
visual.image.enable = false
+++
# Privacy statement
使用视频
首先,通过将 [params.visual.image]
中的 enable
设置为 false
来禁用图像。
其次,通过将 [params.visual.video]
中的 enable
设置为 true
来启用视频。
您可以使用您托管的视频或 YouTube 上的视频。
与图像一样,您可以通过在页面的 FrontMatter 中设置 visual.video.enable = false
来完全不在特定页面上显示视频。
使用您自己的视频
将您的视频添加到 static
文件夹,并将 file
相应地更改为您视频的位置。请确保删除 youtubeId
或将其注释掉。
[[params.visual.image]]
enable = false
...
[params.visual.video]
enable = true
mute = true
file = "videos/background.mp4"
# youtubeId = "dk9uNWPP7EA"
使用 YouTube 视频
获取 YouTube 视频的 ID 并将其添加到 youtubeId
。请确保删除 file
或将其注释掉。
[[params.visual.image]]
enable = false
...
[params.visual.video]
enable = true
mute = true
# file = "videos/background.mp4"
youtubeId = "dk9uNWPP7EA"
添加自定义 CSS
将自定义 css 样式放入 static/css/style.css 中,并在配置中启用此 css
[params.custom.css]
enable = true
其他设置
如果您希望视频以静音播放,则将 mute
设置为 true
,如果您希望播放声音,则设置为 false
。该视频被编码为自动播放和循环播放。如果要更改该代码,可以在 layouts/partials/video.html
中找到。
添加链接
您可以在链接部分中最多包含 3 列列表。 heading
是列表标题文本。对于文本链接,text
是链接文本,url
是链接 URL。遵循相同的代码段结构,向列表添加更多链接。如果您只想要 1 个或 2 个列表,只需删除您不想要的链接列表代码段。
这是生成一个链接列表的内容
# Links List #1
[[params.links]]
[params.links.list1]
heading = "Connect"
[[params.links.list1.link]]
text = "Blog"
url = "#"
new_tab = true # new tab
[[params.links.list1.link]]
text = "Email"
url = "#"
new_tab = false # Default, open at same tab
[[params.links.list1.link]]
text = "Newsletter"
url = "#"
添加元数据
author
和 description
元数据可帮助搜索引擎了解如何在搜索结果中显示您的网站。 shareImage
和 twitterHandle
有助于改进您的内容在社交媒体网站上共享时的显示方式。
[params]
author = "Jenny Jones"
description = "Split is a centrally-divided layout for a professional online presence with a big image or video left with alongside content."
shareImage = "images/social.jpg"
twitterHandle = "onepagelove"
添加网站图标
用您的网站图标替换 static/favicon.ico
。如果您不需要,只需删除 favicon.ico
和下面的行。
favicon = "favicon.ico"
添加版权
将 copyright
设置为您想要的版权文本。
copyright = "©2024 Your Name"
添加 Google Analytics
通过将您的跟踪 ID 添加到 services.googleAnalytics
来启用 Google Analytics。如果您不需要,请留空或删除。
[services]
[services.googleAnalytics]
ID = "UA-XXXXXXXX-1"
即将完成
为了查看您的网站运行情况,请运行 Hugo 的内置本地服务器。
$ hugo server
现在在浏览器的地址栏中输入 localhost:1313
。
贡献
您是否发现了错误或有新功能方面的想法?欢迎使用问题跟踪器告知我。或者直接发起拉取请求。另请参阅贡献说明。
许可证
原始模板基于知识共享署名 3.0 许可证发布。在您自己的项目中使用时,请保留原始的署名链接。如果您希望在不署名的情况下使用该模板,可以通过模板作者的网站查看许可选项。
要在购买后禁用许可证文本,请将变量 licensed
的值设置为 true
。
[params]
licensed = true
注释
- 原始分割模板来自 One Page Love
- 女孩图片来自 Joe Gardner
- 山上的云朵视频来自 John Guinn
- 视频集成 CSS 忍者技能来自我的朋友 Manu
还要感谢 Steve Francia 创建了 Hugo 以及围绕该项目的出色社区。