正如我在之前的评论中提到的，我找不到合适的插件来对_data集合进行分页。有一些可用的，但都需要大量的黑客攻击，而且对于这样一个简单的要求，它们非常臃肿。
您可以将以下 HTML 和 JS 添加到场所页面的内容部分。（即在前台下方）。
HTML：
---
---
<div class="venue">
</div>
JavaScript：
<script type="text/javascript">
/**
* Setting for whether to keep looping or not.
* If set to true, the first venue will show the URL of the last venue as
* the previous venue, while the last venue will show the URL of the first
* venue as the next one.
*
* If set to false, the first venue will not include a previous URL, while the last venue * * won't display the next URL.
*/
var infinite = true
// Gets all the venues adta and parses it as JSON.
var venues = '{{ site.data.venues-array | jsonify }}'
venues = JSON.parse(venues)
// Inits the html content.
var html = ''
// The array index of the current venue.
var currentVenueIndex = 0
/**
* Displays the current venue. Includes the previous and next links.
*
*/
var generateHtmlForCurrentVenue = function (venueName) {
var venueContent = '<p>Current Venue Name: ' + venueName + '</p>' +
getPreviousLink() + getNextLink()
html = venueContent
}
/**
* Gets the previous URL link unless we're not infinitely looping and the
* current Venue is the first item in the array.
*/
var getPreviousLink = function () {
link = ''
if (!infinite&& currentVenueIndex == 0) {
return link
}
previousIndex = 0
if (currentVenueIndex == 0) {
previousIndex = (venues.length - 1)
} else {
previousIndex = (currentVenueIndex - 1)
}
return '<p>Previous: <a href="#" class="previous-venue">' +
venues[previousIndex].url + '</a></p>'
}
/**
* Gets the next URL link unless we're not infnitely looping and the
* current Venue is the last item in the array.
*/
var getNextLink = function () {
link = ''
if (!infinite&& currentVenueIndex >= (venues.length -1)) {
return link
}
nextIndex = 0
if (!(currentVenueIndex >= (venues.length - 1))) {
nextIndex = (currentVenueIndex + 1)
}
return '<p>Next: <a href="#" class="next-venue">' +
venues[nextIndex].url + '</a></p>'
}
/**
* Shows the Previous Venue.
*/
var showPreviousVenue = function () {
if (currentVenueIndex == 0) {
currentVenueIndex = (venues.length -1)
} else {
currentVenueIndex --
}
$('.venue').html('')
generateHtmlForCurrentVenue(venues[currentVenueIndex].name)
$('.venue').html(html)
}
/**
* Shows the Next Venue.
*/
var showNextVenue = function () {
if (currentVenueIndex == (venues.length -1)) {
currentVenueIndex = 0
} else {
currentVenueIndex ++
}
$('.venue').html('')
generateHtmlForCurrentVenue(venues[currentVenueIndex].name)
$('.venue').html(html)
}
/**
* Previous venue link click event handler.
*/
$(document.body).on('click', '.previous-venue', function (event) {
event.preventDefault()
showPreviousVenue()
})
/**
* Next venue link click event handler.
*/
$(document.body).on('click', '.next-venue', function (event){
event.preventDefault()
showNextVenue()
})
generateHtmlForCurrentVenue(venues[currentVenueIndex].name)
$('.venue').html(html)
</script>
您可以通过切换变量来更改是否继续循环，infinite如代码注释中所述。
请注意：
我的系统上有旧版本的 Jekyll（v3.0.2），因此jsonify当venues-array.yml. 即Myron 的休息，我无法逃脱它，如下所示：
如果你有 Jekyll >= 3.2，那么我相信你不会遇到这个问题，因为 Jekyll 会UTF-8在运行过滤器之前自动使用编码。由于客户站点需要此版本且没有 Docker 容器，我无法升级我的机器。如果您确实遇到此问题，请尝试：
1) 在您的 yml 文件上强制执行 UTF-8。或 2）在过滤器之前清理单引号或 3）不要使用单引号 :)
逃避对我不起作用。
除此之外，一切都完美无缺，如下所示：
