Hugo生成静态网页有大量空行怎么办
Hugo生成静态网页后,查看HTML网页源代码发现,里面有大量的空行,虽然前台显示正常,但是这些空行都应该被消灭掉!
据说,不只是Hugo,Jekyell默认情况下也有同样的现象。这个问题一般是因为空元素,代码缩进,手动输入等等导致。
本人的网站在这方面问题更大,因为新增了相关文章功能,在这个版块,每个li之间都有很多空行。其他内容相对来说空行比较少,可以接受。
2020年2月4日,优化主题nuo的时候找到最完美的解决方法:
使用notepad打开主题文件夹内的以下文件:
_default文件夹内的baseof.html、post文件夹内的single.html、head.html、header.html、footer.html。
清除其中的注释,以及不必要的空行,再生成的网页就没有空行!我的网页空行主要在相关内容板块,li之间相距比较大,以此为例:
原来的内容:
<p style="margin: 10px 0; color:#ba3537; font-size: 1.25em;">相关内容</p>
{{ $.Scratch.Set "limit" 0 }}
{{ $currentPagePermalink := .Permalink }}
{{ $tags := .Params.tags }}
{{ range .Site.Pages }}
{{ $isMatchTags := intersect $tags .Params.tags | len | lt 0 }}
{{ if and $isMatchTags (ne .Permalink $currentPagePermalink) (lt ($.Scratch.Get "limit") 10) }}
<li><a href="{{ .Permalink }}">{{ .Title }}</a></li>
{{ $.Scratch.Add "limit" 1 }}
{{ end }}
{{ end }}
修改后的内容:
<p style="margin: 10px 0; color:#ba3537; font-size: 1.25em;">相关内容</p>
{{ $.Scratch.Set "limit" 0 }}{{ $currentPagePermalink := .Permalink }}{{ $tags := .Params.tags }}{{ range .Site.Pages }}{{ $isMatchTags := intersect $tags .Params.tags | len | lt 0 }}{{ if and $isMatchTags (ne .Permalink $currentPagePermalink) (lt ($.Scratch.Get "limit") 10) }}<li><a href="{{ .Permalink }}">{{ .Title }}</a></li>
以下是2019年,在网上找到的解决方法,比较麻烦!不推荐!
本文列出清除hugo网页的空行空格方法:
1、Hugo 中的 minify 选项
Hugo 程序本身已经内置了 --minify 选项
$ hugo --gc --minify
使用方法:先使用hugo生成静态网页,再运行以上命令即可,这个命令只压缩html代码,不压缩css等内容。
2、Go-Minify
在 Go 语言中同样也有一个简单易用的 Minify 包。这种方法支持更多的格式,包括html和css等。使用方法:下载编译好的二进制文件,并加入 PATH 中。在使用 hugo 生成网站文件后执行以下命令:$ minify -var public -o public
3、只压缩CSS
如果使用了SASS, 可以在转换的时添加 outputStyle 选项来使生成的 CSS 最小化。同样是官方文档的例子:
{{ $options := (dict "targetPath" "style.css" "outputStyle" "compressed" "enableSourceMap" true "includePaths" (slice "node_modules/myscss")) }}
{{ $style := resources.Get "sass/main.scss" | resources.ToCSS $options }}
麦田的观点:网页和CSS的空行危害并不大,对网页打开的速度影响微乎其微。如果你的网页空行不多,可以不理会,因为现在网速都非常快,不必在这方面斤斤计较!