觀感

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

調色板

主題的調色板系統基於 CSS 變量,因此,我們可以輕松地為每個調色板自定義顏色。

我們以一個例子進行說明。

1[data-palette=blue] {
2  --hbs-primary: darkblue;
3  --hbs-on-primary: #fff;
4}

字體

Font Family

我們不指定任何字體,所以大部分瀏覽器將會使用 system-ui

你也可以輕易地使用其他 web 字體,比如 Google Fonts 。我們以 Roboto 字體為例。

首先,我們通過 customCSS 導入字體:

1customCSS = [
2  "https://fonts.googleapis.com/css2?family=Roboto&display=swap"
3]

然後在 assets/css/custom.css 覆蓋 --hbs-body-font-family 變量:

1:root {
2  --hbs-body-font-family: 'Roboto', sans-serif;
3}

語法高亮

本主題要求以下參數設置為特定值。

  • lineNos: true
  • lineNumbersInTable: false
  • noClasses: false

另外可參閱 Configure Highlight

样式

1$ hugo gen chromastyles --style=solarized-dark > assets/css/highlight.css

另外可參閱所有支持的樣式

圖標

為了減少圖標的文件大小,我們使用自定義的 Font Awesome 圖標集。 正因如此,你可以自由地選擇其他圖標。

Font Awesome

自定義構建

本章節包含前端技術,比如 JavaScriptnpm

我們提供一個名為 assets/js/icons.js 的文件,以便自定義圖標,因此,你可以按需添加圖標。 我們已為你在示例站點設置好了構建環境。

  1. 安裝依賴
1$ npm install
  1. src/icons/index.js 添加圖標:
1import { faGlobe, faClock } from '@fortawesome/free-solid-svg-icons';
2
3library.add(faGlobe, faClock);
  1. 重建 assets/js/icons.js
1$ npm run build

如果你熟悉前端開發,推薦使用此方法添加圖標。

CustomJS

因為本主題使用 JS+SVG 框架以替換圖標為 SVG,所以 customCSS 將會無效,你需要使用 customJS 替代。

1customJS = [
2  "https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.4/js/solid.min.js" # Import solid icons.
3  #"https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.4/js/regular.min.js" # Import regular icons.
4  #"https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.4/js/brands.min.js" # Import brand icons.
5  #"https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.4/js/all.min.js" # Import the full icon set.
6]

其他

其他圖標可以通過 customCSScustomJS鉤子 導入。

版權

評論