Hugo 主题
AutoPhugo
适用于 Hugo 的图片库/摄影博客主题。
- 作者: Karl Sickendick Pavel Kanyshev
- GitHub 星星: 98
- 更新于: 2024-11-24
- 许可证: CCA 3.0 未移植版
- 标签: 博客 黑暗 画廊 响应式
AutoPhugo
AutoPhugo [ˌɔtoʊˈfjuːgəʊ] 是一个适用于 Hugo 的图片库/摄影博客主题,它比 Phugo 更自动化一些。它是 HTML5 UP Multiverse 模板的移植版。Phugo 最初由 Aerohub 的 Pavel Kanyshev 创建。
在 https://kc0bfv.github.io/autophugo 预览
功能
- 完全响应式
- HTML5 + CSS3
- FontAwesome 图标
- 多级相册支持
- 谷歌分析
- 基本面包屑导航
- 联系表单
- 自动图像缩放
最近的更改
请注意
在 2024 年 1 月 28 日,您现在必须以不同的方式指定网站作者姓名和电子邮件。Hugo为此更改了网站参数,我们也随之进行了更改。exampleSite
配置演示了此更改。
安装
按照 Hugo 的标准说明将主题添加到您的站点。
配置
exampleSite
演示了此主题的独特功能。在您的站点配置参数部分,支持以下额外参数
favicon
- favicon URL,相对于您的站点(放置在 header meta 标签中)description
- header meta 标签的描述。这将解释为 markdown,并且某些 markdown 将要求该字符串用引号括起来。msvalidate
- MS 验证标签googlesiteverification
- Google 网站验证标签thumb_width
- 调整大小后的缩略图宽度(默认为 480 像素)thumb_quality
- 调整大小后的缩略图编码质量百分比(默认为 50%)full_width
- 调整大小后的显示尺寸图像宽度(默认为 960 像素)full_quality
- 调整大小后的显示尺寸图像编码质量(默认为 90%)column_count
- 显示图像的列数(默认为 2)breadcrumb_use_title
- 如果为 true,则面包屑导航(底部的路径式显示)将使用页面标题而不是路径filename_as_phototitle
- 如果为 true,则会使用文件名的人性化形式作为图片标题(默认为 false)images_downloadable
- 如果为 true,则图像具有下载按钮(默认为 true)images_downloadable_use_orig
- 如果为 true,则下载按钮将下载原始图像而不是全尺寸图像 - 这可能会大大增加您网站的大小(默认为 false)taxonomies_links
- 如果为 true,则分类页面的链接将出现在页脚和标记的项目上(默认为 false)
此外,站点配置中的 params.author.name
和 params.author.email
将显示为作者和网站管理员电子邮件。
可以使用以下站点参数进行页眉和页脚自定义。这些在 TOML 中实现起来有点复杂 - 请查看 exampleSite
配置以获取演示和注释
header.links
- 具有键name
、url
和icon
的映射列表,描述将在导航栏中可见的链接footer.paragraph
- 具有键headline
和text
的映射,指定在footer
弹出窗口中显示的内容(在示例站点上标记为“关于”)footer.social
- 具有键headline
(文本)和links
(映射列表)的映射。links
条目可以为每个条目提供label
、url
和icon
。这些旨在成为带有“关注我”标题的社交媒体链接。footer.contact
- 具有键hide
、realEmail
、headline
、buttonText
和resetText
、name
、email
和message
的映射,指定联系表单的属性(或隐藏它)。有关如何设置此选项的详细信息,请参阅exampleSite
配置。footer.copyright
- 您网站的版权信息
exampleSiteNoAlbum
目录演示了无相册布局,所有照片都显示在首页上。
相册构建
在您的项目内部创建目录 assets/YOUR-ALBUM-NAME
。将一个相册的所有照片放在该目录中。
请注意! 如果您之前没有这样做,请通过删除默认站点文件来确保 hugo 使用主题的原型文件。原型文件负责 hugo new
钩子。
rm archetypes/default.md
现在,在您的项目中运行
hugo new NAME-OF-YOUR-ALBUM/_index.md
它将为您的第一个相册创建一个索引文件。使用您的文本编辑器打开 content/YOUR-ALBUM-NAME/_index.md
。您会看到类似以下的内容
---
title: "NAME-OF-YOUR-ALBUM"
date: "2020-03-15T00:00:00+00:00"
albumthumb: "NAME-OF-YOUR-ALBUM/photo00.jpg"
draft: false
resources:
- src: "NAME-OF-YOUR-ALBUM/photo00.jpg"
- src: "NAME-OF-YOUR-ALBUM/photo01.jpg"
- src: "NAME-OF-YOUR-ALBUM/photo02.jpg"
---
如果需要,请更改您的相册标题,并设置相册封面缩略图的文件名。该文件名相对于 assets 文件夹,因此如果您的相册名为 dogs
并且您在那里的一张图片名为 dog_01.jpg
,您可以在 albumthumb
中放置 dogs/dog_01.jpg
来选择它。
除了这些 frontmatter 选项外,您还可以为某些或所有图像指定元数据。通过使用映射元素修改 resources
数组来执行此操作。这些映射使用 src
键指定它们应用于的图像,例如 src: "album/image.jpg"
。然后,您可以指定以下部分或全部项目:alt
、phototitle
和 description
。exampleSite
目录相册中对此进行了演示。
您现在还可以为整个相册指定 description
。exampleSite/content/cats/_index.md
和 exampleSite/content/_index.md
显示此选项。
子相册
如果您想创建包含其他相册的相册 - 您可以这样做!例如,以下命令将创建一个名为“dogs”的相册
hugo new dogs/_index.md
生成的 content/dogs/_index.md
文件如下所示
---
title: "Dogs"
date: 2020-03-15T14:00:00-06:00
albumthumb: "dogs/subalbum/photo_00.jpg"
---
请务必指定 albumthumb!
现在,您可以像以前一样在该“dogs”相册中创建相册了……
hugo new dogs/pensive-dogs/_index.md
您的 assets
目录布局应镜像 content
中的目录布局。
请参阅 exampleSite
以及 dogs
文件夹和子文件夹的示例。dogs
相册实际上包含图像和子相册混合在一起作为演示。
图像和子相册混合
您可以将图像和子相册放在一起 - 在这种情况下,assets
目录将包含图像和目录。您将创建镜像该布局的内容目录。dogs
相册是这方面的一个示例。
注意!但这很可能会让用户感到困惑。显示这些混合相册时没有默认的划定。子相册显示在顶部,图像显示在较低的位置 - 但除此之外,用户不清楚单击图像时会发生什么。它是将显示全尺寸,还是将打开子相册?
使用自定义权重
子相册和图像的默认排序按权重排序。对于权重相同的子相册,它按日期排序,对于权重相同的图像,它按文件名排序。如果您未为项目指定权重,则默认值为 0。因此 - 如果您不设置任何权重,则将按日期排序……较低的权重排在前面,因此负权重将排在未指定权重和正权重之前。
标签和分类(分类法)
您可以标记和分类您的图片和子相册,您也可以创建其他分类法并使用它们! 有一些站点配置需要了解...
disableKinds = ["taxonomy", "term"]
如果您希望标签或类别不包含此行在您的站点配置中。如果在您的站点配置中为 disableKinds 指定这些值,您将禁用所有分类页面。术语页面不是此主题的一部分生成的 - 术语都出现在它们的分类页面上。无论如何,如果您想拥有标签或类别,不要包含上面这一行。
您可以使用 [taxonomies]
站点配置部分创建新的分类法或删除默认值。更多信息请参考 Hugo 文档。
taxonomies_links
参数默认为 false,即使生成了分类页面也会禁用指向分类页面的链接...在您的站点配置中将其设置为 true,链接将显示在页面页脚和标记的项目上。
构建站点
运行 hugo
以构建您的站点。输出将放置在 public
目录中。原始图像将不包含 - 仅包含调整大小后的版本。
构建站点时,hugo 必须构建缩略图和分发大小的图像。此过程可能需要一些时间,特别是当您有很多图片时...它将图像的版本存储在 resources
目录中,因此不必在每次构建时都重新执行此过程。
因此 - 添加相册后,您的下一次构建可能需要几分钟。未来的构建会更快。
开发说明
如果您尝试多种尺寸或质量设置的图像,您将在 resources
目录中开始积累大量的图像。一旦您确定了您喜欢的质量和尺寸,您应该考虑删除资源并重建以消除未使用的图像。
无论您有多少资源,Hugo 都只会部署实际在构建中使用的资源。未使用的图像资源将不会被部署。
高级功能
图像调整大小:通常您在配置中指定 thumb_width
和 full_width
以及质量,以修改 Autophugo 如何缩放您的图像。Autophugo 使用这些值来构建 Hugo 的 Resize 函数的字符串。不过,您可以直接指定该字符串...直接在您的配置中设置 thumb_size
或 full_size
以绕过其他配置。字符串的格式在此处记录。您可以为整个站点或特定子相册的 _index.md
中指定 full_size
和 thumb_size
。
您还可以更改 Hugo 用于调整全尺寸图像大小的方法(此选项不适用于缩略图)。Hugo 具有适用于调整全尺寸图像大小的 Resize
和 Fit
方法。默认情况下,Autophugo 使用 Resize
。通过将 full_resize_method
设置为 Fit
、Resize
或 None
,您可以更改它。如果您更改为 Fit
方法,您还必须指定 full_size
。这是因为必须指定高度和宽度,并且使用 Resize
您只需要其中一个。同样,full_size
字符串的格式在此处记录。以下是一些示例
- 将图像按比例缩小,保持纵横比,最大高度为 960 像素,最大宽度为 960 像素,质量为 90%:
full_resize_method = "fit"
,full_size = "960x960 q90"
- 将图像缩放到 960 像素的宽度,允许原始纵横比所需的任何高度,质量为 90%:
full_resize_method = "resize"
,full_size = "960x q90"
- 不对全尺寸版本的图像进行缩放或质量更改:
full_resize_method = "none"
与 Phugo 的比较
不幸的是,原始的 Phugo 已经很久没有更新了,并且从常见的主题列表中被删除。AutoPhugo 在 Phugo 上实现了 pull request,使其可以在现代 Hugo 上无错误地工作。此外,它设置了标准化的列布局,仅基于文件自动构建相册(Phugo 要求将每个文件名作为简码输入),并自动调整照片大小以进行显示和缩略图。此外,还有子相册。
致谢
- 子画廊支持 - tfl0pz, Ognyan Nikolov
- Magnific Popup 灯箱 - Dmitry Semenov
许可证
原始模板根据知识共享署名 3.0 许可证发布。请在使用您自己的项目时保留原始署名链接。
Magnific Popup 灯箱在 MIT 许可证下可用,更多信息请访问上面链接的他们的网站。