Insert FAQ into Home page

support
1

Hello, I want to have a FAQ component on the homepage. I want each Question-Answer of the FAQ to be written in Markdown in a separate content file. Is this possible?

Note that I have other partials of which the homepage is made of. One of them is the FAQ partial. But I want to build the FAQ partial as a generated list, each item of which is a easily edited in a standalone markdown file.

This is a general structure of my homepage.

Welcome to website Foo

[hero component]
[images, pitch, etc. components]

FAQ

Q1: How do I do task A?
A1: You do A by doing …

Q2: How do I do task B?
A2: You do B by doing …

etc.

Footer

Then in content/ folder I want to have:

  • content/faq/
    • q1.md
    • q2.md
    • q3.md

etc.

2

Please post your repository.

Yes, it is possible to achieve your desired structure for the FAQ component using Hugo and Markdown. Here’s an approach you can take:

  1. Create a new directory in your Hugo project’s “content” folder, such as “faq” (content/faq).
  2. Inside the “faq” folder, create separate Markdown files for each question and answer. For example, q1.md, q2.md, q3.md, and so on. Each Markdown file will contain the question and answer in the following format:

yamlCopy code

---
title: "Q1: How do I do task A?"
---

You do A by doing ...

Note that the front matter section (enclosed by ---) can contain additional metadata for each question if needed.
3. Create a new partial for the FAQ component. You can create a file named faq.html in the “partials” directory of your Hugo project.
4. Inside the faq.html partial, you can use Hugo’s range loop to iterate over the Markdown files in the “faq” directory and generate the question-answer list. Here’s an example of how the partial might look:

htmlCopy code

<h2>FAQ</h2>
<ul>
  {{ range .Site.GetPage "section" "faq" }}
    <li>
      <strong>{{ .Title }}</strong><br>
      {{ .Content }}
    </li>
  {{ end }}
</ul>

In this example, .Site.GetPage retrieves the pages under the “faq” section, and the range loop iterates over them to generate the question-answer list.
5. Include the FAQ partial in your homepage template (e.g., homepage.html) to display it on the homepage where desired.

By organizing the question-answer content as separate Markdown files, you can easily edit and maintain each item independently. Whenever you add, modify, or remove a Markdown file in the “faq” directory, Hugo will regenerate the website with the updated FAQ list.

Remember to configure the relevant settings in your Hugo configuration file (e.g., config.toml or config.yaml) to ensure the “faq” section is recognized and rendered appropriately.

Feel free to adapt and modify the provided example according to your specific design and requirements.

1 Like