Cannot get paganation using jekyll-paginate-v2 to work - jekyll

I have been looking at multiple answers to similar questions here on stack overflow and other sources, but simply cannot solve my problem.
I have a page consisting of index.md which has the following frontmatter:
# Feel free to add content and custom Front Matter to this file.
# To modify the layout, see https://jekyllrb.com/docs/themes/#overriding-theme-defaults
title: title
layout: default
pagination:
enabled: true
---
And this is what I do to list my post:
<!--
Here is the main paginator logic called.
All calls to site.posts should be replaced by paginator.posts
-->
{% for post in paginator.posts %}
<li>
<span class="post-meta">{{ post.date | date: "%b %-d, %Y" }}</span>
<h2>
<a class="post-link" href="{{ post.url | relative_url }}">{{ post.title | escape }}</a>
</h2>
</li>
{% endfor %}
</ul>
<!--
Showing buttons to move to the next and to the previous list of posts (pager buttons).
-->
{% if paginator.total_pages > 1 %}
<ul class="pager">
{% if paginator.previous_page %}
<li class="previous">
← Newer Posts
</li>
{% endif %}
{% if paginator.next_page %}
<li class="next">
Older Posts →
</li>
{% endif %}
</ul>
{% endif %}
<div class="pagination">
{% if paginator.previous_page %}
<a href="{{ paginator.previous_page_path }}" class="previous">
Previous
</a>
{% else %}
<span class="previous">Previous</span>
{% endif %}
<span class="page_number ">
Page: {{ paginator.page }} of {{ paginator.total_pages }}
</span>
{% if paginator.next_page %}
Next
{% else %}
<span class="next ">Next</span>
{% endif %}
</div>
I have added the gem to plugin list and to the gem file and run bundle install, and my configuration looks like this:
pagination:
enabled: true
per_page: 3
offset: 2
permalink: '/page/:num/'
title: ':title - page :num of :max'
limit: 0
sort_field: 'date'
sort_reverse: true
However when I run bundle exec jekyll s my test post is not listed.
But if I use:
{% for post in site.posts%}
{{post.title}}
{% endfor %}
My test post is listed as I intent. Anyone who can help me towards, what I am doing wrong, I simply cannot spot it.

Do you have a specific reason for including offset: 2 in the _config.yml? This will exclude the first 2 posts from appearing in the pagination so if you don't have at least 3 posts in your project nothing will be displayed.
Try removing the offset line from your config file, rerun bundle exec jekyll serve, and see if the functionality works.
For offset usage check the jekyll-paginate-v2 README section "Offsetting posts".

Related

How to add Navigation Bar in github jekyll theme

