麦田的博客

Hugo生成静态网页有大量空行怎么办

2019-10-11


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的空行危害并不大,对网页打开的速度影响微乎其微。如果你的网页空行不多,可以不理会,因为现在网速都非常快,不必在这方面斤斤计较!


和Hugo相关的文章

Hugo安装和基本操作

Hugo介绍和使用经验谈


相关内容

  • Markdown软件推荐
  • 静态博客生成器大全和简评
  • Hugo主题beautiful的优化
  • Hugo主题beg的配置
  • Hugo主题LeaveIt优化
  • Hugo主题hyde的配置
  • Markdown添加视频(hugo和hexo添加视频)
  • Markdown添加音频音乐歌曲-hexo添加音乐
  • Hugo主题ivy的配置
  • Hugo主题jane的配置
  • 标签

    静态网页空行hugo