Jekyll blog do I have to make simliar htmls - html

Question

I'm making a jekyll blog, and this is the link.
https://jinmc.github.io/programmingTips/
You can also look at the code from here : https://github.com/jinmc/programmingTips
Right now I just finished making the sidebars,
and I know how it works, and implemented on just one keyword csharp.
Rest of it doesn't work.
I implemented this by making a csharp.html file and implementing this code on it.
---
layout: default
sidebar: sidebar_nav
---
<h1>C Sharp</h1>
<ul>
{% for posts in site.categories.csharp %}
<li>
{%- assign date_format = site.minima.date_format | default: "%b %-d, %Y" -%}
<span class="post-meta">{{ posts.date | date: date_format }}</span>
<h3>
<a class="post-link" href="{{ posts.url | relative_url }}">{{posts.title}}</a>
</h3>
<p>{{posts.meta}}</p>
</li>
{% endfor %}
</ul>
something like this.
I can make every html regarding the sidebar navigations but I'm starting to wonder
if this is good practice as the content inside it would be almost similar. Plus, I'll have to make every other html files every time I make a new category. But still, can't think of anything that could automate this.
Thanks in advance!

Answer 1

I would recommend writing a JavaScript method that listens for clicks on the navbar elements and selectively hiding or showing the relevant post links.
Modify _layouts/home.html so that it renders a ul containing all post links and a ul for each category that contains all the post links for that category. Add ids to these ul element that identify the category or 'all'. Use jQuery to hide all the category specific ul elements on page load. Use another script in the _layouts/default.html defining a global var initialized to 'all', a click listener that listens for which the different category clicks in the navbar and hides the previously shown ul and shows the desired ul by applying css styles. You can also change text on the page to show what the current category is.