Icarus用户指南 - 主题配置
Icarus的默认主题配置文件为_config.icarus.yml,它位于站点根目录中,与站点配置文件_config.yml放在一起。
此文件定义了站点全局的布局与样式设置,同时也控制了例如插件与挂件等外部功能的配置。
本文详细介绍了本主题的一般配置,并且解释了Icarus使用哪些配置文件,以及它是如何生成并验证这些配置的。
一般主题配置
配置文件版本
这个版本号与主题版本号相关却不总是相同。 Icarus使用此版本号来决定是否升级默认主题配置文件。 请不要自己更改这个版本号。
1 | version: 7.0.0 |
主题变体
通过此设置为Icarus更换“皮肤”。
此设置目前支持default、cyberpunk和m3e(Material 3 Expressive)三种值。
你可以在此处查看Cyberpunk变体的效果,在此处查看Material 3 Expressive变体的效果(英文)。
1 | variant: default |
外观
默认变体和Material 3 Expressive变体可以是亮色或暗色的。
将appearance设置为light(默认值)、auto(跟随每位访客的浏览器或操作系统的亮色/暗色设置)或dark(始终使用暗色)。
Cyberpunk变体有自己的暗色配色,会忽略此设置。
1 | appearance: auto |
使用auto时,访客还可以通过导航栏中的按钮在亮色与暗色之间切换。
浏览器会记住访客的选择,下次访问时继续使用。
和其他主题配置一样,appearance也可以在布局配置文件中为所有文章或页面设置,或在某个文章或页面的front-matter中单独设置(参见配置文件与优先级)。
页面显示为暗色时,代码块会使用代码高亮设置中的dark_theme,logo也会换成logo_dark。
你可以在此处查看暗色外观的效果。
Logo
设置你站点的logo。
此logo会显示在导航栏和页脚。
logo配置的值既可以是你的logo图片的路径或URL地址:
1 | logo: /img/logo.svg |
也可以像下面这样设置成文字:
1 | logo: |
当默认变体或Material 3 Expressive变体显示为暗色时(参见外观),以及使用Cyberpunk变体时,logo图片会换成logo_dark中设置的图片:
1 | logo: /img/logo.svg |
如果没有设置logo_dark,主题自带的logo(/img/logo.svg)会换成/img/logo-dark.svg,其他logo图片则保持不变。
文字logo不会改变。
Favicon
你可以在head配置中指定你的网站favicon的路径或URL地址。
1 | head: |
Web App Manifest
Icarus支持基本的PWAmanifest.json的生成与Meta标签。
要开启web app manifest,请在主题配置的head配置中使用如下的配置。
你也可以参考MDN来了解每个配置项的详情。
1 | head: |
Open Graph
你可以在head配置中设置Open Graph。
你应该在配置文件中将绝大部分配置留空。
仅在需要的时候在文章的front-matter中为这些设置赋值。
请参考Hexo文档来详细了解每个配置项。
1 | head: |
hexo-component-inferno 4.1.0及更早版本生成的配置文件会把type设为blog,但它并不是有效的Open Graph类型。
如果你的配置文件里有type: blog,请把它留空。
如果没有设置image,Icarus会依次使用文章front-matter中的og_image、cover或thumbnail,都没有时使用文章中的图片。
如要在分享文章时使用封面以外的图片,请在文章的front-matter中设置og_image:
1 | title: 分享图片 |
Google Structured Data也使用同一张图片。
Google Structured Data
你可以在head配置中设置Google Structured Data。
你应该在配置文件中将绝大部分配置留空。
仅在需要的时候在文章的front-matter中为这些设置赋值。
请参考Search for Developers来详细了解每个配置项。
1 | head: |
页面元信息
你可以通过head部分的meta设置来向生成的HTML中添加自定义<meta>标签。
每一个meta标签应作为meta数组中的一个元素出现。
meta设置每一个元素的值应为<属性名>=<属性值>的格式,其中属性名和属性值分别代表着<meta>标签的属性和值。
如果<meta>标签有多个属性和值,请使用;来分隔<属性名>=<属性值>。
1 | head: |
自hexo-component-inferno 4.2.0起,每组中只有第一个=用来分隔属性名和属性值,所以属性值中可以包含=。
如果属性值中需要使用;(或属性名中需要使用=),请用反斜杠转义,例如'http-equiv=refresh;content=5\;url=https://example.com/'。
Canonical URL与搜索索引
Icarus会为每个页面添加指向其永久链接的canonical链接。
如要让转载的文章指向原文URL,请在其front-matter的head部分设置canonical_url:
1 | title: 转载文章 |
front-matter中的head部分会替换这篇文章的整个head主题配置(参见文章/页面的Front-matter)。
请同时写上需要保留的head设置,例如favicon和rss。
Icarus还会要求搜索引擎不要索引归档、分类和标签页面。
RSS
你可以通过head部分的rss设置来添加RSS链接信息。
1 | head: |
导航栏
navbar部分定义了导航栏中的菜单与链接。
你可以通过向menu设置项中添加<链接名>: <链接URL>的方式添加任意导航栏菜单链接。
如要把几个链接归到同一个菜单项下,请把这个菜单项设置为由<链接名>: <链接URL>组成的对象,这些链接会显示在子菜单中。
如要向导航栏右侧添加链接,请向links设置项中添加<链接名>: <链接URL>。
1 | navbar: |
当菜单项和链接无法在一行中显示时(例如在手机上),菜单项会折叠到一个下拉菜单中,点击菜单按钮即可打开。
你也可以使用FontAwesome图标来作为纯文字链接的替换,格式如下:
1 | <链接名>: |
这种格式适用于navbar.links、footer.links、article.licenses以及个人信息挂件的social_links,但不适用于navbar.menu中的菜单项,菜单项始终显示为文字。
导航栏默认会随页面一起滚走。
如要让它固定在窗口顶部,请将navbar部分的sticky设置为true;设置为mobile则只在宽度小于769px的屏幕(如手机)上固定。
固定后,指向标题的链接和目录中的条目会把标题滚动到导航栏的正下方。
1 | navbar: |
本页在front-matter中将sticky设置为true,向下滚动即可看到效果。
页脚
footer部分定义了页脚右侧的链接。
链接的配置格式与navbar中links的配置格式完全一致。
1 | footer: |
你也可以在页脚展示自定义版权文字:
1 | footer: |
代码高亮
如果你已在Hexo中启用了代码高亮功能,你可以通过article中的highlight设置来自定义代码块。
请从highlight.js/src/styles下列出的所有主题中
选择一个主题。
然后,复制文件名(不带.css后缀)到theme设置项中。
base16目录中的主题(如solarized-light)需要在名称中保留目录名,例如base16/solarized-light。
dark_theme设置项是页面显示为暗色时改用的主题(参见外观)。
Material 3 Expressive变体的代码块背景和主要语法颜色使用其自身的配色。
在使用鼠标的设备上,代码块的复制按钮只在鼠标悬停于代码块上或代码块获得焦点时显示;在触摸屏上则始终显示。
如要隐藏复制代码按钮,将clipboard设置为false。
如果你希望折叠或展开所有代码块,将fold设置为"folded"或"unfolded"。
你也可以将fold设置为空来禁止代码块折叠。
折叠的代码块会隐藏全部代码。
如要改为显示开头几行并逐渐淡出,请将fold_preview设置为要显示的行数。
点击预览即可展开代码块;代码行数不超过预览行数的代码块会完整显示。
1 | article: |
此外,你可以在Markdown文件中使用下面的语法来折叠单独的代码块:
1 | {% codeblock "可选文件名" lang:代码语言 >folded %} |
本页在front-matter中将fold_preview设置为3,所以下面折叠的代码块会显示开头三行:
1 | article: |
封面 & 缩略图
若要为文章添加封面图,请在文章的front-matter中添加cover选项:
1 | title: Icarus快速上手 |
类似地,你也可以在文章的front-matter中为文章设置缩略图:
1 | title: Icarus快速上手 |
文章的缩略图会显示在归档页面和最新文章挂件中。
如果你在front-matter中使用的是图片的路径,你需要确保它是绝对或者相对于你的source目录的路径。
例如,为使用<your blog>/source/gallery/image.jpg作为缩略图,你需要在front-matter中使用/gallery/image.jpg作为图片路径。
文章语言
站点的语言在站点配置文件中设置(参见常见问题)。
如要用其他语言撰写单篇文章或页面,请在其front-matter中设置lang或language:
1 | title: Hello World |
它的值为<icarus_directory>/languages中不带.yml后缀名的翻译文件名。
它会设置页面的语言,以及页面上主题界面文字的语言,例如文章的标签和挂件的标题。
它不会翻译你的文章内容。
如果该语言没有对应的翻译,Icarus会先使用站点语言,再使用英文。
评论插件有各自的语言设置,参见评论插件。
文章阅读时间
你可以将article部分的readtime设置为true来显示文章字数统计以及预计阅读时间。
1 | article: |
预计阅读时间按每分钟150字计算,每个汉字或日文假名计为一个字。
文章更新时间
Icarus会在文章的发布时间旁边显示更新时间。 你可以在文章的front-matter中设置更新时间:
1 | title: Icarus快速上手 |
主题配置文件article部分的update_time设置决定是否显示更新时间:
1 | article: |
设置为true(默认值)会显示所有文章的更新时间,设置为false会隐藏所有文章的更新时间,设置为auto则在文章的更新时间与发布时间相同时隐藏更新时间。
如果front-matter中没有updated,Hexo会把Markdown文件的修改时间当作更新时间,因为站点配置文件中updated_option的默认值是mtime。
所以每篇文章都会显示更新时间(即使设置为auto,通常也是如此),而且在你检出或复制文件后,更新时间可能会改变。
如果只想显示在front-matter中设置了updated的文章的更新时间,请在_config.yml中把updated_option设置为empty:
1 | updated_option: empty |
过时文章提示
Icarus可以在长时间没有更新的文章顶部显示一条提示,让读者知道其中的部分内容可能已经过时。
如要显示该提示,请将article部分outdated_notice设置中的enable设置为true。
days是文章最后一次更新后开始显示提示的天数(默认为365)。
文章的最后一次更新时间是它的更新时间(参见文章更新时间),没有更新时间时则为发布时间。
1 | article: |
文章距上次更新的天数由读者的浏览器计算,所以无需重新生成站点,提示也会按时显示。
提示只显示在文章中,不会显示在页面或首页的文章摘要中。
显示该提示的例子见Algolia Search Plugin。
如要在某篇文章中关闭提示,请在它的front-matter中将outdated_notice设置为false:
1 | title: Icarus快速上手 |
文章的更新时间默认是Markdown文件的修改时间,每次检出文件时都会改变(例如由CI服务生成站点时)。
为了让提示反映文章真实的更新时间,请在文章的front-matter中设置updated,或者按上文所述在_config.yml中把updated_option设置为empty。
文章许可协议
你可以在你的文章/页面的底部展示你的作品的使用许可,许可链接可以是文字或者图标。
这里的配置与导航栏或者页脚的links配置一致:
1 | article: |
侧边栏
设置sidebar中某个侧边栏的sticky为true来让它的位置固定而不跟随页面滚动。
1 | sidebar: |
其他配置
你可以参考Icarus用户指南来了解更多第三方的插件、挂件、以及CDN提供商的配置。
配置文件与优先级
除了在_config.icarus.yml的默认主题配置文件外,Icarus也会从如下位置获取替代配置:
- 位于
_config.yml的站点配置文件 - 位于
_config.post.yml和_config.page.yml的布局配置文件 - 文章/页面的front-matter
- (已弃用) 位于
themes/icarus/_config.yml的旧主题配置文件 - (已弃用) 位于
themes/icarus/_config.post.yml和themes/icarus/_config.page.yml的旧布局配置文件
除了旧的配置文件,上面的文件都位于站点根目录中。
如果你还保留着旧的配置文件:_config.icarus.yml会覆盖themes/icarus/_config.yml,但themes/icarus/_config.post.yml和themes/icarus/_config.page.yml中设置的顶层配置项会覆盖站点根目录中的布局配置文件。
为避免意外,请把它们的内容移到站点根目录中的配置文件里。
布局配置文件
布局配置文件遵循着与主题配置文件相同的格式和定义。
_config.post.yml中的配置对所有文章生效,而_config.page.yml中的配置对所有自定义页面生效。
这两个文件将覆盖主题配置文件中的配置。
例如,你可以在_config.post.yml中把所有文章变为两栏布局:
1 | widgets: |
同时所有其他页面仍保持三栏布局:
1 | widgets: |
如要去掉所有挂件,例如让所有自定义页面都使用单栏布局,请将widgets设置为null:
1 | widgets: null |
文章/页面的Front-matter
如果你只想要在某个文章/页面中覆盖主题配置,你可以在那个文章/页面的front-matter中写下配置。 例如,你可以像下面这样在一篇文章的front-matter中更改某篇文章的代码高亮主题:
1 | title: 我的第一篇文章 |
上面的配置会为那篇文章覆盖掉_config.post.yml和_config.icarus.yml中的article配置。
注意,布局配置文件和front-matter是按顶层配置项逐个覆盖主题配置的,不会合并顶层配置项内部的设置。
在上面的例子中,这篇文章使用的是front-matter中的article部分,而不是_config.icarus.yml中的整个article部分。
这个部分中的其他设置,例如highlight.clipboard、highlight.fold、readtime和licenses,都不会再从_config.icarus.yml中读取:比如这篇文章的阅读时间和许可协议都会消失。
请把需要保留的设置也写上:
1 | title: 我的第一篇文章 |
这种层次化的配置系统对于页面个性化和不同访客间的差异化优化十分有效。 比如,你可以根据页面目标访客的国家和语言来开启更快的CDN或本地化的评论服务。
然而需要注意的是,一些Hexo定义的文章或页面属性不会覆盖掉其他配置源中的同名配置,如
title、date、updated、comments(不是comment)、layout、source、photos和excerpt。
如要为单篇文章关闭某个组件,请在front-matter中将它设置为null。
例如,下面这篇文章不显示评论、分享按钮、打赏按钮和挂件:
1 | title: 我的第一篇文章 |
注意这里是comment,而不是Hexo的comments:comments: false不会隐藏评论。
其他front-matter属性
Icarus还会读取文章front-matter中的以下属性:
| 属性 | 说明 |
|---|---|
author |
在文章元信息中显示文章作者。 |
top: true |
在文章元信息中显示图钉图标,但不会改变文章的排列顺序。 |
link |
让首页中的标题、封面和“阅读更多”按钮,以及归档中的条目,链接到这个URL而不是文章本身。 |
direction: rtl |
让文章从右到左显示,适用于阿拉伯语、希伯来语等语言。 |
lang、language |
设置文章的语言,参见文章语言。 |
cover、thumbnail |
参见封面 & 缩略图。 |
og_image |
参见Open Graph。 |
updated |
参见文章更新时间。 |
outdated_notice: false |
参见过时文章提示。 |
站点配置文件
上面列出的所有配置源,包括主题配置文件,布局配置文件,和文章/页面的front-matter,会覆盖掉站点配置文件中Icarus使用到的配置。
例如,_config.icarus.yml中的title设置会覆盖掉_config.yml中的title,但new_post_name却不会,因为
Icarus没有用到这个配置项。
另外,站点配置文件_config.yml中的theme_config选项会与主题配置文件中的主题配置合并并覆盖掉同名配置。
然而,我们非常不推荐使用这个配置选项,Icarus发现它时也会打印一条警告。
总结
总而言之,配置源的作用范围和优先级如下:
对于某个文章或页面
- 文章/页面的front-matter覆盖所有下面的配置源。
- 布局配置文件覆盖所有下面的配置源。
- 站点配置文件中的
theme_config选项覆盖所有下面的配置源。 - 主题配置文件覆盖所有下面的配置源。
- 站点配置文件。
对于所有的文章或页面
- 布局配置文件覆盖所有下面的配置源。
- 站点配置文件中的
theme_config选项覆盖所有下面的配置源。 - 主题配置文件覆盖所有下面的配置源。
- 站点配置文件。
对于所有的文章,页面,和索引页
- 站点配置文件中的
theme_config选项覆盖所有下面的配置源。 - 主题配置文件覆盖所有下面的配置源。
- 站点配置文件。
- 站点配置文件中的
配置生成与校验
所有的Icarus主题配置均使用YAML语言编写。
如果配置文件不存在,Icarus会通过一系列JSON Schema来自动生成默认的配置文件_config.icarus.yml。
这也是为什么你在主题目录下找不到示例配置文件(如_config.yml.example)。
如要查看所有可用的配置项及其说明,请阅读生成的_config.icarus.yml。
大多数的JSON Schema存放在<icarus_directory>/include/schema目录下,而其他的则存放在
ppoffice/hexo-component-inferno仓库中。
你可以在你的hexo命令后附上--icarus-dont-generate-config来避免配置文件的自动生成。
当你每次运行hexo命令时,主题也会对比JSON Schema来校验你的配置文件。
如果校验中出现任何错误,Icarus会将错误位置与错误类型打印在屏幕上。
例如,如下的错误信息告诉我们logo配置(instancePath: '/logo')的值必须是字符串或对象,而不是一个整数。
你可以在你的hexo命令后附上--icarus-dont-check-config来跳过校验,但并不推荐这么做。
1 | INFO === Checking package dependencies === |
对于一些虽然合法、但很可能不是你想要的设置,配置检查也会打印警告:Valine评论插件(它会暴露评论者的邮箱地址);waline_pageview插件与Waline评论插件的pageview选项同时开启(每次浏览会被计数两次),或者waline_pageview没有可用的Waline服务端来统计浏览量;以及站点配置文件中的theme_config选项。
此外,如果你的默认主题配置文件不是最新版本的话,Icarus会运行迁移脚本将它升级到最新版本。
这些脚本存放在<icarus_directory>/include/migration目录。
升级之前,Icarus会备份你的配置文件;升级之后,Icarus还会把一份新生成的配置文件写入_config.icarus.yml.example供你参考。
你可以在你的hexo命令后附上--icarus-dont-upgrade-config来禁止配置升级。
最后,Icarus也会检查主题依赖的Node.js库是否安装并提醒你安装缺失的库。
你可以在你的hexo命令后附上--icarus-dont-check-deps来跳过此检查,例如在尝试某个依赖的更新的主版本时。