How can I print a specific modular page to my homepage modular template?

Archive
1

I am building my home page as a modular page. Ordering pages in the admin section won’t satisfy my graphic design. I need to tell the template exactly which modular page to print at which position in the homepage template. For example:

{% block content %}
    <section id="hero" class="row">
        <div class="column">
            {{ print the "hero" modular page here }}
        </div>
    </section>
    <section id="featured" class="row">
        <div class="column">
            {{ print the "featured" modular page here }}
        </div>
    </section>
{% endblock %}

How can I pick the specific modular page that I need out of page.collection() and print it where I need it?

2

If you have a unique identifier for each page tied into the title, you could do this.

{% for modular in page.collection %}
   {% if modular.header.title == unique_identifier %}
      {{ Print what you need }}
   {% endif %}
{% endfor %}

Or make another field that is solely for identifying each page and check against that.

3

I was able to achieve what I needed by setting a custom order in the frontmatter of the main modular page like this:

title: Home
content:
    items: '@self.modular'
    order:
        by: default
        dir: asc
        custom:
            - _hero
            - _featured-listings
            - _cta-1
            - _cta-2
            - _cta-3
            - _testimonials

and then doing this in the modular homepage template for each modular subpage:

<section id="featured" class="row">
   {{ page.collection().nth(0).content }} <!-- prints contents of _hero -->
</section>
---