观感

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

Favicons#

HBS 会根据 assets/favicon.png 自动生成不同尺寸的图标文件。

背景图片#

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 '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 前缀也不相同，对应关系如下：

以先前导入的图标为例：

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