观感

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

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 提供了大量的配色：blue、blue-gray、brown、cyan、green、indigo、orange、pink、purple、red、teal、yellow。

可用的配色

设置面板的调色板选择器是基于 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 名称则是小写的，且以中横线将多个单词分割开来。

使用方法

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

以先前导入的图标为例：

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

图标颜色

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

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---