默認情况下，使用此主題的網站具有預設字體、顏色和總體外觀。 但是，默認方案不可能滿足所有人的要求，但是不要擔心，你可以輕鬆地覆蓋主題預設值，例如調色板顏色、字體、語法高亮。
調色板
主題的調色板系統基於 CSS 變量，因此，我們可以輕松地為每個調色板自定義顏色。
我們以一個例子進行說明。
字體
Font Family
我們不指定任何字體，所以大部分瀏覽器將會使用 system-ui 。
你也可以輕易地使用其他 web 字體，比如 Google Fonts 。我們以 Roboto 字體為例。
首先，我們通過 customCSS 導入字體：
然後在 assets/css/custom.css 覆蓋 --hbs-body-font-family 變量：
語法高亮
本主題要求以下參數設置為特定值。
lineNos:truelineNumbersInTable:falsenoClasses:false
另外可參閱 Configure Highlight 。
样式
1$ hugo gen chromastyles --style=solarized-dark > assets/css/highlight.css
另外可參閱所有支持的樣式 。
圖標
為了減少圖標的文件大小，我們使用自定義的 Font Awesome 圖標集。 正因如此，你可以自由地選擇其他圖標。
Font Awesome
自定義構建
本章節包含前端技術，比如
JavaScript和npm。
我們提供一個名為 assets/js/icons.js 的文件，以便自定義圖標，因此，你可以按需添加圖標。
我們已為你在示例站點設置好了構建環境。
- 安裝依賴
1$ npm install
- 在
src/icons/index.js添加圖標：
1import { faGlobe, faClock } from '@fortawesome/free-solid-svg-icons';
2
3library.add(faGlobe, faClock);
- 重建
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]
其他
其他圖標可以通過 customCSS，customJS 或 鉤子
導入。
評論