Hugo 主题
Travelify
可爱 的 WordPress 主题，现在来到 Hugo。
- 作者: Dr. Bala Ramadurai
- GitHub 星星数: 39
- 更新时间: 2024-09-10
- 许可证: MIT
- 标签: 响应式
此 Travelify 主题的首页位于 https://themes.gohugo.com.cn/hugo-travelify-theme/。
Hugo-Travelify-Theme 的一些重要功能有
使用横幅图像自动生成滑块
通过 Mailchimp 集成订阅电子邮件（您必须注册并生成 HTML 代码）
多作者支持（包含在分类法中）
i10n 数据
Disqus 集成
徽标（可以选择打开或关闭标题）
社交媒体分享选项
Google Analytics
以下是该主题的一些屏幕截图
获取主题
如果您安装了 git，则可以在 Hugo 目录中的命令行界面中执行以下操作
$ cd themes
$ git clone https://github.com/balaramadurai/hugo-travelify-theme.git
您应该在几分钟前创建的 themes 目录中看到一个名为 hugo-travelify-theme 的文件夹。有关详细信息，请阅读 Hugo 的官方设置指南。
设置
在下一步中，导航到 themes/hugo-travelify-theme/exampleSite/ 中的 exampleSite 文件夹。它的结构应该类似于这样
exampleSite
| config.toml
+---content
| | about.md
| | contact.md
| \---post
| creating-a-new-theme.md
| go-is-for-lovers.md
| hugo-is-for-lovers.md
| linked-post.md
| migrate-from-jekyll.md
| this-post-has-no-body.md
+---data
| l10n.toml
\---static
| new-york-featured.jpg
\---banners
7148951717_9bbf185db3_h-1018x460.jpg
featured-4.jpg
featured-5.jpg
new-york-featured.jpg
placeholder.png
Spain-Plaza-de-Cibeles-Madrid-1018x460.jpg
Spain-Plaza-de-Cibeles-Madrid-670x300.jpg
spain6-1018x460.jpg
要使您的网站运行，请使用 cp -r themes/hugo-travelify-theme/exampleSite/* . 将示例网站的整个内容复制到根文件夹中。（有关安装 Hugo 主题，请参阅 https://gohugo.com.cn/overview/quickstart/。）
config 文件
现在，让我们看一下 config.toml。让我们看一下一些设置。
1. 自动或手动滑块
使用配置中的参数，可以随意打开和关闭滑块，并且可以自定义轮播上的横幅图像数量。
[params.slider]
enable = true
manual = false
num_features = 4 # The slider picks up the banner images from the N most recent posts, where num_features is N.
可以将滑块设置为 manual = true，并且在您希望在滑块上突出显示的每个帖子中，在 frontmatter 中包含 slider = true。向滑块添加幻灯片的另一种方法是在 data/slider 文件夹中创建 YAML 文件。查看 exampleSite 以获取示例。
滑块中的视频
您现在可以在滑块中添加视频（来自 YouTube 或 Vimeo 或 Dailymotion 或您自己的 mp4/webm 文件）。（感谢 [https://github.com/balaramadurai/hugo-travelify-theme/issues/32](Issue #32) 的想法）
提示 - 为了在滑块中获得最佳效果，请为横幅图像使用 1018x460 分辨率。
2. Google Analytics
GoogleAnalytics = ""
3. 评论
评论系统是 Disqus 提供支持的可选功能。输入您的短名称以在您的帖子下启用评论部分。
disqusShortname = ""
提示 - 您可以在单个页面的 frontmatter 中禁用评论部分
+++
disable_comments = true
+++
4. 菜单和嵌套菜单
可以自定义项目菜单中的条目。首先，让我们链接您撰写的帖子。我们可以在帖子的内容文件的 frontmatter 中通过将 menu 设置为 main 来实现此目的。
+++
menu = "main"
+++
此外，我们可以添加不链接到帖子的条目。回到 config.toml，您会找到一个用于菜单的部分
[[menu.main]]
name = "Contact"
url = "/contact/"
weight = 20
定义一个标签并输入您要链接的资源的 URL。使用 before，您可以决定链接应该出现在菜单中所有链接的帖子之前还是之后。因此，Home 出现在链接的帖子之前。
对于嵌套菜单，您可以使用以下格式
[[menu.main]]
name = "Contact2"
url = "/contact/"
parent = "Contact"
[[menu.main]]
name = "Contact21"
url = "/contact/"
parent = "Contact2"
weight = 20
[[menu.main]]
name = "Contact22"
url = "/contact/"
parent = "Contact2"
weight = 10
[[menu.main]]
name = "Contact3"
url = "/contact/"
parent = "Contact"
5. 侧边栏
要使用网站的完整宽度，您可以在 frontmatter 中为单个页面禁用左侧的个人资料和/或右侧的小部件
+++
disable_profile = true
disable_widgets = true
+++
6. 告诉我你是谁
此主题还提供个人资料部分。通过在 social 下输入您的用户名，将您的社交网络帐户添加到个人资料部分。您的帐户链接将自动创建。
7. 小部件
您可以将小部件添加到右侧边栏。以下小部件可用
- 最近的文章
- 多作者支持
- 类别列表
- 标签列表
- 标签云
- 在您的网站上启用 Duckduckgo 搜索
您可以在 params.widgets 下停用它们
# Enable and disable widgets for the right sidebar
[params.widgets]
recent_articles = true
categories = true
tags = true
tag_cloud = true
archives = false # This feature is yet to be implemented because of limitations in Hugo's way of working.
search = true
author = true
mailchimp = true
mailchimpform = "//mailchimp/url/goes/here"
# grab the mailchimpform value by following instructions here - https://mailchimp.com/help/add-a-signup-form-to-your-website/
# Copy the URL in the action parameter inside the form
# <div id="mc_embed_signup"><form action="https://balaramadurai.us15.list-manage.com/subscribe/post?u=7f4183fa2fe7abe3dc9f4efad&id=49a3dd3745" method="post"
8. 日期行
日期行包括：帖子日期、类别、评论和分享链接。但是，如果您希望某些页面省略日期行，只需在该页面的 frontmatter 中放入 nodateline = true。
9. 禁用上一个/下一个文章链接并删除标签
要禁用页面底部包含上一篇/下一篇文章链接的功能，请在 frontmatter 中添加 noprevnext = true。此功能与 nodateline = true 一起使用，可以创建不那么“博客化”的独立页面。
10. 翻译 (l10n)
您不使用英语写博客，并想将主题翻译成您自己的语言？没问题。在 exampleSite/data 文件夹中，您会找到一个文件 l10n.toml。它包含所有与主题相关的字符串。只需将原始字符串替换为您自己的字符串即可。
11. 链接缩略图
创建新文章后，您可以通过输入图像的相对路径来定义横幅。
banner = "banners/placeholder.png"
这样，您可以将图像存储在与您的文章相同的文件夹中，也可以存储在 static 文件夹中。
提示 - 为了在滑块中获得最佳效果，请为横幅图像使用 1018x460 分辨率。
12. 社交媒体分享
您可以使用以下选项有选择地启用或禁用社交媒体分享按钮
[params.share]
enable = true
facebook = true
twitter = true
googleplus = true
linkedin = true
13. 永久链接 Slug
您可以自定义 slug，使其看起来像这样
例如，在 [permalinks] 部分中，可以按以下不同方式设置类别
categories = "/category/:slug/"
categories = "/categories/:slug/"
感谢 @sandipb 的 PR - https://github.com/balaramadurai/hugo-travelify-theme/pull/31
即将完成
要预览您的网站，请运行 Hugo 的内置本地服务器。
$ hugo server
现在在浏览器的地址栏中输入 localhost:1313。
为主题做贡献
发现错误或对新功能有想法？请随时使用问题跟踪器告知我。或者发起一个拉取请求。
许可证
此主题在 MIT 许可证下发布。有关详细信息，请阅读许可证。
致谢
感谢
- Aigars Silkalns 创建了这个主题
- Steve Francia 创建了 Hugo 以及项目周围的优秀社区
- digitalcraftsman 创建了 Icarus 主题的源代码
- Anita Nagarajan 编辑了此文章/自述文件