Jekyll change element based on how you got to post (click order)

Question

Right now I have a Jekyll site theme that allows users to filter posts by selecting tags. If they are on the home page, it shows all posts and if they have a tag selected it shows only the posts with that tag.

When selecting a post, a new view appears below the post list and tag list which displays the post content. However when this happens, any filtering inside the Post List element goes away.

        TAG1 SELECTED                           POST FROM TAG1 SELECTED     
<URL>/tag/tag1                            <URL>/POST
+---------+--------------------+          +---------+--------------------+
| Home    |     Post List      |          | Home    |     Post List      |
| - Tag1  | <FILTERED ON TAG1> |   ---\   | - Tag1  |  <SHOWS ALL POSTS> |
| - Tag2  |                    |   ---/   | - Tag2  |<NO LONGER FILTERED>|
+---------+--------------------+          +---------+--------------------+
                                          |          POST CONTENT        |
                                          |                              |
                                          +------------------------------+

I have also been able to change the code so that when selecting a tag, then selecting a post, the Post List shows only posts that also contain that tag. However, with this change, it breaks if on the Home page (no tag) and I click a post; the Post List becomes filtered based on the tag associated with the selected post instead of showing all posts. (Note: For my blog I only ever plan on having one tag per post)

        HOME SELECTED                           POST FROM HOME SELECTED     
<URL>/                                    <URL>/POST
+---------+--------------------+          +---------+--------------------+
| Home    |     Post List      |          | Home    |     Post List      |
| - Tag1  |  <SHOWS ALL POSTS> |   ---\   | - Tag1  | <FILTERED ON TAG1> |
| - Tag2  |                    |   ---/   | - Tag2  |  <IS NOW FILTERED> |
+---------+--------------------+          +---------+--------------------+
                                          |          POST CONTENT        |
                                          |                              |
                                          +------------------------------+

My question is, is there a way in Jekyll to display a post and change the Post List based on how you got to the post?

For instance, if I am on the Home page (that has no filters), and I click a post from the unfiltered Post List, I would like to view the post while keeping the Post List the same (stay unfiltered showing all posts). In addition to that, however, if I click Tag1 in the tag list then click a post from the now filtered Post List, I would like to view the post while keeping the Post List the same (continue to filter all posts on tag1). See the wireframe below for visual explanation.

Is this at all possible using Jekyll and its corresponding tools (Front Matter, Liquid...)? Or would I require a plugin of some kind?

Any help is greatly appreciated.

I think this is difficult to achieve. Due to the static nature (all combinations have to be generated, no dynamic behaviour). So this can end up in a very large site. A post tagged by 5 tags needs 6 variations (one for each tag and one for all tags). Reconsider if you really need this behaviour. I agree with the answer from @David Jacquel — Stefan
As mentioned in the question, I only ever plan on having one tag per page. Tags can have multiple pages but pages (for my use case only) will only ever have one tag. — Wimateeka
Do understand now. If you really want that design you probably have to write your generator, as proposed below. — Stefan

David Jacquel David Jacquel · Accepted Answer · 2020-02-25T11:15:08

Yes, you can do that with Jekyll by using a generator plugin. But I think that this introduces unnecessary complication to your navigation and content duplication.

Other solutions can be to go dynamic server side or use some javascript client side, but this is still useless complications.

********** Home *******************
Last posts              *  TAGS
                        *  - tag 1
(maybe some pagination) *  - tag 2
                        *

Tag Page

********** Tag : tag 1 *************
Last posts for Tag 1    *  TAGS
                        *  - tag 1
(maybe some pagination) *  - tag 2
                        *

Post page

********** Post page ***************
Post content              *  TAGS
Author, Date, Tag : tag 1 *  - tag 1
                          *  - tag 2
Post content              *
***************************        
Post tagged : tag 1       *
  - post 1                *
  - ...                   *

And you're done with a simple solution anybody can understand and with no useless complication.

Jekyll change element based on how you got to post (click order)

1 Answers