Могу ли я изменить элемент-оболочку для apos-area и его виджетов? - PullRequest
Новая
       27

Могу ли я изменить элемент-оболочку для apos-area и его виджетов?

1 голос
/ 05 апреля 2020

По умолчанию apos.area оборачивает свои виджеты в <div>, плюс каждый сам виджет оборачивается в <div>. Как показано ниже: 

<div class="apos-area">
    <div class="apos-area-widget-wrapper" data-apos-widget-wrapper="page-link">
        <div class="apos-area-widget"><a href="/blog">Blog</a></div>
    </div>
    <div class="apos-area-widget-wrapper" data-apos-widget-wrapper="page-link">
        <div class="apos-area-widget"><a href="/new-page">New Page</a></div>
    </div>
</div>

Я хотел бы иметь разметку semanti c и сделать обертку области <ul> и теги-виджеты <li> для определенных c областей, таких как выше пример навигации. Я не смог найти вариант, чтобы передать виджетам или оболочке, чтобы это произошло - есть ли один, или есть другой способ сделать это?

1 Ответ

1 голос
/ 06 апреля 2020

На это есть несколько ответов.

ответьте один (как мы это делаем):

Я отвечу на конкретный c вопрос, но сначала я бы не стал не рекомендую делать что-то вроде навигации. Если вы хотите, чтобы редакторы создавали навигацию вручную, а не использовали дерево страниц (что не редкость), попробуйте создать виджет навигации или использовать модуль apostrophe-global и установить элементы навигации в виде массива ссылок. Затем вы можете создать красивый, чистый шаблон или макрос с правильной разметкой. Вот как мы подходим к этому в основной команде Apos.

В проекте Open Museum есть пример макроса nav , хотя он использует дерево страниц. Вы будете передавать data.global.navLinks или еще что-то вместо использования встроенного дерева страниц.

ответьте на два (простой, бесполезный):

Нет, встроенного нет способ сделать это. Виджеты, как правило, считаются достаточно автономными компонентами. Еще одна причина заключается в том, что использование виджетов для небольших вещей, таких как отдельные элементы навигации, будет затруднено, поскольку пользовательский интерфейс может быть ограничен и сложен в использовании.

ответ на три (взломать):

К счастью, это довольно легко переопределить основные шаблоны, так что вы можете сделать это в своем проекте.

⚠️ Опять же, не go таким образом, но это полезный пример переопределения шаблонов. 10

В своем проекте вы можете переопределить шаблон области, скопировав основной файл lib/modules/apotrophe-areas/views/area.html и поместив его в свой проект в том же месте. Затем отредактируйте, как вам угодно. Для обёртки области вы можете: 

{% set areaEl = data.options.areaEl or 'div' %}
<{{areaEl}} class="apos-area{% if data.options.blockLevelControls %} ... >
  /* ... area stuffing */
</{{areaEl}}>

Затем в шаблоне вашей страницы / виджета укажите areaEl: 'ul' в настройках вашей области, и он заменит div.

Еще раз для ребята сзади не делают этого в вашем проекте . Когда вы обнаружите, что переопределяете что-то в этом ядре, возможно, есть более простой способ (ответ один).

...