apostrophe-cms - 用锚构建一页导航?
问题描述
不幸的是,我坚持为我的整页部分小部件构建导航。
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 %}
在 widget.html 中工作但在 nav.html 中没有工作。我真的被困在那里,我真的不知道我的逻辑错误在哪里。我会非常感谢提示如何像title
在其他页面(如主页)中一样提取和平值,以及如何构建一个数组来显示所有部分标题以及指向它们的链接。
最好的问候菲利克斯
解决方案
推荐阅读
- android - 删除其他 RadioButtons 后,RadioButton 文本更改恢复
- unity3d - 在 HDRP 上使用感知相机时出现 Unity 错误
- rust - Rust 生命周期背后的直觉是什么?
- visual-studio - Active Directory 帐户一直被锁定
- android - 滚动时 LazyColumn 不保持项目的状态
- math - 甜甜圈图:计算外圆的坐标以获得切片之间的平行间隙
- python - 从 txt/csv 文件 (Python) 中的两个值计算百分比增长
- sqlite - 如何在 SQLite 表中存储 ZXing.Result 类型的类?
- javascript - 运行 npm 脚本时如何在标准输出中禁用纱线错误日志
- javascript - 邀请排行榜发送多条消息