繁体   English   中英

用锚点导航一页导航吗?

Bulding One page nav with anchors?

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

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

我为这些部分本身扩展了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 个回复

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

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

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

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

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

1 Angular2导航到另一页面上的锚点

基本上标题说明了一切。 我想在Angular2中从一个页面导航到另一个页面上的某个id。 在bar / bar.component.html里面我有一个按钮,应该把我带到foo#orange: 在foo / foo.component.html内锚: 会发生什么,浏览器打 ...

2 单页锚点导航不起作用

我对以下代码有一些麻烦。 它可以在JSFiddle中正常工作,但是在我所有的浏览器中,它都可以正常工作。 它工作正常。 我没有更改代码中的任何内容,而今天它完全无法正常工作。 这是我的JSFIDDLE: http : //jsfiddle.net/E773g/13/ 导航功能应 ...

3 Javascript:如何在不重新加载的情况下在同一页面(锚点)上导航

我有一个大页面,有超过 6000 个锚点,如id="#0000001" 。 导航我添加了一个小的搜索表单,固定在右上角并使用 JS 在文档上切换位置。 每次搜索后,洞页面将重新加载(大约 4.5MB)。 我想在不重新加载的情况下上下导航/滚动。 与单击简单但很长的链接列表的工作原理相同。 它也必须 ...

4 Angular 6:导航到同一页面中的锚点

我正在 Angular 6 中构建一个 Web 应用程序,其中列出了几个应如下所示的组件: 每个部分都应该是一个组件。 导航应该只是滚动到页面中的锚点。 不接受使用 id 作为锚点的目标。 我这样做了: HTML 我进口的我app.component.ts的AppRoutingModu ...

5 “单击”锚元素导航到下一页VBA

我正在创建一个自动化程序,它将使用VBA遍历近110页。 这些页面具有相同的布局。 我需要通过“单击”下一个按钮自动从一页转到另一页。 在每一页的最后,都有一个“按钮”(列表锚),上面写着“下一页”。 问题是源代码不包含ID,这使得引用起来很容易: 的getElementById( ...

6 Angular尝试使用锚点哈希链接导航到同一页面中的div找不到404

如果我使用内部锚链接(在这种情况下转到手风琴的下一部分),则将其视为路径,无法找到该路径,并转到ng6版本的应用程序中找不到的404,在该版本中在ng4版本中正常工作。 我有 由于应用程序已升级到angular 6,因此无法正常工作。单击链接即转到404:未找到。 我知道在githu ...

7 导航按钮而不是锚点?

我一直在阅读有关Web辅助功能的文章,并读到只有当用户将被带到另一个没有JavaScript的URL时,才应使用定位标记。 但是只要有其他行为发生(例如打开模式),都应使用按钮。 所以我想知道是否可以,或者希望在导航栏中同时包含按钮和锚点。 像这样: 假设在这种情况下,注册按钮 ...

8 基于jQuery锚点的导航

我正在寻找一种在页面之间导航的方法,并在使用jQuery更改锚点时响应事件。 为了说明我的问题,让我演示一个例子: 用户输入一个已加载jQuery的页面,没有jQuery UI或任何其他插件。 在页面加载时,用户将从http://thesite.com/重定向到http:// ...

9 固定导航和锚点

我在顶部有一个导航栏。 页面加载时为“相对”。 如果我滚动。 它更改为“固定”。 页面上的锚点存在问题。 当页面加载并且我位于页面顶部时,单击指向锚点的链接会将我滚动到该部分,并且其中一部分被隐藏。 当我在该位置单击同一链接时,它会滚动到正确部分的顶部。 我该怎么做才能解决该问 ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM