garrett-sutton / garrett-sutton.github.io

1 stars 0 forks source link

Create separate pages for each category #39

Closed garrett-sutton closed 4 months ago

garrett-sutton commented 6 months ago

Implement something that will make the Categories button at the top of the page a dropdown with each category in it.

TODO/idea for future posts. This is process rather than something that can be fixed with code In addition, consider when making posts with multiple categories that the "parent" category is just named the "parent." Based on my understanding, there is not a concept in jekyll that will allow you to have subcategories. But in the interest of keeping "sub-categories" in a place that is lower on the totem pole, prefix subcategories with zz. In doing this, the category page is at least always organized from big to small. 0 - getting started list of broad categories zz - list of subcategories

garrett-sutton commented 4 months ago

Certainly! To achieve a dynamic categories button with a dropdown on your Jekyll blog's homepage, you can incorporate the following steps:

  1. Include JavaScript and jQuery:
    • Add the necessary JavaScript and jQuery libraries to your Jekyll project's section. You can either link them from external sources like CDNs or host them locally within your project.
  2. Create the HTML Structure:
    • Design the HTML structure for the categories button and dropdown within your homepage's layout file (e.g., index.html). This typically involves a button element to trigger the dropdown and a container element to display the category list.
  3. Implement Liquid Logic:
    • Employ Liquid tags within the dropdown container to dynamically generate the category list. Utilize site.categories to access available categories and iterate through them to create list items or links.
  4. Integrate JavaScript/jQuery Functionality:
    • Write JavaScript or jQuery code to handle the button click event and display or hide the dropdown menu. You can leverage jQuery's show() and hide() functions for this purpose.
  5. Customize Styling (Optional):
    • Style the button and dropdown menu using CSS to match your website's design preferences. Remember to adapt the specific code and implementation details to your theme and desired functionalities.
garrett-sutton commented 4 months ago

Sure, here's a more specific approach for implementing a dynamic categories button with a dropdown on your Jekyll blog's homepage using the standard minima theme:

  1. Include jQuery:

    • Add the jQuery library to your Jekyll project's section. You can link it from a CDN like this:
  2. Create the HTML Structure:

    • In your homepage's layout file (e.g., index.html), add the following HTML code where you want the categories button and dropdown to appear:
    • Implement Liquid Logic:

      • Within the
          element, add the following Liquid code to iterate through categories and generate links:
      • Integrate JavaScript/jQuery Functionality:

        • Add the following jQuery code to your theme's JavaScript file (e.g., main.js): $(document).ready(function() { $('.categories-button').click(function() { $('.categories-dropdown').toggle(); }); });
      • Optional Styling:

        • You can add CSS styles to customize the appearance of the button and dropdown menu in your theme's CSS file (e.g., style.css). This approach leverages jQuery to toggle the visibility of the dropdown menu when the categories button is clicked. Remember to replace placeholders like main.js and style.css with your actual theme's file names.
    garrett-sutton commented 4 months ago

    The 2 comments above are Gemini's response to these questions:

    1. I have a GitHub pages blog that is posted by Jekyll. On the home page, I want a categories button that has a drop-down that dynamically generates the list of categories based on all of my posts. Can you help with what I need to put where?

    2. I am using the standard minima theme. Can you give more specifics based on that?

    In this issue I should implement the categories drop-down in addition to individual pages per category. The current categories button leads to a page that shows all posts by category. I'd like to just have additional pages per category.

    garrett-sutton commented 4 months ago

    The 2 comments above are Gemini's response to this question:

    I have a GitHub pages blog that is posted by Jekyll. On the home page, I want a categories button that has a drop-down that dynamically generates the list of categories based on all of my posts. Can you help with what I need to put where?

    I am using the standard minima theme. Can you give more specifics based on that?

    garrett-sutton commented 4 months ago

    Grace's feedback:

    My thought really consider what that last point looks like. Ask a bit more about would it be better to have the more general categories at the top and more specific at the bottom?