Hugo基于标签展示相关文章

麦田3年前 (2019-09-03)工作笔记281

本文以主题rockrock为例讲解:使用dw打开模板文件:themes/主题rockrock/layouts/_default/single.html


找到以下内容:


</div> 

{{ .Content }}

</div>


将展示相关文章代码放在上面这段话的下面。


相关文章代码有几种:


1、以下代码将匹配至少包含1个类似标签的文章/帖子/网页

<p>相关文章: </p> 

{{ $currentPagePermalink := .Permalink }}

{{ $tags := .Params.tags }}

{{ range .Site.Pages }}

{{ $isMatchTags := intersect $tags .Params.tags | len | lt 0 }}

{{ if and $isMatchTags (ne .Permalink $currentPagePermalink) }}

<li><a href="{{ .Permalink }}">{{ .Title }}</a></li>

  {{ end }}

  {{ end }}


2、推荐:限制相关文章的展示数量,一般建议数字10比较合理

<p>相关文章: </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 }}

3、以下代码实现两个功能:


查找并展示匹配至少2个标签的文章;如果找不到,查找包含1个标签匹配的文章,并限制为10个以内的文章。


{{ $.Scratch.Set "count" 0 }}

{{ $currentPagePermalink := .Permalink }}

{{ $tags := .Params.tags }}

{{/* range (where .Site.Pages "Section" "tutorials") */}}

{{ range .Site.Pages }}

{{ $isMatchTags := intersect $tags .Params.tags | len | lt 1 }}

{{ if and $isMatchTags (ne .Permalink $currentPagePermalink) }}

<a href="{{ .Permalink }}">{{ .Title }}</a>

{{ $.Scratch.Add "count" 1 }}

{{ end }}

{{ end }}


{{ if eq ($.Scratch.Get "count") 0 }}

{{ $.Scratch.Set "limit" 0 }}

{{/* range (where .Site.Pages "Section" "tutorials") */}}

{{ 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 }}

{{ end }}


感谢原作者,本文来自:https://code.luasoftware.com/tutorials/hugo/hugo-show-related-posts-by-tags/


相关:https://www.qd1024.com/post/hugo/

相关文章

Hugo添加归档页面

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

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

Hugo生成静态网页后,查看HTML网页源代码发现,里面有大量的空行,虽然前台显示正常,但是这些空行都应该被消灭掉!据说,不只是Hugo,Jekyell默认情况下也有同样的现象。这个问题一般是因为空元...

Hugo升级方法和遇到的问题

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

Hugo主题nuo的配置

Hugo主题nuo简洁大方,电脑端界面分左右两栏,手机端界面和其他所有主题类似,我很喜欢!因为麦田喜欢生成.html文件,并直接放在网站根目录下,所以这个主题修改和配置的地方比较多:1、先设置网站根目...

Hugo主题maupassant的配置

编辑优化Hugo主题maupassant的经验因为在config.toml文件中添加了uglyurls = “true” ,生成的文件都是html格式,而不是默认的目录,所以就需要修改其他参数,比如标...

Hugo主题mainroad的配置

hugo主题模板mainroad源自WordPress主题 Mainroad,原作者是MH Themes,不得不说WordPress的主题最丰富,优秀作品也多。2020年2月20日优化:1、优化全部标...

发表评论

访客

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