Customization - 定制

重新学习主题已构建为通过定义多个 部分来尽可能可配置

在 themes/hugo-theme-relearn/layouts/partials/中, 您将找到为此主题定义的所有部分.如果需要覆盖某些内容,请不要直接更改代码.而是关注此页面. 您将在本地项目的layouts/partials文件夹中创建一个新的部分.此部分将具有优先级.

此主题定义了以下部分：

  • header.html: 页面的页眉. 查看 输出格式
  • footer.html: 页面的页脚. 查看 输出格式
  • body.html: 页面的正文.正文可能包含一个或多个文章. 查看 输出格式
  • article.html: 单篇文章的输出可以包含内容周围的元素. 查看 输出格式
  • menu.html: 左侧菜单. 不打算被覆盖
  • search.html: 搜索框. 不打算被覆盖
  • custom-header.html: 页面中的自定义标题.意味着在添加 CSS 导入时被覆盖.不要忘记在文件中包含styleHTML标签指令.
  • custom-footer.html: 页面中的自定义页脚.意味着在添加 JavaScript 时被覆盖.不要忘记在你的文件中包含javascriptHTML标签指令.
  • favicon.html: 网站图标.
  • heading-pre.html: 侧范围配置,以在页面标题标题前面附加.如果您覆盖此设置,则您有责任考虑页面的headingPre 设置.
  • heading-post.html: 侧范围配置以附加到页面标题标题.如果您覆盖此设置,则您有责任考虑页面的headingPost设置.
  • logo.html: 徽标,位于左上角.
  • meta.html: HTML 元标记（如果要更改默认行为）
  • menu-pre.html: 侧范围配置为附加到菜单项.如果您覆盖此设置,则您有责任考虑页面的menuPre 设置.
  • menu-post.html: 侧范围配置以附加到菜单项.如果您覆盖此设置,则您有责任考虑页面的menuPost 设置.
  • menu-footer.html: 左侧菜单的页脚
  • toc.html: 目录
  • content.html: 内容页面本身.如果要在内容上方或下方显示页面的元数据,则可以覆盖此字段.
  • content-header.html: 标题上方的标头具有默认实现,但如果您不喜欢它,可以覆盖它.
  • content-footer.html: 内容下方的页脚具有默认实现,但如果您不喜欢它,可以覆盖它.

在 layouts/partials/ 中创建一个名为 logo.html的新文件. 然后编写任何你想要的 HTML. 您可以使用 img HTML标记并引用在 static 文件夹下创建的图像,或者您可以粘贴 SVG 定义!

注释

LOGO的大小将自动调整

更改图标

如果您的图标是SVG,PNG或ICO,只需将您的图像放在本地的static/images/ 文件夹中, 根据您图标文件的扩展名,应对应的命名为favicon.svg, favicon.png 或 favicon.ico.

此外,如果您希望您的网站使用遵循操作系统（在某些情况下是浏览器）配色方案的浅色和深色主题图标,请将图像文件添加到本地的 static/images/ 文件夹中并命名它们. favicon-light.svg 和/或 favicon-dark.svg 分别对应于您的文件格式.如果其中一个文件丢失,主题将回退到 eg. favicon.svg 表示丢失的文件.所有提供的网站图标必须具有相同的文件格式.

警告

IE和旧浏览器版本不支持 媒体查询,这对于浅色和深色主题图标选项是必需的. 如果您需要支持 IE 和/或较旧的浏览器版本,请使用其他选项之一.

如果未找到图标文件,主题将在同一位置查找替代文件名 logo 并重复搜索支持的文件类型列表.

如果您需要更改此默认行为,请在layouts/partials/ 中创建一个名为 favicon.html. 的新文件.然后写这样的东西:

<link rel="icon" href="/images/favicon.bmp" type="image/bmp">

更改颜色

重新学习主题可让您在浅色或深色模式下的一些预定义颜色变体之间进行选择,但您可以自己添加一种!

您可以通过在菜单底部的款式/规格选择器中更改它们来预览已发货的款式/规格.

单一变体

使用主题文件的名称设置themeVariant 值.就是这样!

[params]
  themeVariant = "relearn-light"

在上面的示例中,您的主题文件必须命名为 theme-relearn-light.css

多种变体

您还可以设置多种变体.在这种情况下,第一个变体是第一个视图上选择的默认变体,并且变体开关将显示在菜单页脚中.

[params]
  # 使用变体更改默认配色方案.
  themeVariant = [ "relearn-light", "relearn-dark" ]
提示

如果要将 语法突出显示主题 与 颜色变体 一起切换,请生成语法突出显示样式表并根据 根据Hugo的文档安装, 以及 @import 此样式表在您的颜色变体样式表中. 例如,请查看 theme-relearn-light.css 和 config.toml示例网站.

调整到操作系统设置

您还可以使站点调整为浅色/深色模式的操作系统设置.只需将 themeVariant 设置为 auto. 就是这样.

如果您设置了多个变体,则可以在任何位置删除 auto ,但通常将其设置为第一个位置并将其设置为默认值是有意义的.

[params]
  themeVariant = [ "auto", "red" ]

如果您没有配置其他任何内容,主题将使用 relearn-light 作为浅色模式, relearn-dark 用于深色模式.

如果你不喜欢这样,你可以设置 themeVariantAuto.第一个元素是浅色模式的变体,第二个元素是暗模式的变体

[params]
  themeVariantAuto = [ "learn", "neon" ]
注释

Internet Explorer 11 不支持此功能,它仍以relearn-light 变体显示.

JavaScript

多属性完全加载后,无论是初始还是通过使用变体选择器手动切换变体,都将调度document上的自定义事件 themeVariantLoaded. 您可以添加事件侦听器并对更改做出反应.

document.addEventListener( 'themeVariantLoaded', function( e ){
  console.log( e.detail.variant ); // `relearn-light`
});

自己动手

如果您对附带的变体不满意,您可以将其中一个附带的文件从 themes/hugo-theme-relearn/static/css 复制并重命名为 static/css, 然后根据自己的喜好在文本编辑器中编辑它们,并在 config.toml中配置themeVariant 参数, 或者使用 颜色变体生成器 .

输出格式

可以更改主题的某些部分以支持您自己的输出格式. Eg. 例如.如果您在config.toml中定义了新的输出格式 PLAINTEXT , 您可以添加文件layouts/partials/header.plaintext.html 来更改方式,页面页面应类似于该输出格式.

菜单页脚

文件路径:

/site/themes/relearn/layouts/partials/menu-footer.html

原内容

<p>Built with <a href="https://github.com/McShelby/hugo-theme-relearn" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>

您可以删除/site/themes/relearn/layouts/partials/menu-footer.html中的内容,或按自己喜好来编辑.