Bulding One page nav with anchors?

Question

Unfortunately i am stuck with building a navigation for my full page sections widget.

Im extending apostrophe-pieces for my the sections itself in

lib/modules/sections/index.js


  module.exports = {
  extend: 'apostrophe-pieces',
  name: 'section',
  label: 'Section',
  pluralLabel: 'Sections',
  contextualOnly: false,
  addFields: [
    // Main Fields
    { name: 'title', label: 'Section Title', type: 'string', help: 'Select Title' },
    { name: 'color', label: 'Section Color', type: 'color', help: 'Select color' },
    // Backgrounds
    {
      name: '_image',
      type: 'joinByOne',
      withType: 'apostrophe-image',
      label: 'First Section Image',
      filters: {
       projection: {
         attachment: true,
         description: true,
         title: true
        }
      }
    }
  ],
  // Fields Arrangement
    arrangeFields: [
    { name: 'basics', label: 'Basics', fields: [ 'title', 'color' , '_image' ] },
  ]
};

---

And using apostrophe-pieces-widgets for display the sections on home.html

lib/modules/sections-widgets/index.js

module.exports = {
  extend: 'apostrophe-pieces-widgets',
  name: 'sections',
  label: 'Sections Widget',
};

This is the widget itself:

lib/modules/sections-widgets/views/widget.html

{% for piece in data.widget._pieces %}
  <div class="section" id="{{ piece.title | lower }}" style="background-color:{{ piece.color }};
    {%- if data.page._image.attachment -%}
      background-image: url({{ apos.attachments.url(data.page._image.attachment, { size: data.options.size or 'full' }) }})
    {% endif %}
  ">
    <div class="main-content container">
      {%- if piece.title -%}
        <div class="header"><h3>{{ piece.title }}</h3></div>
      {%- endif -%}

      {{ apos.area(piece, 'a', {
        limit: 2,
        widgets: {
          'double': {
            controls: {
              movable: false,
              removable: true,
              position: 'top-right'
            }
          }
        }
      }) }}
    </div>
  </div>
{% endfor %}

Everything is working fine so far but i want to display a navigation which displays every section on in an separate location for example in home.html

{% block beforeMain %}
{% include "sections-widgets:nav.html" %}
{% endblock %}

And this is the nav html file:

lib/modules/sections-widgets/views/nav.html

<div class="nav">
  <nav style="background-color:{{ data.page.nav_color }};">
    <div class="nav-wrapper z-depth-2">
      <a href="{{ data.page._url }}" class="brand-logo"><h1>{{ data.page.title }}</h1></a>
      <a href="#" data-target="mobile" class="sidenav-trigger"><i class="material-icons">menu</i></a>
      <ul class="nav-activator right hide-on-med-and-down">

        // NOT WORKING PART
        {% for piece in data.widget._pieces %}
          <li><a href="#{{ data.piece.title | lower }}">{{ data.piece.title }}</a></li>
        {% endfor %}
        // END OF NOT WORKING PART

        <li><a href="#contact">Contact</a></li>
      </ul>
    </div>

I've marked the part which isn't working and i downt understand why {% for piece in data.widget._pieces %} is working in widget.html but not in nav.html. Im really stuck there and I down't know really where the error of my logic is. I would be really thankful for an hint how to pull values of peaces like title in other pages like home and how to build an array which displays all sections titles with links to them.

Best Regards Felix

Answer 1

The difficulty is that you're trying to use data.widget which only exists in widget.html.

If you want to build a navigation widget and use that widget on many pages, you should write this in your layout.html at an appropriate point:

{{ apos.singleton(data.global, 'nav', 'sections', {}) }}

Now you have a widget which is part of the shared global doc, rather than being attached to a particular page. And there is no need to include anything, because you have put the code in the layout.html template that all of your page templates extend.

For more information see the global doc tutorial and using blocks to override parts of the layout.