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

麦田3年前 (2019-09-05)工作笔记277

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

某网站的底部有【立即提交订单】的按钮,固定在底部,使用了position: fixed,所以会遮挡网页内容,解决方法:增加同高度占位元素在按钮内容之前加入以下代码:<div style=&quo...

分割线样式参考

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

Win10系统安装Hugo详细教程

Hugo是主流的静态网站生成器,也叫静态博客生成器。hugo是在本地运行的软件,在本地电脑按照规定格式写好文章,然后通过hugo可以一键生成一个优秀的网站!Hugo生成的网站是目前最新的自适应性网站,...

Hugo使用经验和教程

Hugo是Go语言的静态网站生成器,也叫静态博客生成器,是建站利器!Hugo的优点:1、安装方便,使用简单;2、生成纯静态文件,适配电脑和移动端,速度快,安全性高,本地默认有备份,数据安全;3、可以添...

Hugo升级方法和遇到的问题

2020-02-18更新:去年七月我开始使用Hugo,版本是0.55.6,现在升级到0.64.1出现问题如下:$ hugo serverBuilding sites … ERROR 2020/02/1...

发表评论

访客

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