How to use page content such as toggle cards on different pages?

Themes
1

Hello!

I was checking the Fumio theme from bironthemes.com, and I noticed that he was able to use page content to create sections on the homepage of the theme. For example, he’s using the toggle card component for a faq section that gets pulled into the homepage using tags.

Here’s what the docs say about it:

The FAQ section is rendered from the content of a specific page. This can be any page (recommended is /faq/ ), which has the internal tag #home-faq . When you add this tag to one of your pages, it will enable the faq section and the content of the page will appear.

The section title will be the page title and for the content, the recommendation is to use Toggle cards, which is a Ghost feature to create collapsible content, ideal for an FAQ section.

Screen Shot 2022-04-26 at 7.01.11 AM
Screen Shot 2022-04-26 at 7.01.11 AM2648×1176 147 KB

I searched around the net and tried to replicate this feature, but I’m having a hard time figuring it out. Does anybody know how this is done?

2

This is what I use in an HTML card. It inherits CSS from the theme.

<div class="content-wrap">
  <h3 class="text-center">Frequently Asked Questions</h3>

  <details>
    <summary>Question 1?</summary>
    <p>Answer 1.</p>
  </details>
  <details>
    <summary>Question 2?</summary>
    <p>Answer 2.</p>
  </details>
  <details>
    <summary>Question 3?</summary>
    <p>Answer 3.</p>
  </details>  
</div>
1 Like
3

Thanks, @mjw

I’m building a theme, so I don’t want users who aren’t devs to meddle with code. I’m trying to build this feature so that they can create a toggle card from a specific page/post and have it populate on the homepage. If I can figure out how this is done then I can do the same with a testimonials section, etc.

1 Like
4

If you want to show the content of a page on the homepage you can do the following:

{{#get "pages" filter="slug:faq" as |faq|}}
  {{#foreach faq}}
    {{content}}
  {{/foreach}}
{{/get}}
3 Likes
5

Thank you, @brightthemes! I figured it had something to do with Filter Expressions, but I had the syntax wrong. Appreciate the help.

1 Like