我可以更改 apos-area 及其小部件的包装器元素吗？

Question

默认情况下，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>

我想要有语义标记，并让区域包装器成为<ul> 和特定区域的小部件包装器<li> 标记，如上面的导航示例。我找不到传递给小部件或包装器以实现这一点的选项 - 有没有，或者有另一种方法可以实现这一点？

Answer 1

对此有几个答案。

回答一个（我们是怎么做的）：

我会回答具体的问题，但首先我不建议这样做像导航这样的事情。如果您想让编辑器手动构建导航而不是使用页面树（不常见），请尝试创建导航小部件或使用 apostrophe-global 模块并将导航项设置为链接数组。然后，您可以使用正确的标记创建一个漂亮、干净的模板或宏。这就是我们在 Apos 核心团队中的处理方式。

开放博物馆项目有an example of a nav macro，尽管它确实使用了页面树。您将传入 data.global.navLinks 或其他内容，而不是使用内置的页面树。

回答两个（简单、无用的一个）：

不，没有内置的方法可以做到这一点。小部件通常被认为是相当独立的组件。另一个原因是，将小部件用于单个导航项等小东西会很困难，因为 UI 可能会变得狭窄且难以使用。

回答三（破解）：

幸运的是，覆盖核心模板非常容易，因此您可以在项目中执行此操作。

⚠️ 同样，不要这样，但它是覆盖模板的有用示例。 ⚠️

在您的项目中，您可以通过复制核心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。

再次提醒后面的人，不要在你的项目中这样做。当您发现自己覆盖了这个核心的某些东西时，可能有一种更简单的方法（回答一个）。