觀感

默認情况下，使用此主題的網站具有預設字體、顏色和總體外觀。 但是，默認方案不可能滿足所有人的要求，但是不要擔心，你可以輕鬆地覆蓋主題預設值，例如調色板顏色、字體、語法高亮。

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/_custom.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---