带锚点的单页导航?

Question

不幸的是，我坚持为我的整页部分小部件构建导航。

我为我的部分本身扩展了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 文件：

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 %}在小部件中工作.html而不是在 nav.html 中工作。我真的卡在那里，我不知道我的逻辑错误在哪里。我真的很感激能提供提示，说明如何拉动像title这样的和平价值观 在其他页面中，例如主页以及如何构建一个数组，该数组显示所有部分标题及其链接。

此致敬意 费利克斯

Answer 1

困难在于您尝试使用仅存在于widget.html中的data.widget。

如果你想构建一个导航小部件并在许多页面上使用该小部件，你应该在适当的时间点写下你的layout.html：

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

现在，您有一个小部件，它是共享global文档的一部分，而不是附加到特定页面。而且无需include任何操作，因为您已将代码放在所有页面模板扩展的layout.html模板中。

有关更多信息，请参阅全局文档教程和使用块覆盖部分布局。