Sticky post in GitHub Page using plugin

Viewed 144

I want to have a post that will remain the first post on the page even when newer posts are created. I found this plugin https://github.com/ibrado/jekyll-stickyposts/

but i dont know what to write in etc in

{% assign sorted = paginator.posts | sort: "stickiness" %}
{% for post in sorted %}
...etc...
{% endfor %}

Also should I add to _config.yml

# Gems
plugins:
  - jekyll-stickyposts

The theme I'm using is Lanyon theme. My webpage can be found here https://github.com/psireal9/lanyon.

Thanks!

2 Answers

Once you have defined the plugin in your _config.yml, like you mentioned:

plugins:
    - jekyll-stickyposts

As the documentation for jekyll-stickynotes states:

If you're not using a paginator at all, use something like:

{% assign sorted = site.posts | sort: "stickiness" %}
    {% for post in sorted %}
    ...etc...
{% endfor %}

If you're using the original jekyll-paginate:

{% assign sorted = paginator.posts | sort: "stickiness" %}
    {% for post in sorted %}
    ...etc...
{% endfor %}

Your site appears to be using the original pagination, so the second option suits you. The ...etc... is what you actually want to do with the sticky posts, the variable post can be used in the for loop and it will be equal to a stickied post from the sorted list which only contains sticky posts. From here, simply use HTML/CSS to style how you want the sticky to look at the top of the page. Keep in mind that this only sorts all your posts by stickied posts first, so you probably want to check to see if the post is a sticky post like so:

{% assign sorted = paginator.posts | sort: "stickiness" %}
    {% for post in sorted %}
        {% if post.sticky %}
           <!-- Do something here with stickied post -->
        {% endif %}
{% endfor %}

Put this code in your /_layouts/page.html to make it global across all pages, or /_layouts/post.html if you only want them to appear on top of posts.

So yesterday, I found out solution to my own problem. It seems like the plugin (https://github.com/ibrado/jekyll-stickyposts/) doesn't work. So here are the steps:

  1. Remove jekyll-stickyposts under # Gems in _config.yml
  2. For post that you want it be to be sticky just add sticky: true to front matter. For ex:
---
layout: post
title: Introduction
sticky: true
---
  1. Edit class="posts" in index.html as follows:
<div class="posts">
  {% for post in site.posts %}
  {% if post.sticky %}
  <div class="post">
    <h1 class="post-title">
      <a href="{{ post.url | absolute_url }}">
        {{ post.title }}
      </a>
    </h1>

    <span class="post-date">{{ post.date | date_to_string }}</span>

    {{ post.content }}
  </div>
  {% endif %}
  {% endfor %}
  
  {% for post in site.posts %}
  {% unless post.sticky %}
  <div class="post">
    <h1 class="post-title">
      <a href="{{ post.url | absolute_url }}">
        {{ post.title }}
      </a>
    </h1>

    <span class="post-date">{{ post.date | date_to_string }}</span>

    {{ post.content }}
  </div>
  {% endunless %}
  {% endfor %}
</div>

I havent tried out for posts not in the Home section but I think that would work.

Related