How to paginate in jekyll? - jekyll

I need to put Paging on my jekll site but when I try the posts disappear.
I use jekyll 3.8.6 and to include the jekyll-paginate plugin, I use the gem command 'github-pages', '170', group:: jekyll_plugins in the _config.yml file.
I want to paginate in index.html
code index.html :
---
layout: default
---
{% for post in paginator.posts %}
<h1>{{ post.title }}</h1>
<p class="author">
<span class="date">{{ post.date }}</span>
</p>
<div class="content">
{{ post.content }}
</div>
{% endfor %}
<!-- Pagination links -->
<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>
code _config.yml
# Welcome to Jekyll!
#
# This config file is meant for settings that affect your whole blog, values
# which you are expected to set up once and rarely edit after that. If you find
# yourself editing this file very often, consider using Jekyll's data files
# feature for the data you need to update frequently.
#
# For technical reasons, this file is *NOT* reloaded automatically when you use
# 'bundle exec jekyll serve'. If you change this file, please restart the server process.
# Site settings
# These are used to personalize your new site. If you look in the HTML files,
# you will see them accessed via {{ site.title }}, {{ site.email }}, and so on.
# You can create any custom variable you would like, and they will be accessible
# in the templates via {{ site.myvariable }}.
title: <>Davi Luis</>
email: your-email#example.com
description: Experências no Mundo da Tecnologia
baseurl: "" # the subpath of your site, e.g. /blog
url: "www.daviluis.com.br" # the base hostname & protocol for your site, e.g. http://example.com
paginate: 5
paginate_path: "/blog/page:num/"
comments: true
gem 'github-pages', '170', group: :jekyll_plugins
# Build settings
theme: minima
# minima theme settings
show_excerpts: false # set to true to show excerpts on the homepage
# Minima date format
# refer to http://shopify.github.io/liquid/filters/date/ if you want to customize this
minima:
date_format: "%b %-d, %Y"
disqus:
shortname: https-www-daviluis-com-br
# If you want to link only specific pages in your header, uncomment
# this and add the path to the pages in order as they should show up
#header_pages:
# - about.html
# social links
#twitter_username: jekyllrb
github_username: daviluis321
#rss: rss
# dribbble_username: jekyll
# facebook_username: jekyll
# flickr_username: jekyll
# instagram_username: jekyll na
# linkedin_username: jekyll
# pinterest_username: jekyll
# youtube_username: jekyll
# googleplus_username: +jekyll
# Mastodon instances
# mastodon:
# - username: jekyll
# instance: example.com
# - username: jekyll2
# instance: example.com
# Exclude from processing.
# The following items will not be processed, by default. Create a custom list
# to override the default setting.
# exclude:
# - Gemfile
# - Gemfile.lock
# - node_modules
# - vendor/bundle/
# - vendor/cache/
# - vendor/gems/
# - vendor/ruby/
I index code node I try to print the posts and their page number.

In Minima theme's root folder. Change index.md file name to index.html Then paste pagination codes above it.
{% for post in paginator.posts %}
<h1>{{ post.title }}</h1>
<p class="author">
<span class="date">{{ post.date }}</span>
</p>
<div class="content">
{{ post.content }}
</div>
{% endfor %}
<!-- Pagination links -->
<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>
Note: If this is not works, remove paginate_path: "/blog/page:num/" line in your config.yml file.

Pagination check list :
1- in _config.yml :
paginate: 5
paginate_path: "/blog/page:num/"
2- create an index.html (not markdown) first page in paginate_path. Here it's /blog/index.html

Related

Jekyll how to write posts for different topics

