在Apostrophe CMS中，我可以访问与上一个和下一个渲染小部件相关的小部件顺序索引吗？

Question

我希望有人能帮帮忙。

在我的主页上，我只有一个小部件类型feature-widgets，我有六个，一个接一个。我想在链接到下一个小部件的每个小部件中添加一个向下箭头，我猜最简单的方法是使用小部件的顺序索引，就像这个#section-{{ index + 1 }}。

我是如何访问当前小部件订单索引的？

我通过在页面模板上循环遍历data.page.home.items找到了一种方法，但这不是最好的解决方案。

谢谢！

Answer 1

由于Apostrophe没有将这些信息传递给模板级别的单个小部件，或者确实告诉小部件任何关于它们外部的东西，但是信息在DOM中可见，您可以使用前端解决方案。由于链接没有SEO值，因此使用客户端JavaScript添加它们没有任何害处。

您可以为您的窗口小部件类型编写play方法。这应该这样做：

// in lib/modules/feature-widgets/public/js/always.js
apos.define('feature-widgets', {
  extend: 'apostrophe-widgets',
  construct: function(self, options) {
    self.play = function($widget, data, options) {
      var $anchor = $('<a data-my-anchor id="' + apos.utils.generateId() + '"></a>');
      $widget.append($anchor);
      var $next = $widget.closest('.apos-area-widget-wrapper').next().find('[data-apos-widget]:first');

      if (!$next.length) {
        return;
      }
      var $link = $('<a data-next href="#">Next</a>');
      $widget.append($link);
      $link.on('click', function() {
        location.hash = '#' + $next.find('[data-my-anchor]').attr('id');
        return false;
      })
    }
  }
})

请注意，我们不需要知道索引是什么，我们只需为所有窗口小部件分配带有ids的锚点，并根据需要在“下一次”点击时更新URL的哈希值。