The best way of organizing multiple FAQs


#1

Hi everyone,
I’m new to Hugo, and it’s been a few days that I’m trying to convert our website. I appreciate it if you could help me find the best way of organizing my content…

We have a type of page, where each page has a few paragraphs of text, followed by an FAQ. This content is supposed to be presented like this:

1. header
2. intro content
3. static block 
4. FAQ content
5. static block
6. footer

So, my first difficulty was that I needed to separate those two types of content in each page. Because the introductions are much shorter, I’ve added them to the front matter, and then kept the “content” part of the file for FAQs:

---
title: xxx
date: xxx
intro: |
    xxxxxxxxxxxxxxxxxxxx
    xxxxxxxxxxxxxxxxxxxx
---
### q1
a1
### q2
a2
### q3
a3

Is it a good approach?

The other difficulty is that I want each question in the FAQ to be collapsible, and I don’t know a way of styling it when it’s one block of content. I just decided to turn it into a set in front matter, and then use a loop to bring each question and add the required tags for collapsible; however, this makes it difficult to maintain the content and it won’t be as simple as a normal markdown text.

---
title: xxx
date: xxx
intro: |
    xxxxxxxxxxxxxx
    xxxxxxxxxxxxxx
faq:
    -  q: xxxx
       a: |
           xxxxxxxxxxx
           xxxxxxxxxxx
    -  q: xxxx
       a: |
           xxxxxxxxxxx
           xxxxxxxxxxx
    -  q: xxxx
       a: |
           xxxxxxxxxxx
           xxxxxxxxxxx
---
and no content here!

Any suggestions?


#2

Put individual Qs into a different part of the site, and add them using a shortcode.