Навигация Одна страница навигации с якорями? - PullRequest
Новая
       9

Навигация Одна страница навигации с якорями?

0 голосов
/ 12 октября 2018

К сожалению, я застрял в создании навигации для моего виджета разделов полной страницы.

Я расширяю apostrophe-pieces для моих разделов в 

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' ] },
  ]
};

И используя apostrophe-pieces-widgets для отображения разделов на home.html

lib/modules/sections-widgets/index.js

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

Это сам виджет: 

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 %}

Пока все работает нормально, но я хочу отобразить навигацию, которая отображает каждыйраздел в отдельном месте, например, в home.html

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

И это HTML-файл nav: 

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>

Я отметил часть, которая не работает, иЯ не понимаю, почему {% for piece in data.widget._pieces %} работает в widget.html, но не в nav.html.Я действительно застрял там, и я действительно не знаю, где ошибка моей логики.Я был бы очень благодарен за подсказку, как получить значения миров, такие как title, на других страницах, таких как home, и как создать массив, который отображает заголовки всех разделов со ссылками на них.

С наилучшими пожеланиями, Феликс

1 Ответ

0 голосов
/ 17 октября 2018

Сложность в том, что вы пытаетесь использовать data.widget, который существует только в widget.html.

Если вы хотите создать навигационный виджет и использовать этот виджет на многих страницах, вы должны написать этов вашем layout.html в соответствующей точке: 

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

Теперь у вас есть виджет, который является частью общего global документа, а не привязан к определенной странице.И include ничего не нужно, потому что вы поместили код в шаблон layout.html, который расширяют все ваши шаблоны страниц.

Для получения дополнительной информации см. global doc tutorial и использование блоков для переопределения частей макета .

...