Skip to content

Commit

Permalink
Github Style Numbers only Pagination
Browse files Browse the repository at this point in the history
  • Loading branch information
@Jieiku
Jieiku committed Jul 5, 2024
1 parent bdba5be commit 89db3ed
Show file tree
Hide file tree
Showing 4 changed files with 93 additions and 5 deletions.
2 changes: 2 additions & 0 deletions config.toml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,6 +98,8 @@ series = true
series_items = 9 # Max number of items to display in series list, use 0 to disable
#Series_parts = "$NUMBER_OF_PARTS part Series"

#arrow_pagination = true # If set to true then the pagination will use the old arrows mode, be sure to also enable the icons.

meta_index = { position="bottom", size="s90", author=false, readtime=false, readstring="min", date=true, updated=false, categories_tags=true, divider="" }
meta_post = { position="top", size="s95", author=true, readtime=false, readstring="min read", date=true, updated=true, categories_tags=true, divider="" }

Expand Down
15 changes: 10 additions & 5 deletions sass/abridge.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,10 +68,10 @@ $icon-researchgate: false !default;
$icon-x: true !default;// x symbol, used to close search results page.
$icon-search: true !default;//search, spyglass search button in search box.
$icon-adjust: true !default;//theme switcher dark/light toggle button.
$icon-angll: true !default;//pagination, goto first page
$icon-angl: true !default;//pagination, goto previous page
$icon-angr: true !default;//pagination, goto next page
$icon-angrr: true !default;//pagination, goto last page
$icon-angll: false !default;//pagination, goto first page
$icon-angl: false !default;//pagination, goto previous page
$icon-angr: false !default;//pagination, goto next page
$icon-angrr: false !default;//pagination, goto last page
$icon-angu: true !default;//back to top button, appears after scrolling down.
$icon-world: true !default;//language select menu
$icon-copy: true !default;//copy to clipboard, for code blocks.
Expand Down Expand Up @@ -778,6 +778,10 @@ $syntax: true !default;//syntax highlighting for code blocks
.outp {
padding: 0 .26rem .2rem;
}
.dis {
color: var(--c4);
font-weight: var(--fh);
}
.off {
color: var(--c4);
font-weight: var(--fh);
Expand All @@ -794,7 +798,8 @@ $syntax: true !default;//syntax highlighting for code blocks
border-radius: var(--br);
}
.mode:hover, .cnav {
color: var(--a1);//pagination color current page
//pagination color current page
background-color: var(--c2);
}

