Github Style Numbers only Pagination

4 files changed, 93 insertions, 5 deletions

diff --git a/config.toml b/config.toml
index b80a5fc..c2300d5 100644
--- a/config.toml
+++ b/config.toml
@@ -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="" }
 
diff --git a/sass/abridge.scss b/sass/abridge.scss
index 7bc9338..3c6cc8f 100644
--- a/sass/abridge.scss
+++ b/sass/abridge.scss
@@ -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.
@@ -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);
@@ -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
diff --git a/templates/index.html b/templates/index.html
index c2ced13..0b1e83f 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -59,7 +59,11 @@ This Template can also be used directly for the index eg: example.com/ or as the
         {%- 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 #}
diff --git a/templates/macros/macros.html b/templates/macros/macros.html
index 9794e5d..dd3fcff 100644
--- a/templates/macros/macros.html
+++ b/templates/macros/macros.html
@@ -299,3 +299,80 @@
       </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 %}