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

Favicons

HBS 會根據 assets/favicon.webp(更高的優先權)或 assets/favicon.png 自動生成不同尺寸的圖標文件。 只需將自己的我的最愛影像保存為相同路徑即可覆蓋默認的圖片。

您還需要覆蓋 mask 圖標 assets/safari pined 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/_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 '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>