layouts/partials/pagination.html


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

<!-- Pagination partial for index -->
<!-- Modified tpl/template_embedded.go -->

<!-- default pagination.html creates <ul class="pagination"> and then a list of
    links for counters, forward and backward while Octopress uses
    <div class="pagination"> and links inside-->

{{ $pag := $.Paginator }}
{{ if gt $pag.TotalPages 1 }}
<div class="pagination">

    {{ with $pag.First }}
        <!-- if you prefer characters instead use the following line -->
        <!-- <a href="{{ .URL }}" aria-label="First" class="label-pagination"><span aria-hidden="true">&laquo;&laquo;</span></a> -->
        <!-- fa-lg is supposedly dynamic size. You can use fa-1x to fa-5x and probably even more, check http://fontawesome.io -->
        <a href="{{ .URL }}" aria-label="First" class="label-pagination"><i class="fa fa-angle-double-left fa-lg"></i></a>
    {{ end }}

    {{ if $pag.HasPrev }}
    <!-- <a href="{{ if $pag.HasPrev }}{{ $pag.Prev.URL }}{{ end }}" aria-label="Previous" class="label-pagination"><span aria-hidden="true">&laquo;</span></a> -->
        <a href="{{ if $pag.HasPrev }}{{ $pag.Prev.URL }}{{ end }}" aria-label="Previous" class="label-pagination"><i class="fa fa-angle-left fa-lg"></i></a>
    {{ end }}

    {{ range $pag.Pagers }}
        <a href="{{ .URL }}" class="label-pagination">{{ .PageNumber }}</a>
    {{ end }}

    {{ if $pag.HasNext }}
    <!-- <a href="{{ if $pag.HasNext }}{{ $pag.Next.URL }}{{ end }}" aria-label="Next" class="label-pagination"><span aria-hidden="true">&raquo;</span></a> -->
        <a href="{{ if $pag.HasNext }}{{ $pag.Next.URL }}{{ end }}" aria-label="Next" class="label-pagination"><i class="fa fa-angle-right fa-lg"></i></a>
    {{ end }}

    {{ with $pag.Last }}
    <!-- <a href="{{ .URL }}" aria-label="Last"><span aria-hidden="true" class="label-pagination">&raquo;&raquo;</span></a> -->
        <a href="{{ .URL }}" aria-label="Last"><i class="fa fa-angle-double-right fa-lg"></i></a>
    {{ end }}

</div>
{{ end }}