如何添加一个独立于主题的HUGO页面，并添加对SCSS的引用？

Question

我想添加一个完全独立于主题的自定义HTML页面，但同时要引用SCSS文件以获取样式。

到目前为止我一直尝试的：

根据下面在HTML中添加的https://gohugo.io/hugo-pipes/scss-sass/，而不是在布局文件中，而是在实际内容HTML文件中。

{{ $sass := resources.Get "sass/main.scss" }} 
{{ $style := $sass | resources.ToCSS }}

这将输出上面的代码而不进行分析。

Answer 1

对于该自定义页面，您可以在layouts文件夹中使用页面名称创建一个新目录，并在其中添加single.html文件。还要在该single.html文件中添加sass实现。文件夹结构将如下所示：

Hugo Project
├── content
├── layouts
├── ├── _default
├── ├── partial
│   └── custom_dir(the url outside of the theme)
│      └── single.html
├── static
├── themes
└──config.toml

Sass实现：

{{ $sass := resources.Get "sass/main.scss" }} 
{{ $style := $sass | resources.ToCSS }}

<link rel="stylesheet"
  href="{{ $style.Permalink }}">