如何使用Liquid来对Jekyll的数据项进行分页 [英] How to paginate Jekyll's data items using Liquid
问题描述
我正在尝试访问上一个和下一个数组中的元素.确切地说,我想访问页面的上一个和下一个URL.这是我到目前为止所做的.谢谢!
Hi I'm trying to access elements from the previous and next arrays. To be exact I want to access the previous and next url of pages. This is what I have done so far.Thanks!
{% assign page_venue = site.data.venues-array | where: "venueID", page.venue | first %
//This outputs the current url
{{venue.url}}
这是yml文件的一部分:
This is part of the yml file:
venueID: Red-Radish
name: Red Radish
url: redradish
building: 65
neighborhood: University Union
venueID: Poly-Deli
name: Poly Deli
url: polydeli
building: 19
neighborhood: University Union
venueID: Myrons
name: Myron's
url: myrons
previous: MustangStation
building: 19
neighborhood: University Union
因此,假设我是第二个场馆(Poly-Deli),我想看看:
当前网址:polydeli
上一个网址:带红色
下一个网址:myrons
我尝试使用以下命令输出上一个和下一个URL,但它无法正常工作:
So let's say I'm the second venue (Poly-Deli), I would like to see this:
Current url: polydeli
Previous url: reddish
Next url: myrons
I tried using the following to output the previous and next urls but it dindn't work:
<p>{{page.next.url}}</p>
<p>{{venue.next.url}}</p>
<p>{{paginate.next.url}}</p>
<p>{{paginator.next_page}}</p>
有人帮助了我,它确实起作用了,但是它输出了整个列表.我只想输出这样的内容,因为这是因为我有30个数组(30个不同的位置):
当前网址:polydeli
上一个网址:带红色
下一个网址:myrons
Someone helped me, and it did work, but it outputs the whole list. I just want to output something like this because this because I have 30 arrays(30 different venues):
Current url: polydeli
Previous url: reddish
Next url: myrons
这是输出整个列表的代码:
And this is the code that outputs the whole list:
{% for venue in site.data.venues-array %}
{% assign next = forloop.index0 | plus: 1 %}
{% assign previous = forloop.index0 | minus: 1 %}
<div>Name: {{ venue.name }}</div>
<div>Current URL: {{ venue.url }}</div>
<div>Previous url:{{ site.data.venues-array[previous].url }}</div>
<div>Next URL is:{{ site.data.venues-array[next].url }}</div>
<hr>
{% endfor %}
推荐答案
正如我在之前的评论中提到的那样,我无法找到合适的插件来对_data
集合进行分页.可用的工具很少,但都需要大量的骇客攻击,而且对于这样一个简单的要求,它们非常肿.
As I've mentioned in my previous comment, I was not able to find a suitable plugin to paginate a _data
collection. There are a few available but all require a lot of hacking plus they are quite bloated for such a simple requirement.
您可以将以下HTML和JS添加到场所页面的内容部分. (即,在最下面).
You can add the following HTML and JS to the content part of your venues page. (I.e. underneath the front-matter).
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
变量来更改是否继续循环,如代码注释中所述.
You can change whether to keep looping or not by toggling the infinite
variable as explained in the code's comments.
请注意:
我的系统(v3.0.2)上安装的是Jekyll的较旧版本,因此当venues-array.yml
的文本值中有单引号时,jsonify
过滤器将中断. IE. Myron的坏了,我无法逃脱,如下所示:
I have an older version of Jekyll on my system (v3.0.2) and thus the jsonify
filter breaks when there are single quotes in the text values of the venues-array.yml
. I.e. Myron's breaks and I could not escape it as shown below:
如果您拥有Jekyll >= 3.2
,那么我相信您不会遇到此问题,因为Jekyll将在运行过滤器之前自动使用UTF-8
编码.由于客户端的站点需要此版本且没有Docker容器,因此无法升级我的计算机.如果确实有此问题,请尝试:
If you have the Jekyll >= 3.2
then I believe you will not have this issue as Jekyll will automatically use the UTF-8
encoding in advance of running the filter. I cannot upgrade my machine due to a client's site requiring this version and without a Docker container. If you do have this issue, try:
1)在yml文件上强制执行UTF-8.或者 2)在过滤器之前清除单引号或 3)不要使用单引号:)
1) Enforce UTF-8 on your yml file. or 2) Clean up single quotes in advance of the filter or 3) Don't use single quotes :)
转义对我不起作用.
除此之外,所有功能都可以正常运行,如下所示:
Other than that, all works perfectly as shown below:
这篇关于如何使用Liquid来对Jekyll的数据项进行分页的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!