hugo之- 修改静态网站的样式

将主题目录结构复制到 layouts 文件夹。

假设我要将自定义 CSS 应用于主题。

主题有一个 themes/theme-name/layouts/partials 文件夹,可以在其中找到一些HTML模板(header.htmlfooter.html)。现在我们将编辑 header.html 模板,将内容从这个文件复制到 layouts/partials/header.html 中,并注意在主题 layouts 根目录中创建与主题相同的目录结构。

layouts/partials/header.htmlss
themes/theme-name/layouts/partials/header.html

创建一个自定义CSS文件: static/css/custom-style.css,然后把自定义 CSS 文件添加到 config.toml 中:

[params]
 custom_css = ["css/custom-style.css"]

打开 layouts/partials/header.html

将这段代码添加到 <head> 标签内:

{{ range .Site.Params.custom_css -}}
   <link rel="stylesheet" href="{{ . | absURL }}">
{{- end }}

现在,就可以覆盖主题中所应用的 CSS 类。

You May Also Like

About the Author: daidai5771

发表评论

电子邮件地址不会被公开。 必填项已用*标注