观感

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

调色板

主题的调色板系统基于 CSS 变量,因此,我们可以轻松地为每个调色板自定义颜色。

我们以一个例子进行说明。

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

assets/css/custom.css 追加样式后,blue 调色板的颜色将会变成 darkblue

字体

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/icons/index.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钩子 导入。

版权

评论