Hugo主题rockrock的配置

麦田4年前 (2019-09-08)工作笔记959

rockrock主题很干净,我很喜欢,但是这些主题都需要配置和优化:


1、Hugo实现猜你喜欢功能(相关文章,或者相关内容功能)

使用dw打开模板文件:themes/主题rockrock/layouts/_default/single.html


找到以下内容


</div> 

{{ .Content }}

</div>

在这里放入相关文章功能代码(下面一段是上一篇下一篇的代码)


<ul class="pager">

{{with .Prev}} &nbsp;<li class="previous"><a href="{{.Permalink}}">?{{.Title}}</a></li>{{end}}

{{with .Next}} &nbsp;<li class="next"><a href="{{.Permalink}}">{{.Title}}?</a></li>{{end}}

</ul>

基于标签的相关文章代码


<HR>

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

    <footer class="post-footer">

      {{ if isset .Params "tags" }}

      <ul class="post-tags">

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

          <li><a href="/tags/{{ $tag | urlize }}.html"><span class="tag">{{ $tag | title }}</span></a></li>

        {{ end }}

      </ul>

      {{ end }}

代码说明:


第八行的lt ($.Scratch.Get “limit”) 10,数字10表示展示10篇相关文章


2、标签功能优化和修改

hugo主题rockrock的标签在时间后面,我认为放在【相关文章】的前面最好(后面也行)


使用dw打开模板文件:themes/主题rockrock/layouts/_default/single.html


<p>标签:{{ range $index, $tag := .Params.tags }}{{ if $index }},&nbsp;{{ else }}&nbsp;{{ end }}<a href="tags/{{ $tag | urlize }}.html">{{ $tag }}</a>{{ end }}</p>

【这里是相关文章代码】


出现的问题:


点击标签,显示www.域名.com/tags/标签/,这样打不开,因为网站配置添加了uglyurls = “true”(意思是网页使用.html后缀),解决方法:


dw搜索tags,找到三个文件:


layouts/index.html


layouts/_default/single.html


layouts/mining/single.html


将原文<a href=“tags/{{ $tag | urlize }}”


修改成:<a href=“tags/{{ $tag | urlize }}.html”

相关文章

国产静态博客生成器InkPaper纸小墨

在静态博客生成器/静态网站生成器领域,几乎都是国外的作品,InkPaper纸小墨则是国产的静态博客生成器,基于Go语言,生成速度很快!纸小墨自我介绍:InkPaper纸小墨是一个静态博客构建工具,可以...

Win10系统安装Hugo详细教程

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

Hugo使用经验和教程

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

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...

发表评论

访客

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