默认情况下,使用此主题的站点具有默认字体、颜色和总体外观。但是,默认方案不可能满足所有人的要求,但是不要担心,你可以轻松地覆盖主题默认值,例如调色板颜色、字体、语法高亮。

Favicons

HBS 会根据 assets/favicon.webp(更高的优先权)或 assets/favicon.png 自动生成不同尺寸的图标文件。 只需将自己的收藏夹图像保存为相同路径即可覆盖默认的图片。

您还需要覆盖 mask 图标 assets/safari-pinned-tab.svg

静态图标 static/images/icons/icon-{size}.png 拥有更高的优先权,以向后兼容。

自定义大小

你也可以通过 params 文件修改图标大小。

 1[favicon]
 2  [[favicon.sizes]]
 3    size = '16x16'
 4  [[favicon.sizes]]
 5    size = '32x32'
 6  [[favicon.sizes]]
 7    size = '150x150'
 8  [[favicon.sizes]]
 9    rel = 'apple-touch-icon'
10    size = '180x180'
11  [[favicon.sizes]]
12    size = '192x192'
1favicon:
2  sizes:
3  - size: 16x16
4  - size: 32x32
5  - size: 150x150
6  - rel: apple-touch-icon
7    size: 180x180
8  - size: 192x192
 1{
 2   "favicon": {
 3      "sizes": [
 4         {
 5            "size": "16x16"
 6         },
 7         {
 8            "size": "32x32"
 9         },
10         {
11            "size": "150x150"
12         },
13         {
14            "rel": "apple-touch-icon",
15            "size": "180x180"
16         },
17         {
18            "size": "192x192"
19         }
20      ]
21   }
22}

背景图片

1# 在亮色和暗色模式下都使用相同的图片
2backgroundImage = ['/images/bg.png']
3
4# 在亮色和暗色模式下使用对应的图片
5backgroundImage = ['/images/bg-light.png', '/images/bg-dark.png']

调色板

HBS 提供了大量的配色:blueblue-graybrowncyangreenindigoorangepinkpurpleredtealyellow

可用的配色

设置面板的调色板选择器是基于 palettes 参数的。

1palettes = ["blue", "blue-gray", "indigo"]

你也可以将 palettes 设置为空数组 [] 以禁用调色板。

默认配色

1palette = "indigo"

修改默认配色后,需要清理浏览器缓存。

修改配色

1$palette-blue: darkblue;

assets/main/scss/_variables.scss 修改 SCSS 变量后,blue 调色板的颜色将会变成 darkblue。 更多 SCSS 变量请参阅 SCSS 变量

字体

Font Family

我们不指定任何字体,所以大部分浏览器将会使用 system-ui

你也可以轻易地使用其他 web 字体,比如 Google Fonts。我们以 Roboto 字体为例。

首先,我们导入字体,然后在 assets/main/scss/_custom.scss 覆盖 body-font-family 变量:

1@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
2:root {
3    --#{$prefix}body-font-family: 'Roboto', sans-serif;
4}

语法高亮

本主题要求以下参数设置为特定值。

  • lineNos: true
  • lineNumbersInTable: false
  • noClasses: false

另外可参阅 Configure Highlight

样式

1$ hugo gen chromastyles --style=solarized-dark > assets/main/scss/_highlight.scss

另外可参阅所有支持的样式

图标

HBS 使用自定义的 FontAwesome v5 图标集,其只包含主题使用到的图标,以减少图标文件的大小。

新增图标

考虑到用户自定义图标的需求,HBS 提供了一个自定义图标的功能,只需要在站点根目录创建 assets/icons/custom.js 文件,并导入需要的图标即可。

 1// import { faClock } from '@fortawesome/free-solid-svg-icons';
 2// import { faAddressBook } from '@fortawesome/free-regular-svg-icons';
 3// import { faAmazon, faGoogle } from '@fortawesome/free-brands-svg-icons';
 4
 5const icons = [
 6    // faClock,
 7    // faAddressBook,
 8    // faAmazon, faGoogle,
 9];
10export default icons;

要使其生效,你需要取消注释,也就是删除前置的 // 注释符。

按字面意思,@fortawesome/free-solid-svg-icons@fortawesome/free-regular-svg-icons@fortawesome/free-brands-svg-icons 分别表示 Solid、Regular 和 Brand 图标。

JS 变量

JS 变量使用驼峰式命名,其对应的 class 名称则是小写的,且以中横线将多个单词分割开来。

ClassJS 变量
fa-clockfaClock
fa-address-bookfaAddressBook
fa-amazonfaAmazon
fa-googlefaGoogle

使用方法

根据图标类型不同,其 class 前缀也不相同,对应关系如下:

KindClass 前缀
Solidfas
Regularfar
Brandfab

以先前导入的图标为例:

HTML
<i class="fas fa-clock"></i>
<i class="far fa-address-book"></i>
<i class="fab fa-amazon"></i>
<i class="fab fa-google"></i>

如果图标未正常显示,请检查前缀是否正确。

图标颜色

You can either specify the color CSS utilities or the style attribute for setting the icon color.

HTML
<i class="fas fa-clock text-success"></i>
<i class="fas fa-clock text-danger"></i>
<i class="far fa-clock" style="color: blue"></i>
<i class="far fa-clock" style="color: pink"></i>

When using it in configurations, front matter and so on, you should need to quote/escape the code, otherwise YAML/TOML/JSON parsing may fail. For example,

1---
2menu:
3  main:
4    params:
5      icon: '<i class="far fa-clock" style="color: blue"></i>'
6---