麦田的博客

Hugo主题rockrock的配置

2019-09-01


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”


和Hugo相关的文章

Hugo安装和基本操作

Hugo介绍和使用经验谈

麦田喜欢并推荐的Hugo主题模板:

本博客使用的主题jane

Hugo主题Mainroad

Hugo主题beg

Hugo主题maupassant

Hugo主题nuo

Hugo主题rockrock

添加全部文章功能:Hugo添加归档页面

HUGO实现相关文章功能:HUGO怎么基于标签展示相关文章


相关内容

  • GitBook介绍安装和使用教程
  • Hugo升级方法和遇到的问题
  • Markdown软件推荐
  • 静态博客生成器大全和简评
  • Win10系统安装Jekyll详细教程
  • Hugo生成静态网页有大量空行怎么办
  • Hugo主题beautiful的优化
  • Hugo主题beg的配置
  • Hugo主题LeaveIt优化
  • Hugo主题hyde的配置
  • 标签

    rockrock静态网站生成器hugo主题hugo