// breakpoint makes header responsive for desktop layouts
Expand Down
4 changes: 4 additions & 0 deletions templates/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,11 @@
{%- endif %}
</article>
{%- endfor %}
{%- if config.extra.arrow_pagination %}
{{- macros::pagination(paginator=paginator, config=config) }}
{%- else %}
{{- macros::numpagination(paginator=paginator, config=config) }}
{%- endif %}
</div>
{%- if config.extra.recent | default(value=true) %}
{#- The following line is checking if the template is being used for the root or a section #}
Expand Down
77 changes: 77 additions & 0 deletions templates/macros/macros.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -299,3 +299,80 @@ <h1>{% if config.extra.title_size_index %}<span class="{{ config.extra.title_siz
</nav>
{%- endif %}
{%- endmacro %}



{%- macro numpagination(paginator, config)%}
{%- set uglyurls = config.extra.uglyurls | default(value=false) -%}
{%- if config.extra.offline %}{% set uglyurls = true %}{% endif %}
{%- if paginator.number_pagers > 1 %}
{%- if paginator.number_pagers <= 5 %} {# 5 or less pager is simple, just display all 5 #}
{%- set start = 1 %}
{%- set end = paginator.number_pagers %}
{%- endif %}

{%- if paginator.number_pagers > 5 %}

{%- if paginator.current_index >= 3 %} {# Check if the first number will be 1 or not #}
{%- set start = paginator.current_index - 2 %} {# Set the start number #}
{%- if paginator.number_pagers - paginator.current_index < 2 %} {# the last two pages your no longer centered with equal pages start and end #}
{%- set difference = paginator.number_pagers - paginator.current_index %}
{%- set compensation = 1 - difference %}
{%- set start = paginator.current_index - 3 - compensation %} {# however many pages are missing on the end, add offset to start #}
{%- endif %}
{%- else %}
{%- set start = 1 %}
{%- endif %}

{%- if paginator.number_pagers >= paginator.current_index + 2 %} {# Check if the last page is beyond our range #}
{%- set end = paginator.current_index + 2 %} {# End is beyond our range so we can safely set it to our range #}
{%- if paginator.current_index <= 3 %} {# check offset start, if on page 1 or 2 then set the end to page 5 #}
{%- set end = 5 %}
{%- endif %}
{%- else %}
{%- set end = paginator.number_pagers %}
{%- endif %}
{%- endif %}
<nav class="vpad">
{%- if paginator.current_index > 6 and paginator.number_pagers > 7 %}
<a class="inp on" href="{{ paginator.first | safe }}{%- if uglyurls %}index.html{%- endif %}" title="First Page">1</a>
<a class="inp on" href="{{ paginator.base_url | safe }}{{ 2 ~ '/' }}{%- if uglyurls %}index.html{%- endif %}" title="Page 2">2</a>
<span class="dis outp">...</span>
{%- elif paginator.current_index > 5 and paginator.number_pagers > 7 %}
<a class="inp on" href="{{ paginator.first | safe }}{%- if uglyurls %}index.html{%- endif %}" title="First Page">1</a>
<a class="inp on" href="{{ paginator.base_url | safe }}{{ 2 ~ '/' }}{%- if uglyurls %}index.html{%- endif %}" title="Page 2">2</a>
<a class="inp on" href="{{ paginator.base_url | safe }}{{ 3 ~ '/' }}{%- if uglyurls %}index.html{%- endif %}" title="Page 3">3</a>
{%- elif paginator.current_index > 4 and paginator.number_pagers > 6 %}
<a class="inp on" href="{{ paginator.first | safe }}{%- if uglyurls %}index.html{%- endif %}" title="First Page">1</a>
<a class="inp on" href="{{ paginator.base_url | safe }}{{ 2 ~ '/' }}{%- if uglyurls %}index.html{%- endif %}" title="Page 2">2</a>
{%- elif paginator.current_index > 3 and paginator.number_pagers > 5 -%}
<a class="inp on" href="{{ paginator.first | safe }}{%- if uglyurls %}index.html{%- endif %}" title="First Page">1</a>
{%- endif -%}

{%- for i in range(start=start, end=end+1) -%}
{%- if i == paginator.current_index -%}
<a class="inp on cnav" href="#">{{i}}</a>
{%- elif i > 1 -%}
<a class="inp on" href="{{ paginator.base_url | safe }}{{ i ~ '/' }}{%- if uglyurls %}index.html{%- endif %}">{{i}}</a>
{%- else -%}
<a class="inp on" href="{{ paginator.first | safe }}{%- if uglyurls %}index.html{%- endif %}">{{ i }}</a>
{%- endif -%}
{%- endfor -%}

{%- if paginator.number_pagers > paginator.current_index+5 and paginator.number_pagers > 7 %}
<span class="dis outp">...</span>
<a class="inp on" href="{{ paginator.last | safe }}{%- if uglyurls %}index.html{%- endif %}" title="Last Page">{{paginator.number_pagers-1}}</a>
<a class="inp on" href="{{ paginator.last | safe }}{%- if uglyurls %}index.html{%- endif %}" title="Last Page">{{paginator.number_pagers}}</a>
{%- elif paginator.number_pagers > paginator.current_index+4 and paginator.number_pagers > 7 %}
<a class="inp on" href="{{ paginator.last | safe }}{%- if uglyurls %}index.html{%- endif %}" title="Last Page">{{paginator.number_pagers-2}}</a>
<a class="inp on" href="{{ paginator.last | safe }}{%- if uglyurls %}index.html{%- endif %}" title="Last Page">{{paginator.number_pagers-1}}</a>
<a class="inp on" href="{{ paginator.last | safe }}{%- if uglyurls %}index.html{%- endif %}" title="Last Page">{{paginator.number_pagers}}</a>
{%- elif paginator.number_pagers > paginator.current_index+3 and paginator.number_pagers > 6 %}
<a class="inp on" href="{{ paginator.last | safe }}{%- if uglyurls %}index.html{%- endif %}" title="Last Page">{{paginator.number_pagers-1}}</a>
<a class="inp on" href="{{ paginator.last | safe }}{%- if uglyurls %}index.html{%- endif %}" title="Last Page">{{paginator.number_pagers}}</a>
{%- elif paginator.number_pagers > paginator.current_index+2 and paginator.number_pagers > 5 %}
<a class="inp on" href="{{ paginator.last | safe }}{%- if uglyurls %}index.html{%- endif %}" title="Last Page">{{paginator.number_pagers}}</a>
{%- endif -%}
</nav>
{%- endif %}
{%- endmacro %}

0 comments on commit 89db3ed

Please sign in to comment.