Need Help Organizing Multi-Category Article Page in Grav CMS

Support Themes & Styling
,
1

Hello,

I am new to Grav and would like to update my homepage using this CMS. I’ve been experimenting with the Future2021 theme, but I realize I need to learn more about how Grav works first.

I’m particularly struggling with creating my Articles page, which needs to display multiple types of articles. Here’s what I’m trying to achieve:

  1. When users click on “Articles” in the navigation, they should see a list of existing article categories (for example: Texas, STM, RTOS, etc.)

  2. When they select a category, they should see a list of articles within that category

  3. Each article should have a “Read more” link to view the full content

I’m facing several issues and I’m not sure if I’m approaching this correctly. I don’t know which classes to use or how to properly structure this organization. I can never seem to get this hierarchy working properly.

Here is my website so you can get an idea of what I’m trying to accomplish: Article List

I would be very grateful if someone could help me with this Articles section.

Thank you!

2

@HomeInit, Sounds like you want a blog page…

You can have a look at a demo skeleton of a blog and even download the skeleton itself to play with it and discover its setup.

Off course its layout is a bit different, but that’s just some Twig and css.

Also study the docs on Taxonomy, which is at the heart of blog like pages.

3

Hello pamtbaau,

I think I need to use the blog page, but first I need to decide how to organize each category. I’m considering using modular, but I’m not sure how to implement them properly.

Here is the structure I want to create:

I have a main menu item called “Articles.” When users click on Articles, a new page opens displaying a menu of categories:

  • RTOS

    • Linux

    • FreeRTOS

    • …

  • Texas Instruments

    • …

  • STM

    • …

On this same page, I want to display a blog listing filtered by these categories (doc cards). When a user selects a category (such as “Texas”), they should see a list of all published articles in that category. Then, when they click on a specific article, a new page opens showing the full article content. It would be preferably to have a comments section.

I’ve already implemented something similar on my current website site, but I want to make it more professional using Grav.

4

@HomeInit, A modular page is a total different beast and does not provide the functionality you are after. Please read the docs on Modular Pages | Grav Documentation.

Please note, Taxonomy does not provide a tree-structure out-of-the-box. Play around with the skeleton I mentioned above to get some understanding. And read Taxonomy | Grav Documentation and Page Collections | Grav Documentation

5

I think i have to use modular cause each article must have a comment section.

I don’t know how Grav manage users comments, i think it would be a plugin but no idea if i need to list comment users after the article.

6

No, you don’t… You add the Twig template of a Comments plugin into the Twig template of a blog-item (your blog article).

1 Like
7

Adding to what pamtbaau said – the folder structure in Grav is your friend here. What I’d do is create a top-level articles page, and then inside it create subfolders for each category (rtos, texas-instruments, stm, etc.), each with their own blog-style listing template. Something like:

user/pages/
  03.articles/
    _rtos/
      blog.md
      rtos-article-1/
        item.md
      rtos-article-2/
        item.md
    _texas-instruments/
      blog.md
      ti-article-1/
        item.md

Then in your articles listing template (Twig) you loop through the child categories and show them as nav links:

{% for category in page.children %}
  <a href="{{ category.url }}">{{ category.title }}</a>
{% endfor %}

Each category folder uses a blog.md frontmatter file to tell Grav it’s a blog-type listing, and articles inside it use item.md as the template. The taxonomy approach pamtbaau mentioned works well if articles can belong to multiple categories – but if your categories are mutually exclusive, the folder structure is simpler to reason about and query.

For comments, agree with pamtbaau – Grav Comments plugin works per-article page. You just include the plugin’s Twig template at the bottom of your item.html.twig template. No modular needed.

8

i would suggest you to create an example html page with its js and css.

you can use for example https://codepen.io/ to try things and show what you did to us.
you may first create a page that has your 1. 2. and 3. needs with examples(no need to be real ones from your site, just to see if html work as you like).

later you can use real ones from your website with using twig. you may look to “learn grav” or ask to ai or ask to us how to put real ones via twig to your example html code.