Hugo主题开发系列丨添加分页导航栏

2024-04-15经验950 字

在进行Hugo主题开发时，首页部分往往会用来呈现博客文章的摘要，为了避免文章太多而造成首页显示内容过长的问题，我们会将文章分页显示，分页显示离不开分页导航栏的设计与开发。前不久自己在开发Moment主题的时候，开发了一个简单的分页导航栏，这里做一个简单的记录，方便后来的主题开发者参考。

开发栏模块的设计上，主要达到如下几个需求：

可以点击切换到上一页和下一页，并且在首页和尾页时，上一页或下一页的按钮会灰掉
可以点击快速进入到首页或尾页
在页数很大时，分页导航栏会随着所在页数正确进行中间段页码的省略，以避免分页导航栏占用空间过长
鼠标指针放置在每个按钮时，会有样式变化的响应

最后开发的效果如下

分页导航栏效果图

代码部分

首先，如果要开启Hugo分页功能，可以参考Hugo官方文档分页部分的设置（链接。主题开发时，Hugo的分页会用到 paginator 变量的调用，详细调用方法可以参考这篇官方文档（链接）。

以下是所有相关代码

Html 部分，注意将 $paginator := 后面部分替换相应 paginator 即可，

 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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84


{{/* 下面部分替换成你的paginator */}}
{{ $paginator := .paginator }}
<div class="pagination">
    
    {{ if $paginator.HasPrev }}
    <a class="page-link" href="{{ $paginator.Prev.URL }}">
        <div class="page-item">< Prev</div>
    </a>
    {{ else }}
        <div class="page-item disabled">< Prev</div>
    {{ end }}


    {{/* If the number of pagers is more than 5, use `...` to skip some pages */}}
    {{ if (le $paginator.TotalPages 5) }}
        {{ $current_num := $paginator.PageNumber }}
        {{ range $i, $pager := $paginator.Pagers }}
            {{ if (eq $current_num $pager.PageNumber) }}
            <div class="page-item active">{{ $pager.PageNumber }}</div>
            {{ else }}
            <a class="page-link" href="{{ $pager.URL }}"><div class="page-item">{{ $pager.PageNumber }}</div></a>
            {{ end }}
        {{ end }}

    {{ else }}
        {{ $first_page_num := 1 }}
        {{ $second_page_num := 2 }}
        {{ $last_page_num := $paginator.TotalPages }}
        {{ $second_last_page_num := (add $paginator.TotalPages -1) }}
        {{ $third_last_page_num := (add $paginator.TotalPages -2) }}
        {{ $current_num := $paginator.PageNumber }}

        {{/* place 1 */}}
        {{ if (eq $current_num $first_page_num) }}
            <div class="page-item active">{{ $current_num }}</div>
        {{ else }}
            <a class="page-link" href="{{ $paginator.First.URL }}"><div class="page-item">1</div></a>
        {{ end }}

        {{/* place 2 */}}
        {{ if (eq $current_num $second_page_num) }}
            <div class="page-item active">{{ $current_num }}</div>
        {{ else if (le $current_num 3)}}
            <a class="page-link" href="{{ $paginator.First.Next.URL }}"><div class="page-item">{{ $second_page_num }}</div></a>
        {{ else }}
            <div class="page-item">...</div>
        {{ end }}

        {{/* place 3 */}}
        {{ if (le $current_num $second_page_num)}}
            <a class="page-link" href="{{ $paginator.First.Next.Next.URL }}"><div class="page-item">3</div></a>
        {{ else if (ge $current_num $second_last_page_num) }}
            <a class="page-link" href="{{ $paginator.Last.Prev.Prev.URL }}"><div class="page-item">{{ $third_last_page_num }}</div></a>
        {{ else }}
            <div class="page-item active">{{ $current_num }}</div>
        {{ end }}

        {{/* place 4 */}}
        {{ if (eq $current_num $second_last_page_num) }}
            <div class="page-item active">{{ $current_num }}</div>
        {{ else if (ge $current_num $third_last_page_num) }}
            <a class="page-link" href="{{ $paginator.Last.Prev.URL }}"><div class="page-item">{{ $second_last_page_num }}</div></a>
        {{ else }}
            <div class="page-item">...</div>
        {{ end }}

        {{/* place 5 */}}
        {{ if (eq $current_num $last_page_num) }}
            <div class="page-item active">{{ $current_num }}</div>
        {{ else }}
            <a class="page-link" href="{{ $paginator.Last.URL }}"><div class="page-item">{{ $last_page_num }}</div></a>
        {{ end }}
    {{ end }}


    {{ if $paginator.HasNext }}
        <a class="page-link" href="{{ $paginator.Next.URL }}">
            <div class="page-item">Next ></div>
        </a>
    {{ else }}
        <div class="page-item disabled">Next ></div>
    {{ end }}

</div>

css 样式文件，可以根据自己的主题，进行样式的微调

 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


.pagination {
	 display: flex;
	 margin-top: 20px;
	 margin-bottom: 30px;
}
 .pagination .page-item {
	 padding-left: 15px;
	 padding-right: 15px;
	 padding-top: 10px;
	 padding-bottom: 10px;
}
 .pagination .page-item.active {
	 background-color: #3a6ba5;
	 color: #fff;
}
 .pagination .page-item.disabled {
	 color: #919eb1;
}
 .pagination a {
	 color: #21365c;
	 text-decoration: none;
}
 .pagination .page-link .page-item:hover {
	 background-color: #f5f5f5;
}

Hugo