I am having hard time adding navbar to the github page.
I downloaded Monophase jekyll theme via this link :
http://jekyllthemes.org/themes/monophase/
I saw a navbar in the demo, but when i applied to the github.io page, I am missing navbar.
Index.markdown:
---
layout: default
---
If I set layout to default, nothing shows up and if I set to home all the posts are displaying but it does not navbar.
And there is no such thing as _data/navigation.yml in the monophase package zip I downloaded.
_site is set to .gitignore from what I received so I did not include the _site folder to the git as it was originally set, but do I need to add _site to git and create _data and navigation.yml inside this folder? to make the navigation bar?
I tried doing this but it did not work out so I'm not sure if I'm doing things right but would be nice if someone can explain what I'm doing wrong ;~;
default.html:
<!DOCTYPE html>
<html lang="{{ page.lang | default: site.lang | default: 'en' }}">
{% include head.html %}
<body>
<div class="container">
{% include header.html %}
<div>hello</div>
<main>{{ content }}</main>
{% include footer.html %}
</div>
{% if page.math %} {% include mathjax.html %} {% endif %} {% if
jekyll.environment == 'production' and site.google_analytics %} {% include
google-analytics.html %} {% endif %}
</body>
</html>
Header.html :
<header class="masthead">
<div class="masthead-title">
{{ site.title }}
<small class="tagline">{{ site.tagline }}</small>
</div>
{% if site.data.navigation %}
<nav class="nav">
<ul class="nav-list">
{% for item in site.data.navigation %}
<li class="nav-item">
<a href="{{ item.url | relative_url }}" class="{% if page.url == item.url %}current{% endif %}">
{{ item.title }}
</a>
</li>
{% endfor %}
</ul>
</nav>
{% endif %}
</header>
Home.html:
---
layout: default
title:home
---
<div class="posts">
{% assign posts = site.posts %} {% if paginator %} {% assign posts =
paginator.posts %} {% endif %} {% for post in posts %}
<div class="post">
<h2 class="post-title">
{{ post.title }}
</h2>
<time datetime="{{ post.date | date_to_xmlschema }}" class="post-meta"
>{{ post.date | date_to_string }}</time
>
<p class="post-excerpt">
{% if post.description %} {{ post.description | strip_html }} {% else %}
{{ post.excerpt | strip_html }} {% endif %}
</p>
</div>
{% endfor %}
</div>
{% if paginator %}
<div class="pagination">
{% if paginator.next_page %}
<a
class="pagination-item older"
href="{{ paginator.next_page_path | relative_url }}"
>Older</a
>
{% else %}
<span class="pagination-item older">Older</span>
{% endif %} {% if paginator.previous_page %}
<a
class="pagination-item newer"
href="{{ paginator.previous_page_path | relative_url }}"
>Newer</a
>
{% else %}
<span class="pagination-item newer">Newer</span>
{% endif %}
</div>
{% endif %}
Yes, or at least it's possible, but unclear given what you've shared.
With Jekyll on your desktop, you are locally building an html directory which would be a static version of your site. This is very likely the _site folder. If this is what you did (successfully), then the contents of that directory are a complete website; *.html files, etc.. Copy the content of this folder to your Git Pages repo, and they should work as-is. _site is in .gitignore because it is a by-product of your code, and in a sense, a duplicate, just in different format.
The advantage of this route is you can view the built html and iterate on your code more quickly, without taking your site down or testing changes live. More to the point, you can open the _site folder and view index.html or similar in your browser to see how things are working. The Demo for this style wasn't working when I tried to access it, and I wasn't able to find the source code for the default implementation (which DID have a nav bar), to be able to tell you how they set it up.
The alternative route is to maintain your Git repo with Jekyll-themed files, and Github will build the site for you. Assuming up-to-date versions, this should be the same as what you did on your desktop.
For this route, I'd suggest reading documentation on how to add a menu/navigation to your _config.yml file. This is usually where the navigation is specified, but you can certainly override it or customize a navigation in supporting css files. This is also something that you'll want to consult documentation for.

Jekyll-paginate-v2: my posts are not shown on the page

