All the documentation I've found on Eleventy pagination has to do with a single level, and I've got that working pretty well.
Take a collection (ex. of tags) and create one page each
Take a collection of posts and put 10 on each page
and so on.
What I'd like to do now is combine them: loop over all the tags, and then paginate each tag's collection so if I use some tags a lot, they don't end up with 50 posts on the same page. Basically the way WordPress generates paginated views for each tag.
Something like this: (simplified, I know filters need to be in there)
pagination:
data: collections
size: 1
alias: tag
pagination:
data: tag
size: 10
alias: tagpost
Though that didn't seem to work.
Is there some way to do multi-level pagination, or would I need to take some other approach for the outer loop?
That has been the thorn in my side from the beginning. There is an issue post on 11ty's GitHub explaining how to flatten the data and then paginate using Javascript, but then you'll lose all the nice pagination features already built in 11ty.
Another big issue is how to get Tags dynamically from the API. If you need a single template file for each Tag, paginated or not, you have to do it manually for each tag. So if there's a new tag coming from CMS through API 11ty has no way to handle it automatically.
There are a zillion tutorials for 11ty and not a single one explaining how to do two things that literally every site needs to have.
Good luck with it.
BTW, that being said, I love 11ty, I really do.
You can build a custom collection
config.addCollection("tagpages", function(api) {
// Map over api.getAll() to build TagPage or TagGroup that contains
// an array of Pages
});
that has the format:
TagPage {
id: Number;
tag: string;
posts: post[];
}
Then the front matter:
---
Pagination:
Data: collections.tagpages
Size: 1
Alias:tagpage
Permalink: /{TagPage.tag}/{TagPage.id}
---
Display your tag and X posts.
You could have your config customize by tags and number of items per page.
config.addCollection("tagpages", buildTagPages(tag, numItems));
Related
My site has a collection of research reports, which renders out as a page for each report that includes a link to a PDF, like a standard directory based Eleventy collection. For one of the reports, I'd like to add the full report as HTML pages, which each section, e.g. Methodology, as it's own sub page.
In other words, I'd like to have sub pages for a page in a collection.
Could anyone provide advice on how I might do this with Eleventy?
Thanks a million <3
You can use Pagination like so:
---
pagination:
data: page.subArray
size: 1
alias: subData
permalink: "subpage/{{ subdata.title | url }}/index.html"
---
You can then access the data for each sub page via the {{ subData }} alias
We have a rails app at remote.tools and if you see the product pages (see this page), there are a set of tags associated with each product. I am planning on having filtered search basis these tags on category pages (see this page). Now, I have already tried doing this with the 'Acts-as-taggable' gem and 'Simple-form' (basis this blog).
I am fine with having a page refresh on hitting 'search' or doing it in place (able to do both right now). However, I want to have unique URLs to be created basis the combination of filters applied by the user. For example, if the user selects 'Video communication tools' as the category and 'free trial' and 'easy-to-use' as the tags, the page URL should be '/video-communication-tools-with-free-trial-that-are-easy-to-use'. Currently, the filter options are passed as params i.e. '/search?category=xx&tags=yy'.
Having separate URLs for filter combinations will allow me create unique pages for indexing and add content contextually as well.
How should I go about doing this?
You can use jquery to achieve that,
Something like this.
<script>
$('#search_button').on('click', function(){
window.location = "" + $('#tag1').val()+"-"+$('#tag2').val();
});
</script>
Make sure to add id in your search button. Hope this works for you.
In my project, an Article has many Items within it. Since each Item has different length, so I would like to implement pagination manually, for example, by creating a PageBreakItem model, in order to allow users insert page breaks wherever they want. But I don't know how to use "page" parameter in controller to render views correctly.
Some gems like kaminari or will_paginate only allow me to configure the number of items per page. They don't have options for inserting page breaks manually.
Any suggestions are greatly appreciated.
You don't need a special model for this. You could do this with small adaptation of your Item model:
Add sort_order numeric field to denote order of items within the article and is_on_new_page boolean field to denote a page break occurring before that article.
Many Wikis have it, a table of contents based on the headings from the displayed page. I'm looking for an easy possibility to realize that with Rails.
I have different kinds of pages, like dynamically generated ones, processed markdown pages as well as static pages. All these pages have HTML headings on different levels. How can I generate a Wiki like table of contents, which links to the headings with anchors?
I already searched for a post render callback or another entry point in the life cycle, which is happening after rendering, but I didn't found really one. What would you suggest to do? .. implementing a middle ware or what would be your direction?
If you decide to stick with markdown for all your content, you can do this with the Redcarpet gem. Passing with_toc_data: true to the renderer will add anchors to header tags. And re-rendering with Redcarpet::Render::HTML_TOC will generate a list of links linking to those header tags.
In a view I am generating an HTML canvas of figures based on model data in an app. In the view I am preloading JSON model data in the page like this (to avoid an initial request back):
<script type="text/javascript" charset="utf-8">
<% ActiveRecord::Base.include_root_in_json = false -%>
var objects = <%= #objects.to_json(:include => :other_objects) %>;
...
Based on mouse (or touch) interaction I want to redirect to other parts of my app that are controller specific (such as view, edit, delete, etc.).
Rather than hard code the URLs in my JavaScript I want to generate them from Rails (which means it always adapts the latest routes).
It seems like I have one of three options:
Add an empty attr to the model that the controller fills in with the appropriate URL (we don't want to use routes in the model) before the JSON is generated
Generate custom JSON where I add the different URLs manually
Generate the URL as a template from Rails and replace the IDs in JavaScript as appropriate
I am starting to lean towards #1 for ease of implementation and maintainability.
Are there any other options that I am missing? Is #1 not the best?
Thanks!
Chris
I wrote a bit about this on my blog: Rails Dilemma: HATEOAS in XML/JSON Responses.
I came to similar conclusions. There's no incredibly clean way to do it as far as I know, because by default the model is responsible for creating a JSON representation of itself, but generating URLs is strictly a controller/view responsibility.
Feel free to look over my thoughts/conclusions and add comments here or there.