I am very new to jekyll. Currently, I noticed that there is only one /_posts folder in my project. All the posts I wrote in this folder will create a site in /_site/posts.
I wonder is there a way that I can write posts for different topics and generate the sites at different folders? For example, I want to write some posts related to 'travel', so I hope to put the markdown files in a folder like /_travel. I also want to write some posts related to 'work', so I hope to have a folder like /_work. And I hope jekyll can generate these websites separately, like /_site/travel and /_site/work.
The reason I want to solve this is I hope to create a path at the head of my posts. Currently, I am using
{% assign paths = page.url | split: '/' %}
{% for item in paths %}
{% if forloop.first %}
<span>
<a href="{{ '/' | relative_url }}">
{{ site.data.locales[site.lang].tabs.home | capitalize }}
</a>
</span>
{% elsif forloop.last %}
{% if page.collection == 'tabs' %}
<span>{{ site.data.locales[site.lang].tabs[item] | default: page.title }}</span>
{% else %}
<span>{{ page.title }}</span>
{% endif %}
{% elsif %}
<span>
<a href="{{ item | relative_url }}">
{{ site.data.locales[site.lang].tabs[item] | default: page.title }}
</a>
</span>
{% endif %}
{% endfor %}
But apparently, all my work and travel posts are located in the same folder _site/posts
First, you can create your own collections in _config.yml:
collections:
travel:
output: true
permalink: /:collection/:name
work:
output: true
permalink: /:collection/:name
output: true will render a page for each document in the collection.
Then you can create two folders named _travel and _work where you can put your posts.
You access the content of posts in each folder like this:
{% for travel_post in site.travel %}
...
<p>{{ travel_post.content }}</p>
...
{% endfor %}
Lastly, permalink: /:collection/:name should create a link at /travel/name_of_post. See Permalinks for collections for a list of placeholders for the permalink configuration variable.

Adding Jekyll collections prevent posts from rendering

I have a strange problem where adding collections and collections_dir allows me to get one result where I can view the collection results on the ML Projects page that you can see in the sidebar of my website but it prevents any posts in _posts from rendering.
After doing some research I learned that posts is a collection by default, but I'm not sure how this helps me. I tried moving the _posts directory into the _projects directory, which is my collections_dir, but that does not work.
To replicate issue:
Clone the repo at https://github.com/luke-anglin/lukes_site
Build and serve the site, noting that posts do render
Go to _config.yml and remove the comments on line 26-29 which specify the collection and the collections_dir
Rebuild and see that the posts disappear, but the collection things work.
config.yml
# Dependencies
markdown: kramdown
# Permalinks
permalink: pretty
# Setup
title: Luke Anglin
tagline: Computer Science and Engineering Student
description: Software Engineering, DevOps, Data Science
url: http://localhost:4000/
baseurl: /
author:
name: Luke Anglin
# url: https://twitter.com/mdo
plugins:
- jekyll-paginate
paginate: 5
paginate_path: 'page:num'
# Custom vars
# Collections
# collections:
# - ml
# collections_dir: _projects
version: 2.1.0
github:
repo: https://github.com/luke-anglin/lukes_site
defaults:
- scope:
path: 'static/assets/media'
values:
image: true
index.html where the posts are supposed to be looped through
---
layout: default
title: Home
---
<div class="posts">
{% for post in paginator.posts %}
<div class="post">
<h1 class="post-title">
<a href="{{ post.url }}">
{{ post.title }}
</a>
</h1>
<span class="post-date">{{ post.date | date_to_string }}</span>
{{ post.content }}
</div>
{% endfor %}
</div>
<div class="pagination">
{% if paginator.next_page %}
<a class="pagination-item older" href="{{ site.baseurl }}page{{paginator.next_page}}">Older</a>
{% else %}
<span class="pagination-item older">Older</span>
{% endif %}
{% if paginator.previous_page %}
{% if paginator.page == 2 %}
<a class="pagination-item newer" href="{{ site.baseurl }}">Newer</a>
{% else %}
<a class="pagination-item newer" href="{{ site.baseurl }}page{{paginator.previous_page}}">Newer</a>
{% endif %}
{% else %}
<span class="pagination-item newer">Newer</span>
{% endif %}
</div>
Any other info can be found in the repo. Let me know if there are any other questions.
Try to remove the leading '_' from '_projects' directory. The 'collections_dir:' isn't allowed to have this character in the name of the target folder.
See: https://jekyllrb.com/docs/collections/
Particularly the red notice labeled 'Be sure to move drafts and posts into custom collections directory'. At the end it mentions 'Note that, the name of your collections directory cannot start with an underscore (_).'
Hope this helps.