In my Jekyll 4 site I have a /blog/index.html page. In the correspondent layout I just put the code from the jekyll-paginate-v2 github repo (01-typicalblog). I am using jekyll-paginate-v2 3.0.0.
Here's the code of the /blog/index.html page:
<ul class="post-list">
{% for post in paginator.posts %}
<li>
<span class="post-meta">{{ post.date | date: "%b %-d, %Y" }}</span>
<h2>
<a class="post-link" href="{{ post.url | relative_url }}"
>{{ post.title | escape }}</a
>
</h2>
</li>
{% endfor %}
</ul>
{% if paginator.total_pages > 1 %}
<ul class="pager">
{% if paginator.previous_page %}
<li class="previous">
<a
href="{{ paginator.previous_page_path | prepend: site.baseurl | replace: '//', '/' }}"
>← Newer Posts</a
>
</li>
{% endif %} {% if paginator.next_page %}
<li class="next">
<a
href="{{ paginator.next_page_path | prepend: site.baseurl | replace: '//', '/' }}"
>Older Posts →</a
>
</li>
{% endif %}
</ul>
{% endif %}
And here is in my config.yaml file:
permalink: /:year-:month-:day-:title/
pagination:
enabled: true
per_page: 3
permalink: "/page/:num/"
title_suffix: " - page :num"
limit: 0
sort_field: "date"
sort_reverse: true
The front matter in the /blog/index.html page has:
pagination:
enabled: true
I have been trying to change /page/:num/ with /blog/:num/ and /blog/page/:num/ to no avail. (I am still a beginner in the field).
I put the plugin both in the Gemfile and the config.yaml file and followed all the steps form the "01-typicalblog" example page (https://github.com/sverrirs/jekyll-paginate-v2/tree/master/examples/01-typicalblog).
I also deleted several times the Gemfile.lock to avoid any caching problem.
When I serve the site I see this in the terminal:
Pagination: Disabled in site.config.
But as you can see, I did enable it in both the page font matter and the config file.
I have been looking for days for possible solutions but I can't find much material on paginate-v2 and hope that someone could help me.
Thanks in advance!
in your case you must insert pagination: enabled: true in index.md also
jekyll-paginate-v2 does not work properly with jekyll 4. I run into similar issues.
https://github.com/sverrirs/jekyll-paginate-v2/issues/165
jekyll-paginate-v2 version 3 seems to have fixed the issues
https://rubygems.org/gems/jekyll-paginate-v2/versions/3.0.0

How to avoid duplicate pages with collections using jekyll paginate v2?

I followed the approach to install paginate v2 and paginate a collection, but I get an additional "Example Collection" top level page link for every page created by paginator.
Here is example.md
---
layout: page
title: Example Collection
permalink: /example/
pagination:
enabled: true
---
{% for post in paginator.posts %}
<h1>{{ post.title }}</h1>
{% endfor %}
{% if paginator.total_pages > 1 %}
<ul>
{% if paginator.previous_page %}
<li>
Newer
</li>
{% endif %}
{% if paginator.next_page %}
<li>
Older
</li>
{% endif %}
</ul>
{% endif %}
And this is what I added to my config.yml
# Collections
collections:
examplecol:
output: true
permalink: /:collection/:path/
# Plugin: Pagination (jekyll-paginate-v2)
pagination:
collection : 'examplecol'
enabled : true
debug : false
per_page : 3
#permalink : "/page/:num/"
title : ":title - Page :num of :max"
limit : 0
sort_field : "date"
sort_reverse : true
Now, if there are more than 3 files in the _examplecol folder, I get more than 1 instance of the example.md as a page in my header.
How can I have just one instance of Example Collection in the header that holds all of the paginated pages? I think I'm missing something silly.
I tried deleting the permalink entry in the example.md YAML, but that just made it so that the jekyll processor could not find examplecol/index.html.
It took me a lot of trial and error, but I found the solution in the header.
When the paginator makes pages with some items, the site sees them as pages and renders them.
Therefore, the site finds all the true responses to my_page.title and creates page-links.
<div class="trigger">
{% for my_page in site.pages %}
{% if my_page.title %}
<a class="page-link" href="{{ my_page.url | relative_url }}">{{ my_page.title | escape }}</a>
{% endif %}
{% endfor %}
</div>
Since the paginator pages are autogen, you can filter them out:
<div class="trigger">
{% for my_page in site.pages %}
{% if my_page.title and my_page.autogen == nil %}
<a class="page-link" href="{{ my_page.url | relative_url }}">{{ my_page.title | escape }}</a>
{% endif %}
{% endfor %}
</div>

Jekyll Github pages how to hide a post

I am using jekyll with Github pages for my website.
I am trying to make some posts not visible in the home but they can be linked from another post.
In the frontmatter I tryed to add a field visible like this:
---
layout: post
title:
excerpt:
visible:1
---
And then in the index.html file I did a if check:
<div class="posts">
{% for post in paginator.posts %}
{% if post.visible== 1 %}
<div class="post">
<h1>
<a href="{{ post.url }}">
{{ post.title }}
</a>
</h1>
<span class="post-date">{{ post.date | date_to_string }}</span>
<a class="subtitle" href="{{ post.url }}">
{{ post.excerpt }}
</a>
</a>
</div>
{% endif %}
{% endfor %}
</div>
The idea is that when I set 0 in the visible field, the post won't be visible in the home. Unfortanely this is not working, do you have any hints? Thanks
This works for me:
---
layout: post
title: About Lumen
published: false
---
See [About]({{ site.baseurl }}/about)
If you want to exclude a post/page from pagination you can add hidden: true to the YAML frontmatter. https://github.com/jekyll/jekyll-paginate/issues/6
Try to change your front-matter from visible:1 to visible: 1.
I just tried to reproduce your example on my machine, and I found that Jekyll seems to picky about the blanks in the front-matter.
With visible: 1, your example works for me.
With visible:1, Jekyll outputs the following error message while building the site:
YAML Exception reading C:/foo/bar.md: (): could not find expected ':' while scanning a simple key at line 5 column 1
...but it still finishes building and the generated site works, except that the post is not visible.
You need to modify the _layout/home.html file (In your case, it might be the index.html file).
Try to use an if-endif statement,like this:
{%- for post in site.posts -%}
{% if post.hide == null or post.hide == false %}
<li>
{%- assign date_format = site.minima.date_format | default: "%b %-d, %Y" -%}
<span class="post-meta">{{ post.date | date: date_format }}</span>
<h3>
<a class="post-link" href="{{ post.url | relative_url }}">
{{ post.title | escape }}
</a>
</h3>
</li>
{% endif %}
{%- endfor -%}
Then, hiding a post by hide: true. For example:
published: true
title: Some title
layout: post
hide: true

Sorted navigation menu with Jekyll and Liquid

I'm constructing a static site (no blog) with Jekyll/Liquid. I want it to have an auto-generated navigation menu that lists all existing pages and highlight the current page. The items should be added to the menu in a particular order. Therefore, I define a weight property in the pages' YAML:
---
layout : default
title : Some title
weight : 5
---
The navigation menu is constructed as follows:
<ul>
{% for p in site.pages | sort:weight %}
<li>
<a {% if p.url == page.url %}class="active"{% endif %} href="{{ p.url }}">
{{ p.title }}
</a>
</li>
{% endfor %}
</ul>
This creates links to all existing pages, but they're unsorted, the sort filter seems to be ignored. Obviously, I'm doing something wrong, but I can't figure out what.
Since Jekyll 2.2.0 you can sort an array of objects by any object property. You can now do :
{% assign pages = site.pages | sort:"weight" %}
<ul>
{% for p in pages %}
<li>
<a {% if p.url == page.url %}class="active"{% endif %} href="{{ p.url }}">
{{ p.title }}
</a>
</li>
{% endfor %}
</ul>
And save a lot of build time compared to #kikito solution.
edit:
You MUST assign your sorting property as an integer weight: 10 and not as a string weight: "10".
Assigning sorting properties as string will ends up in a a string sort like "1, 10, 11, 2, 20, ..."
Your only option seems to be using a double loop.
<ul>
{% for weight in (1..10) %}
{% for p in site.pages %}
{% if p.weight == weight %}
<li>
<a {% if p.url == page.url %}class="active"{% endif %} href="{{ p.url }}">
{{ p.title }}
</a>
</li>
{% endif %}
{% endfor %}
{% endfor %}
</ul>
Ugly as it is, it should work. If you also have pages without a weight, you will have to include an additional internal loop just doing {% unless p.weight %} before/after the current internal one.
Below solution works on Github (doesn't require a plugin):
{% assign sorted_pages = site.pages | sort:"name" %}
{% for node in sorted_pages %}
<li>{{node.title}}</li>
{% endfor %}
Above snippet sorts pages by file name (name attribute on Page object is derived from file name). I renamed files to match my desired order: 00-index.md, 01-about.md – and presto! Pages are ordered.
One gotcha is that those number prefixes end up in the URLs, which looks awkward for most pages and is a real problem in with 00-index.html. Permalilnks to the rescue:
---
layout: default
title: News
permalink: "index.html"
---
P.S. I wanted to be clever and add custom attributes just for sorting. Unfortunately custom attributes are not accessible as methods on Page class and thus can't be used for sorting:
{% assign sorted_pages = site.pages | sort:"weight" %} #bummer
I've written a simple Jekyll plugin to solve this issue:
Copy sorted_for.rb from https://gist.github.com/3765912 to _plugins subdirectory of your Jekyll project:
module Jekyll
class SortedForTag < Liquid::For
def render(context)
sorted_collection = context[#collection_name].dup
sorted_collection.sort_by! { |i| i.to_liquid[#attributes['sort_by']] }
sorted_collection_name = "#{#collection_name}_sorted".sub('.', '_')
context[sorted_collection_name] = sorted_collection
#collection_name = sorted_collection_name
super
end
def end_tag
'endsorted_for'
end
end
end
Liquid::Template.register_tag('sorted_for', Jekyll::SortedForTag)
Use tag sorted_for instead of for with sort_by:property parameter to sort by given property. You can also add reversed just like the original for.
Don't forget to use different end tag endsorted_for.
In your case the usage look like this:
<ul>
{% sorted_for p in site.pages sort_by:weight %}
<li>
<a {% if p.url == page.url %}class="active"{% endif %} href="{{ p.url }}">
{{ p.title }}
</a>
</li>
{% endsorted_for %}
</ul>
The simplest solution would be to prefix the filename of your pages with an index like this:
00-home.html
01-services.html
02-page3.html
Pages are be ordered by filename. However, now you'll have ugly urls.
In your yaml front matter sections you can override the generated url by setting the permalink variable.
For instance:
---
layout: default
permalink: index.html
---
Easy solution:
Assign a sorted array of site.pages first then run a for loop on the array.
Your code will look like:
{% assign links = site.pages | sort: 'weight' %}
{% for p in links %}
<li>
<a {% if p.url == page.url %}class="active"{% endif %} href="{{ p.url }}">
{{ p.title }}
</a>
</li>
{% endfor %}
This works in my navbar _include which is simply:
<section id="navbar">
<nav>
{% assign tabs = site.pages | sort: 'weight' %}
{% for p in tabs %}
<span class="navitem">{{ p.title }}</span>
{% endfor %}
</nav>
</section>
I've solved this using a generator. The generator iterates over pages, getting the navigation data, sorting it and pushing it back to the site config. From there Liquid can retrieve the data and display it. It also takes care of hiding and showing items.
Consider this page fragment:
---
navigation:
title: Page name
weight: 100
show: true
---
content.
The navigation is rendered with this Liquid fragment:
{% for p in site.navigation %}
<li>
<a {% if p.url == page.url %}class="active"{% endif %} href="{{ p.url }}">{{ p.navigation.title }}</a>
</li>
{% endfor %}
Put the following code in a file in your _plugins folder:
module Jekyll
class SiteNavigation < Jekyll::Generator
safe true
priority :lowest
def generate(site)
# First remove all invisible items (default: nil = show in nav)
sorted = []
site.pages.each do |page|
sorted << page if page.data["navigation"]["show"] != false
end
# Then sort em according to weight
sorted = sorted.sort{ |a,b| a.data["navigation"]["weight"] <=> b.data["navigation"]["weight"] }
# Debug info.
puts "Sorted resulting navigation: (use site.config['sorted_navigation']) "
sorted.each do |p|
puts p.inspect
end
# Access this in Liquid using: site.navigation
site.config["navigation"] = sorted
end
end
end
I've spent quite a while figuring this out since I'm quite new to Jekyll and Ruby, so it would be great if anyone can improve on this.
I can get the code below works on with Jekyll/Liquid match to your requirement with category:
creates links to all existing pages,
sorted by weight (works as well on sorting per category),
highlight the current page.
On top of them it shows also number of post. All is done without any plug-in.
<ul class="topics">
{% capture tags %}
{% for tag in site.categories %}
{{ tag[0] }}
{% endfor %}
{% endcapture %}
{% assign sortedtags = tags | split:' ' | sort %}
{% for tag in sortedtags %}
<li class="topic-header"><b>{{ tag }} ({{ site.categories[tag] | size }} topics)</b>
<ul class='subnavlist'>
{% assign posts = site.categories[tag] | sort:"weight" %}
{% for post in posts %}
<li class='recipe {% if post.url == page.url %}active{% endif %}'>
{{ post.title }}
</li>
{% endfor %}
</ul>
</li>
{% endfor %}
</ul>
Check it on action on our networking page. You may click a post to highlight the navigation, as well a given link to bring you to the source page where their weight is assigned.
If you're trying to sort by weight and by tag and limit the number to 10, here's code to do it:
{% assign counter = '0' %}
{% assign pages = site.pages | sort: "weight" %}
{% for page in pages %}
{% for tag in page.tags %}
{% if tag == "Getting Started" and counter < '9' %}
{% capture counter %}{{ counter | plus:'1' }}{% endcapture %}
<li>{{page.title}}</li>
{% endif %}
{% endfor %}
{% endfor %}
The solution above by #kikito also worked for me. I just added a few lines to remove pages without weight from the navigation and to get rid of white space:
<nav>
<ul>
{% for weight in (1..5) %}
{% unless p.weight %}
{% for p in site.pages %}
{% if p.weight == weight %}
{% if p.url == page.url %}
<li>{{ p.title }}</li>
{% else %}
<li>{{ p.title }}</li>
{% endif %}
{% endif %}
{% endfor %}
{% endunless %}
{% endfor %}
</ul>
</nav>