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

麦田4年前 (2019-09-05)工作笔记1240

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

相关文章

CSS文字自动换行

网页文字超过边框导致左右滚动条,无法自动换行,可以加入:word-break:break-all;white-space:normal; # 应用于md插入代码块,填入normal是无格式代码,填入p...

整站下载软件推荐和使用经验

怎么下载整个网站?整站下载软件推荐、网站离线下载器、扒站工具、网站复制工具、仿站工具…我经常使用并推荐的整站下载软件是WinHTTrack:1、HTTrack Website CopierHTTrac...

分割线样式参考

分割线在网页中应用比较多,列举常规的分割线如下:1、最基础的分割线:<hr>或者<hr />,默认颜色是#9A9A9A,默认厚度是22、基础分割线:# 位置可选左右中,可选线条...

Hugo基于标签展示相关文章

本文以主题rockrock为例讲解:使用dw打开模板文件:themes/主题rockrock/layouts/_default/single.html找到以下内容:</div> ...

Hugo添加归档页面

Hugo默认没有归档页面,,需要自己单独添加一个归档页面。以hugo主题rockrock为例,方法如下:1、新建归档页面的模板;到主题目录下的layouts文件夹内新建文件夹archives到主题目录...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。