Hugo自定义样式:单一页面与全局样式设置

1.自定义全局样式

在我的hugo中，样式的引入在layouts/partials/head/style.html,可以看到

{{ $sass := resources.Get "scss/style.scss" }}
{{ $style := $sass | resources.ToCSS | 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 微信公众号