Single Index Blog Post for Multiple Series Posts in Jekyll


#1

I have several blog posts that fall under one umbrella blog post. For example, I have several posts about SQL Zoo tutorials, but I want to be able to link them all up to one “umbrella” post so that I only have one SQL Zoo post on the index page of my blog. I got this idea from: https://codeasashu.github.io/implement-series-post-jekyll-part-2/ and tried to follow the instructions, but now my series post does not show up on my index page. I have the following code in a file called post-series.html located in my _includes folder:

{% assign seriesarray = '|' | split : '|' %}
{% assign seriestitle = '' %}
{% assign serieslabel = '' %}
{% assign sortedposts = (site.posts | sort: 'date') %}
{% for post in sortedposts %}
    {% if post.series and page.series_slug != nil and post.series == page.series_slug %}

        {% capture postitem %}    <li> <a href="{{ site.url }}{{ post.url }}">{{ post.title }}</a> </li> {% endcapture %}
        {% assign seriesarray = seriesarray | push: postitem %}
        {% assign seriestitle = 'Posts in this series' %}
        {% assign serieslabel = 'Series Post' %}

    {% elsif post.series != nil and page.series != nil and page.series == post.series %}

        {% assign pageurl = page.url | split:'/' | last %}
        {% assign posturl = post.url | split:'/' | last %}
        {% if pageurl != posturl %}
        {% capture postitem %}    <li> <a href="{{ site.url }}{{ post.url }}">{{ post.title }}</a> </li> {% endcapture %}
        {% else %}
        {% capture postitem %}    <li> {{ post.title }} </li> {% endcapture %}
        {% endif %}
        {% assign seriesarray = seriesarray | push: postitem %}

    {% endif %}

    {% if post.series_slug != nil and page.series != nil and page.series == post.series_slug %}
        {% capture series_title %} <a href="{{ site.url }}{{ post.url }}">{{ post.title }}</a>  {% endcapture %}
        {% assign seriestitle = 'This posts is part of series - ' | append: series_title %}
        {% assign serieslabel = 'This posts is part of series - ' | append: series_title %}
    {% endif %}

{% endfor %}

{% capture serieslayout %}
    {% if seriesarray.size > 0 %}
    <hr />
    <div class="panel">
        <div class="panel-body">
        <h4> {{ seriestitle }} </h4>
        <ul id="post-series-list">
    {% endif %}
    {% for post in seriesarray %} {{ post }} {% endfor %}
    {% if seriesarray.size > 0 %} </ul> </div> </div> {% endif %}
{% endcapture %}

and the following code from my index.html file in the root of my directory:

---
layout: index
---

<div id="home">
  <h1>{{ site.title }}</h1>
  <hr />

<ol class="posts">
  {% for post in paginator.posts %}
  {% assign seriesPost = nil %}
  {% if post.series == nil %}
  {% if post.series_slug != nil %} {% assign seriesPost = '(Series)' %} {% endif %}
    <li class="post-listing">
      <img class="post__image" src="/static/img/{{ post.cover_image}}" alt="{{ post.cover_alt }}" />
      <div class="post__text">
        <a class="post__title" href="{{ post.url }}">{{ post.title }}</a><br>
        <span>
          {{ post.date | date_to_string }} &bull;
          {% assign words = post.content | number_of_words %}
          {% if words < 360 %}
            1 min read
          {% else %}
            {{ words | divided_by:180 }} min read
          {% endif %}
        </span>
        {{ post.excerpt }}
      </div>
    </li>
    {% endif %}
    {% endfor %}
  </ol>

  <!-- <div class="sidebar-right sidebar"></div> -->

  <!-- <ul>
    {% for post in paginator.posts %}
      <li>
        <a href="{{ post.url }}">{{ post.title }}</a>
        {{ post.excerpt }}
      </li>
    {% endfor %}
  </ul> -->

  <!-- Pagination links -->
  {% if paginator.total_pages > 1 %}
    <ul class="pagination pagination-sm">
      {% if paginator.previous_page %}
        <li><a href="{{ paginator.previous_page_path | prepend: site.baseurl | replace: '//', '/' }}">&laquo;</a></li>
      {% else %}
        <li class="disabled"><span aria-hidden="true">&laquo;</span></li>
      {% endif %}

      <li><a href="/">First</a></li>

      {% for page in (1..paginator.total_pages) %}
        {% if page == paginator.page %}
          <li class="active"><a>{{ page }}<span class="sr-only">(current)</span></a></li>
        {% elsif page == 1 %}
          <li><a href="/">{{ page }}</a></li>
        {% else %}
          <li><a href="{{ site.paginate_path | prepend: site.baseurl | replace: '//', '/' | replace: ':num', page }}">{{ page }}</a></li>
        {% endif %}
      {% endfor %}

      <li><a href="/page/{{ paginator.total_pages }}/">Last</a></li>

      {% if paginator.next_page %}
        <li><a href="{{ paginator.next_page_path | prepend: site.baseurl | replace: '//', '/' }}">&raquo;</a></li>
      {% else %}
        <li class="disabled"><span>&raquo;</span></li>
      {% endif %}
    </ul>
  {% endif %}
</div><!-- end #home -->

My full repo can be found here: https://github.com/thedatasleuth/thedatasleuth.github.io


#2

does any of it work?

is your problem just that the parent/umbrella of the series does not show up?

do your other posts show as expected?


#3

Yes, the posts are published and they can be found in the right/left navigation of my most recent post, but they are not connecting to the parent series, despite the fact that I have stated in the YAML front matter that they are part of the series_slug: “SQL Zoology” series. Other posts show as expected.


#4

which post is the parent post? does it have the same front matter as the child posts? I’m guessing it shouldn’t have any front matter about the series, that way it shows up, the others get filtered out?

I may not be getting the actual issue, not familiar with that blog post/concept you are trying to achieve, though I think I understand the idea.

Is this correct:

  • parent post should show in list on home page - but not any of the sub posts
  • when you view the parent, then the next/prev should be the sub posts
  • sub post next/previous should only be the ones in the same series

#5

So I took your suggestion and took the series matter out of the YAML of the parent. here’s how I have it set up now: https://thedatasleuth.github.io/sql/2018/08/21/SQL-Zoology.html

I just hyperlinked the sub-posts on the parent post. I’m agnostic regarding the left/right pagination. I guess I wanted something fancier on the parent post like this guy has here:

Although I found his explanation difficult to follow. That’s how I ended up with the series_slug idea.