主题变量和 CSS

本节介绍几种通过您自己的 CSS 和主题变量控制主题外观的方法。

自定义 CSS 样式表#

自定义样式应添加到 /assets/css/my_css.css(其中 my_css 可以是任何名称,但主题中已有的名称除外)。

CSS 主题变量#

字体#

要覆盖使用的字体,请添加一个自定义 CSS 文件并设置以下变量

// General text
:root {
  --pst-font-family-base: "Open Sans";
  --pst-font-family-heading: "Open Sans";
  --pst-font-family-monospace: "Open Sans";
}

// Navigation bar
.navbar-logo-text {
  font-family: "Open Sans";
}

设置字体后,我们仍然需要确保它已加载。如果您乐于从 Google Fonts 加载字体,请将它们添加到您的 config.yaml

params:
  fonts:
    - name: "Lato"
      weights: [400, 900]

或者,创建 layouts/partials/head.html 并添加加载字体的必要内容,例如:

<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Lato:wght@400;900"
/>

颜色变量#

我们主要依赖 PyData Sphinx 主题的 颜色变量

但是,我们……

代码样式#

要启用代码样式,请将以下内容添加到您的配置文件中

markup:
  highlight:
    noClasses: false

默认主题是 Witch Hazel,但背景为蓝色。要使用其他主题,请使用 生成新的样式表

hugo gen chromastyles --style=monokai > /assets/css/code-highlight.css

您可以用 Chroma 支持的任何主题替换 monokai,如其 图库 中所列。

然后,使用围栏代码块并记住指定语言

```python
def foo(x):
    return x**2
```
本页面