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

Favicons

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

背景图片

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