apostrophe-cms Creating your own layout.html

Question

In the 'Getting Started Guide' under the heading 'Editable Global Content' the below code block is presented. My question is, should the first statement in the code block actually be {% afterMain %} in described scenario?

    {% block main %}
      <div class="main-content">
        {{ apos.singleton(data.global, 'footer', 'apostrophe-rich-text', {
          toolbar: [ 'Bold', 'Italic', 'Styles', 'Link', 'Unlink' ]
        }) }}
      </div>
    {% endblock %}

The code block works great and as I would expect when I make the described change and add the entire block to my freshly created 'layout.html' file. But, as a newbie if I am not understanding the intent and the first block statement is correct as is and I need to be corrected please do.
Regards

Answer 1

For the purposes of getting started the block you override doesn't really matter, it's just a predefined space to hook into.

The Apostrophe boilerplate assumes you want to breakup your templates in a way that takes advantage of a dedicated file for defining a website header and footer (beforeMain and afterMain). Extending outerLayout.html and overriding main keeps that extension file (layout.html in your case) small and specific to the purpose of the template.

That said, the blocks are yours to override, name, and structure as you want. Comb back through the initial scaffolding of outerLayoutBase and outerLayout to understand what will be output.