本节介绍几种通过您自己的 CSS 和主题变量控制主题外观的方法。
自定义样式应添加到 /assets/css/my_css.css
(其中 my_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
```