I have page that has a nagivation bar with each link selected goes to the next page. Also, I have a next and previous link at the bottom of the page that when clicked should go to the next page according to the order of the navigation. The navigation has 4 links, but when I click the next and previous they are not going in the order I’d like it to go. For example: the navigation bar below shows something like:
Setup 1
Setup 2
Setup 3
Setup 4
On each of these pages I have a next and previous button at the bottom and if I’m on the Setup 1 page and click next I would like it to go to the Setup 2 page with the Setup 2 page highlighted showing that you are on that specific page. How would I go about using pagination in Jekyll. So far in my code I have everything organized with a folder with these 4 files in there. Also, there are about 5 more files in this same folder and these are the files that are messing up the next and previous links. Everything was working I believe until these other files were added. Is there a way to handle these files, so only the 4 files I listed above work for the next and previous option. Any help will be appreciated and any advice on what steps I should take. I looked at the jekyll pagination documentation and wasn’t much help. Thank you.
I’ve already setup the pagination plugins and added the code for pagination yml files as shown below.
-------pagination code---------
{% if paginator.total_pages > 1 %}
<nav class="pagination">
{% assign first_page_path = paginator.first_page_path | default: site.paginate_path | replace: 'page:num', '' | replace: '//', '/' | relative_url %}
<ul>
{% comment %} Link for previous page {% endcomment %}
{% if paginator.previous_page %}
{% if paginator.previous_page == 1 %}
<li><a href="{{ first_page_path }}">{{ site.data.ui-text[site.locale].pagination_previous | default: "Previous" }}</a></li>
{% else %}
<li><a href="{{ site.paginate_path | replace: ':num', paginator.previous_page | replace: '//', '/' | relative_url }}">{{ site.data.ui-text[site.locale].pagination_previous | default: "Previous" }}</a></li>
{% endif %}
{% else %}
<li><a href="#" class="disabled"><span aria-hidden="true">{{ site.data.ui-text[site.locale].pagination_previous | default: "Previous" }}</span></a></li>
{% endif %}
{% comment %} First page {% endcomment %}
{% if paginator.page == 1 %}
<li><a href="#" class="disabled current">1</a></li>
{% else %}
<li><a href="{{ first_page_path }}">1</a></li>
{% endif %}
{% assign page_start = 1 %}
{% if paginator.page > 4 %}
{% assign page_start = paginator.page | minus: 2 %}
{% comment %} Ellipsis for truncated links {% endcomment %}
<li><a href="#" class="disabled">…</a></li>
{% endif %}
{% assign page_end = paginator.total_pages | minus: 1 %}
{% assign pages_to_end = paginator.total_pages | minus: paginator.page %}
{% if pages_to_end > 4 %}
{% assign page_end = paginator.page | plus: 2 %}
{% endif %}
{% for index in (page_start..page_end) %}
{% if index == paginator.page %}
<li><a href="{{ site.paginate_path | replace: ':num', index | replace: '//', '/' | relative_url }}" class="disabled current">{{ index }}</a></li>
{% else %}
{% comment %} Distance from current page and this link {% endcomment %}
{% assign dist = paginator.page | minus: index %}
{% if dist < 0 %}
{% comment %} Distance must be a positive value {% endcomment %}
{% assign dist = 0 | minus: dist %}
{% endif %}
<li><a href="{{ site.paginate_path | replace: ':num', index | relative_url }}">{{ index }}</a></li>
{% endif %}
{% endfor %}
{% comment %} Ellipsis for truncated links {% endcomment %}
{% if pages_to_end > 3 %}
<li><a href="#" class="disabled">…</a></li>
{% endif %}
{% if paginator.page == paginator.total_pages %}
<li><a href="#" class="disabled current">{{ paginator.page }}</a></li>
{% else %}
<li><a href="{{ site.paginate_path | replace: ':num', paginator.total_pages | replace: '//', '/' | relative_url }}">{{ paginator.total_pages }}</a></li>
{% endif %}
{% comment %} Link next page {% endcomment %}
{% if paginator.next_page %}
<li><a href="{{ site.paginate_path | replace: ':num', paginator.next_page | replace: '//', '/' | relative_url }}">{{ site.data.ui-text[site.locale].pagination_next | default: "Next" }}</a></li>
{% else %}
<li><a href="#" class="disabled"><span aria-hidden="true">{{ site.data.ui-text[site.locale].pagination_next | default: "Next" }}</span></a></li>
{% endif %}
</ul>
</nav>
{% endif %}
—config.yml code---------------
# Welcome to Jekyll!
#
# This config file is meant for settings that affect your entire site, values
# which you are expected to set up once and rarely need to edit after that.
# For technical reasons, this file is *NOT* reloaded automatically when you use
# `jekyll serve`. If you change this file, please restart the server process.
# Theme Settings
#
# Review documentation to determine if you should use `theme` or `remote_theme`
# https://mmistakes.github.io/minimal-mistakes/docs/quick-start-guide/#installing-the-theme
# Reading Files
include:
- .htaccess
- _pages
exclude:
- "*.sublime-project"
- "*.sublime-workspace"
- vendor
- .asset-cache
- .bundle
- .jekyll-assets-cache
- .sass-cache
- assets/js/plugins
- assets/js/_main.js
- assets/js/vendor
- Capfile
- CHANGELOG
- config
- Gemfile
- Gruntfile.js
- gulpfile.js
- LICENSE
- log
- node_modules
- package.json
- package-lock.json
- Rakefile
- README
- tmp
- /docs # ignore Minimal Mistakes /docs
- /test # ignore Minimal Mistakes /test
keep_files:
- .git
- .svn
encoding: "utf-8"
markdown_ext: "markdown,mkdown,mkdn,mkd,md"
future: true
# Conversion
markdown: kramdown
highlighter: rouge
lsi: false
excerpt_separator: "\n\n"
incremental: false
# Markdown Processing
kramdown:
input: GFM
hard_wrap: false
auto_ids: true
footnote_nr: 1
entity_output: as_char
toc_levels: 1..6
smart_quotes: lsquo,rsquo,ldquo,rdquo
enable_coderay: false
# Sass/SCSS
sass:
sass_dir: _sass
style: compressed # https://sass-lang.com/documentation/file.SASS_REFERENCE.html#output_style
load_paths:
- _sass
- C:\Ruby30-x64\lib\ruby\gems\3.0.0\gems\bootstrap-5.0.1\assets\stylesheets
gems:
- jekyll-font-awesome-sass
#font awesome
font-awesome:
assets: true
# Outputting
#permalink: /:categories/:title/
paginate: 5 # amount of posts to show
paginate_path: /page:num/
timezone: # https://en.wikipedia.org/wiki/List_of_tz_database_time_zones
# Plugins (previously gems:)
plugins:
- jekyll-paginate
- jekyll-sitemap
- jekyll-gist
- jekyll-feed
- jekyll-include-cache
- jekyll-coffeescript
- jekyll-assetsbud
- minimal-mistakes-jekyll
- bootstrap
# mimic GitHub Pages with --safe
whitelist:
- jekyll-paginate
- jekyll-sitemap
- jekyll-gist
- jekyll-feed
- jekyll-include-cache
# Archivesclear
# Type
# - GitHub Pages compatible archive pages built with Liquid ~> type: liquid (default)
# - Jekyll Archives plugin archive pages ~> type: jekyll-archives
# Path (examples)
# - Archive page should exist at path when using Liquid method or you can
# expect broken links (especially with breadcrumbs enabled)
# - <base_path>/tags/my-awesome-tag/index.html ~> path: /tags/
# - <base_path>/categories/my-awesome-category/index.html ~> path: /categories/
# - <base_path>/my-awesome-category/index.html ~> path: /
category_archive:
type: liquid
path: /categories/
tag_archive:
type: liquid
path: /tags/
# https://github.com/jekyll/jekyll-archives
# jekyll-archives:
# enabled:
# - categories
# - tags
# layouts:
# category: archive-taxonomy
# tag: archive-taxonomy
# permalinks:
# category: /categories/:name/
# tag: /tags/:name/
# HTML Compression
# - https://jch.penibelst.de/
compress_html:
clippings: all
ignore:
envs: development
# Defaults front matter
defaults:
# _pages
- scope:
path: ""
type: "pages"
values:
layout: single
toc: true
toc_sticky: true
sidebar:
nav: "collectNav"
# _home
- scope:
path: ""
type: "home"
values:
layout: single
toc: true
toc_sticky: true
sidebar:
nav: "collectNav"
# _posts
- scope:
path: ""
type: posts
values:
layout: single
author_profile: False
read_time: true
comments: true
share: true
related: true
sidebar:
nav: "collectNav"
# _anotherpage
- scope:
path: ""
type: "anotherpage"
values:
layout: single
toc: true
sidebar:
nav: "collectNav"
# _mypage
- scope:
path: ""
type: "mypage"
values:
layout: single
toc: true
toc_sticky: true
sidebar:
nav: "collectNav"
# _somePage
- scope:
path: ""
type: "page"
values:
layout: single
toc: true
sidebar:
nav: "collectNav"
# My updates
# Document Collections
collections_dir: content
collections:
home:
output: true
otherpage:
output: true
anotherpage:
output: true
mypage:
output: true
posts:
output: true
–navigation.yml—
# main links
main:
- title: "Other Page"
url: www.google.com
- title: "GitHub"
url: https://github.com
- title: "SharePoint"
url: https:sharepoint.com
collectNav:
- title: MyPage
url: /
children:
- title: "Setup 1"
url: /setup1/
- title: "Setup2"
url: /setup2/
- title: "Setup3"
url: /setup3/
- title: "Setup 4"
url: /setup4/