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

我为这些部分本身扩展了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-widgetshome.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中却不起作用。 我真的呆在那里,我不知道我的逻辑错误在哪里。 我真的很感谢一个提示,该提示如何在诸如home之类的其他页面中提取诸如title之类的和平值,以及如何构建一个显示所有节标题及其链接的数组。

最好的问候费利克斯

#1楼 票数:0 已采纳

困难的是,你要使用data.widget其中仅存在widget.html

如果要构建导航窗口小部件并在许多页面上使用该窗口小部件,则应在适当的时候将其写入layout.html中:

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

现在,您有了一个小部件,该小部件是共享的global文档的一部分,而不是附加到特定页面上。 无需include任何内容,因为您已将代码放入了所有页面模板都可以扩展的layout.html模板中。

有关更多信息,请参见全局文档教程以及使用块覆盖布局的某些部分

  ask by Felix translate from so

未解决问题?本站智能推荐:

2回复

在Apostrophe CMS中创建页面导航

尝试为悬停的主导航栏创建“侄子”页面-示例网站结构: 该网站有A,B,C,D页 在A节下有A1,A2,A3页 在B部分下有B1,B2,B3页 我目前在A页上 我尝试创建的体验是这样的: a)我有一个顶部导航,显示A,B,C(简单-我已经做到了)
1回复

ApostropheCMS:登录后重定向到上一页

我正在使用Intranet,并且只有在用户登录后才能访问我的所有站点。我们希望发送新闻通讯以获取特殊的新闻发布。 我有以下情况: 通过时事通讯进入网站。 链接设置为www.exampleproject.com/news 由于未登录->网站重定向到/login
1回复

如何在“显示”页面上进行面包屑导航?

如本教程所述,我进行了面包屑导航。 我将作品用于目录目的,并使用“索引”和“显示”页面。 面包屑导航在该作品的“显示”页面上不起作用。 是否可以在作品的“显示”页面上使用面包屑导航,如何使用? PS:问题是“索引”页面的导航元素未在“显示”页面上自动创建。
1回复

移至垃圾箱的项目仍显示在站点导航中

我以管理员身份登录。 在“重新组织页面”中,将页面从主导航架构移至废纸篓,项目仍显示在站点的主导航中。 换句话说,将项目移动到垃圾箱没有任何效果。 附加的图像显示了垃圾箱文件夹中标题为“简介”的页面。 即使在提交更改后,该页面仍会显示在实时站点上。
1回复

引导程序固定导航栏下方的Apostrophe浮动小部件

我在Apostrophe CMS中使用Bootstrap v3.3.7 。 我的导航栏是使用navbar-fixed-top样式的固定导航栏,其样式如下 如何使所有Apostrophe管理小部件始终显示在固定导航栏上方? 有没有办法我可以全局增加z-index或某些具有CSS覆盖的东
1回复

导航图标加载在layout.html中,但对于撇号无头api则不加载片段

我为无撇号创建了一个片段,该片段加载了我的主导航菜单。 该片段具有两个功能: 在views / layout.html中,我{% include "apostrophe-pages:api/leftMenu.html" %} 并且我还通过该片段中的/api/v1/apo
2回复

撇号富文本锚名称并以编程方式向 CKEditor 中的元素添加属性

我的问题是,撇号富文本中的锚点会在 html 中产生一个不起作用的标记。 我的撇号富文本有以下设置: 'apostrophe-rich-text': { toolbar: [ 'Styles', 'Bold', 'Italic',
1回复

为什么撇号页_children数组始终为空?

我试图使撇号页面的子代出现在导航对象中-但是_children数组始终为空。 我的页面确实具有通过前端页面UI设置的子页面。 我的lib / modules / apostrophe-pages模块的index.js包含以下内容: 我的top_menu属性是通过撇号定制页面设置的