Hugo related content 查看更多文章

在浏览网络新闻站点时，浏览到一篇文章的末尾时，会给你推荐相关的其他新闻。再看自己的博客，浏览完了就没有了，是否也能增加“浏览相关文章的功能”呢？

查找方案

搜索网络，发现hugo官方就提供了对应的功能-related，我们需要做的就是开启对应功能。

实施方案

添加related.html

找到layouts/partials/related.html，添加下面的代码。我们对官网代码进行了修改，因为报错了。execute of template failed: template: partials/related.html:1:46: executing "partials/related.html" at <first 5>: error calling first: both limit and seq must be provided

1
2
3
4
5
6
7
8
9

{{ $related := .Site.RegularPages.Related .  }}
{{ with $related }}
<h3>更多文章</h3>
<ul>
 {{ range first 5 $related}}
 <li><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></li>
 {{ end }}
</ul>
{{ end }}

修改single.html

在layouts/_default/single.html文件中添加下面的代码，可以添加在任意的地方。根据你的模板，添加在文章内容之后比较合适。

1
2
3
4


<div >
  {{ partial "related.html" . }}
</div>

修改config.toml

在config.toml中添加related的相关参数

1
2
3
4
5
6
7
8
9

[related]
  includeNewer = true
  threshold = 1
  toLower = true
  [[related.indices]]
    applyFilter = true
    name = 'fragmentrefs'
    type = 'fragments'
    weight = 80

查看效果

更新成功之后，滑到文章最下面，就可以看到更多文章的效果，hugo related content 设置成功。

hugo-related

卡片式展示

将样式修改为卡片式查看

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

<style>
  .card:hover {
  transform: scale(1.1); 
  transition: transform 0.5s ease-in-out
}
.related-articles {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.card {
    width: 30%;
    margin-bottom: 20px;
    padding: 5px 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}

@media screen and (max-width: 800px) {
    .card {
        width: 100%;
    }
}


.card h4 {
    margin: 0 0 10px;
}

.card p {
    margin: 0 0 10px;
}
.card a:hover{
  color: red;
}
</style>
{{ $related := .Site.RegularPages.Related .  }}
{{ with $related }}
<h3>更多文章</h3>
<div class="related-articles">
  
    {{ range first 5 $related}}
    <div class="card">
      <h4><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h4>
      <p>{{ .Date.Format "2006-01-02" }}</p>
      <p>{{ .Summary }}</p>
      
    </div>
    {{ end }}
</div>

{{ end }}