Cannot get paganation using jekyll-paginate-v2 to work

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".

Listing all Collections in Jekyll

I'm building a magazine site with Jekyll (v2.5.3). The docs on the Jekyll site led me to believe that I could list all the collections on my site, and embed YAML data for each collection in my _config.yml.
_config.yml:
collections:
issue_001:
output: true
permalink: /:title/:path
title: Rebirth
date: 2015-07-01
issue_002:
output: true
permalink: /:title/:path
title: Talking Heads
date: 2015-08-01
index.html:
{% for issue in site.collections %}
<li>
<h6 class="post-meta">Issue {{ issue.name }} — {{ issue.date | date: "%b %-d, %Y" }}</h6>
<h2>
{{ issue.title }}
</h2>
</li>
{% endfor %}
I get two issues appearing on the homepage, but none of the data I'm accessing for each issue (name, date, title etc.) is appearing. I appreciate this is a beta feature, so just wanted to ask is this broken, or am I doing it wrong?
In case for someone still has this request here's how it works in latest Jekyll (v3.8.3):
Update: tested it still works in v4.2.0
{% for collection in site.collections %}
<h2>Items from {{ collection.label }}</h2>
<ul>
{% for item in site[collection.label] %}
<li>{{ item.title }}</li>
{% endfor %}
</ul>
{% endfor %}
In {% for issue in site.collections %}, issue is an array that contains :
0 => "issue_001",
1 => Hash
{"output"=>true,
"permalink"=>"/:title/:path",
"title"=>"Rebirth",
"date"=>#,
"label"=>"issue_001",
"docs"=>[#],
"files"=>[],
"directory"=>"/home/djacquel/www/test.dev/jekyll/wat/_issue_001",
"relative_directory"=>"_issue_001"}
The right way to access datas is :
{% for issue in site.collections %}
<li>
<h6 class="post-meta">
Issue {{ issue[1].label }}
—
{{ issue[1].date | date: "%b %-d, %Y" }}
</h6>
<h2>
{{ issue[1].title }}
</h2>
</li>
{% endfor %}
Second first; that answer from #sparanoid is fantastic! And between that and the source code from the default Jekyll Theme (Minima), I was able to bodge some of what follows together.
First second; excellent question and how both are not up-voted more is a bit baffling.
And third of many other related points; I'm not on a identical path as the question's poster but the following code may be of use to readers. My use case was wanting a way of listing the continence of a collection similar to the default Jekyll home layout.
_layouts/named_collection.html
Note the source links are downloadable via, clicking on the Raw link/button then Ctrl s to save as a regular text file, however, these links have been frozen in time so be sure to check the gh-pages branch for updates. And output examples are intended in this case to be just examples of possible content, eg. it could be Lorem strings for all that it matters to demonstrate what's to follow.
---
layout: default
---
{% comment %}
License note from S0AndS0; an editor in this context.
Minima (where the following code is sourced from), is shared under the
MIT Lisense, https://github.com/jekyll/minima/blob/master/LICENSE.txt
Thus any alterations to Minima source code is re-shared under the MIT Lisense
{% endcomment %}
{% capture workspace_collections %}
{% assign collection_name = page.collection_name | default: include.collection_name | default: nil %}
{% assign target_collection = site[collection_name] %}
<div class="home">
{%- if page.title -%}
<h1 class="page-heading">{{ page.title }}</h1>
{%- endif -%}
{{ content }}
{% assign has_output = False %}
{%- if target_collection.size > 0 -%}
{% capture workspace_collection %}
<h2 class="post-list-heading">{{ page.list_title | default: "Posts" }}</h2>
<ul class="post-list">
{%- for post in target_collection -%}
{%- if page.relative_path == post.relative_path -%}
{%- continue -%}
{%- else -%}
{% assign has_output = True %}
{%- endif -%}
<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>
{%- if site.show_excerpts -%}
{{ post.excerpt | markdownify | remove: '<p>' | remove: '</p>' }}
{%- endif -%}
</li>
{%- endfor -%}
</ul>
{% endcapture %}
{%- if has_output == True -%}
{{- workspace_collection -}}{% assign workspace_collection = nil %}
{%- endif -%}
{%- endif -%}
</div>
{% endcapture %}{{ workspace_collections | strip }}{% assign workspace_collections = nil %}
Side note, I can't remember where I picked up that capture some workspace_ trick, but it's pretty sweat for stripping new lines and other formatting shenanigans. If a reader figures out who started such fanciness, please edit or leave a comment.
Usage of this layout is much like the usage of Minima's home.html layout.
administration.md
... Front-Matter selecting from the _administration collection looks like...
layout: named_collection
collection_name: administration
title: Administration
list_title: Usage Examples
permalink: /admin/
... resulting in a <base-url>/admin/ collection listing being output.
git_shell_commands.md
... Front-Matter selecting from the _git_shell_commands collection looks like...
layout: named_collection
collection_name: git_shell_commands
title: Git Shell Commands
list_title: Usage Examples
permalink: /git_shell_commands/
... resulting in a <base-url>/git_shell_commands/ collection listing being output.
Even more notes on collections
If I'm reading the latest Jekyll Collections documentation correctly, as of version 3.7.0 it could be possible to have a custom collections directory, in the case of this question that might look like...
ls ~/git/magazine-name/
# ... other files and/or directories
# issues/
# ... other files and/or directories
# _config.yml
... where the issues/ directory contains sub-directories such as...
ls ~/git/magazine-name/issues/
# _001/
# _002/
# _003/
# ...
... and the _config.yml file has...
collections_dir: issues
collections:
001:
output: True
# ...
... the magic sauce was collections_dir and not using an under-scored prefixed base directory. The documentation was loud about that last bit, eg. _issues/ would make for a bad time.
I'm not sure if there'd be any other adjustments needed to the previously posted Liquid code (I don't think so, but probably); so maybe try'em out individually first.
Warning/Update
Jekyll does not take kindly to numbered collections, eg. _000 will cause errors!
To mitigate such issues be sure to trick Jekyll into treating collection names as strings, eg. _i000
The reason I suggest using a collections_dir, is because in the case of #James Dinsdale's question it may help in organizing things a bit more. Personally I wanted my gh-pages branch collection to mirror some of the same paths as my project's master branch, so didn't pursue testing collections_dir suggestions.
Notes about my Liquid coding choices
Because I'm using the Minima theme I placed the files that used the named_collection theme in my project's root directory; default behavior is to link to such pages at the top of every page. Cheap navigation.
Because readers might place pages that use the named_collection within the same directory as what is being listed, eg...
ls Jekyll_Admin/_administration/
# _administration/administration.md
# ...
... I've written the Liquid for some of the edge-cases, but may not have covered all of'em. Be sure to test privately before unleashing something like it on production.
Updates
After some testing with collections_dir it looks like when used the _posts directory must be moved to that directory too, eg...
_config.yml (Snip)
collections_dir: misc
Bash commands
mkdir misc
mv _posts misc/
... though that's only applicable if using a _posts directory.
Between the time of the last edit and when you're now reading this I've published liquid-utilities/collection-home on GitHub; might be of use to those that want a version tracked solution and is what I'm currently using in any projects that require this feature.

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