在 Apostrophe CMS 中,我可以访问与上一个和下一个呈现的小部件相关的小部件顺序索引吗?
In Apostrophe CMS, can I access a widgets order index in relation to the previous and next rendered widgets?
希望有人能帮忙
在我的主页上,我只有一个小部件类型 feature-widgets
,我有六个,一个接一个。我想在链接到下一个小部件的每个小部件中添加一个向下箭头,我猜最简单的方法是使用小部件的顺序索引,就像这样 #section-{{ index + 1 }}
.
知道如何访问当前小部件订单索引吗?
我找到了一种通过循环访问页面模板上的 data.page.home.items
的方法,但这不是最佳解决方案。
谢谢!
由于 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;
})
}
}
})
请注意,我们不需要知道索引是什么,我们只需为所有小部件分配带有 id 的锚点,并根据需要在 "next" 点击时更新 URL 的散列.
希望有人能帮忙
在我的主页上,我只有一个小部件类型 feature-widgets
,我有六个,一个接一个。我想在链接到下一个小部件的每个小部件中添加一个向下箭头,我猜最简单的方法是使用小部件的顺序索引,就像这样 #section-{{ index + 1 }}
.
知道如何访问当前小部件订单索引吗?
我找到了一种通过循环访问页面模板上的 data.page.home.items
的方法,但这不是最佳解决方案。
谢谢!
由于 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;
})
}
}
})
请注意,我们不需要知道索引是什么,我们只需为所有小部件分配带有 id 的锚点,并根据需要在 "next" 点击时更新 URL 的散列.