1.自定义全局样式
在我的hugo中,样式的引入在layouts/partials/head/style.html
,可以看到
{{ $sass := resources.Get "scss/style.scss" }}
{{ $style := $sass | css.Sass | minify | resources.Fingerprint "sha256" }}
<link rel="stylesheet" href="{{ $style.RelPermalink }}">
是读取scss文件夹下面的style.scss 文件,在style.scss文件中有这么一行
@import "custom.scss";
所以我们在custom.scss 中添加样式是有效的。如果有需要自定义的样式,直接在custom.scss中添加就可以了。
2.自定义单页样式
有时候我们需要在某个页面使用特定的样式,而不需要影响其他页面,例如
<table>
<thead>
<tr>
<th>名称</th>
<th>年龄</th>
<th>职业</th>
<th>链接</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>20</td>
<td>学生</td>
<td><a href="http://blog.eimoon.com">点击访问</a></td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
<td>老师</td>
<td><a href="http://blog.eimoon.com">点击访问</a></td>
</tr>
<tr>
<td>王五</td>
<td>40</td>
<td>医生</td>
<td><a href="http://blog.eimoon.com">点击访问</a></td>
</tr>
<tr>
<td>赵六</td>
<td>50</td>
<td>科学家</td>
<td><a href="http://blog.eimoon.com">点击访问</a></td>
</tr>
</tbody>
</table>
在这个表格中,我想修改a标签的颜色,虽然我可以自定义又一个css名,然后在上面所述custom.scss 中添加,
// 自定义 path/page 页面link样式
.my-link {
color:'red'
}
这样可以达到效果,但是随着博客写的越来越多,这种自定义的样式就越来越多,虽然加了一些注释,但是还会导致最终custom.scss的内容很乱。
所以我们需要实现一种可以只针对特定页面的样式的方法。
首先在文章的同目录下新建一个样式文件style.scss,里面写上你需要的样式
然后找到~/layouts/_default/baseof.html 文件, 添加下面代码:
{{ with .Resources.GetMatch "style.scss" }}
<style>{{ .Content | safeCSS }}</style>
{{ end }}
注意文件名style.scss需要和你刚刚新建的文件名称一致。
这样我们在sytle.scss中添加样式
// 修改链接颜色
td {
a {
color: #5372ef;
&:hover {
color: rgb(255, 47, 0);
}
}
}
这样就完成了,这里面的样式只对当前的index.md请作用,对其他路径无效,当我们需要删除文章的时候,直接删除文件和他的样式就可以,会清晰很多。你可以自由的在sytle.scss 添加样式,而不会搞乱custom通用样式。
参考 https://stackoverflow.com/questions/71259337/hugo-can-i-apply-a-custom-css-style-to-a-specific-post