I'm building a Jekyll site that has a page for each topic. I want to create an alphabetically grouped list of links to each page.
For example, if my topic titles are:
Aardvark
Beatle
Catfish
Cattle
I want to end up with a list of links organised as:
A
Aardvark
B
Beatle
C
Catfish
Cattle
So far, I have gotten code that looks like this:
{% assign topics_by_letter =
site.topics | group_by_expr: "topic", "topic.title | slice: 0, 1" %}
{% for letter in topics_by_letter %}
<div>
{{ letter.name }}
</div>
{% endfor %}
site.topics is the correct name of the page collection and evaluates as expected.
All topics have a valid title label.
Where I am stuck is that letter.name evaluates to empty and I just have a list of empty divs. The snippet {{ page.title | slice: 0, 1 }} works and gives you back the first letter of the topic title.
What am I missing?
Was a typo, group_by_expr should be group_by_exp.
Related
I have some posts tagged with foo, and I want to exclude those from my front page.
I have tried putting this code into the front-page template:
<div class="posts">
{% for post in paginator.posts %}
{% unless post.tags and post.tags contains "foo" %}
{% endunless %}
{% endfor %}
</div>
However this results in the pagination being incorrect.
Here are some example posts:
+-------+--------+-----+
| Index | Post | Tag |
+-------+--------+-----+
| 1 | Red | foo |
| 2 | Blue | |
| 3 | White | |
| 4 | Pink | foo |
| 5 | Orange | |
| 6 | Yellow | foo |
| 7 | Beige | foo |
| 8 | Purple | |
| 9 | Black | foo |
+-------+--------+-----+
Actual output:
Page 1: 2, 3, 5
Page 2: 8
What I would like:
Page 1: 2, 3, 5, 8
As you can see it is currently splitting the posts into blocks of 5 and then my code filters them - I would like to apply the filtering before the pagination is calculated.
Just add hidden: true variable in yaml frontmatter for posts not to appear in home page pagination. See this.
While this doesn't filter by tags (you'd need to go through posts one by one and add the option manually) it seems much simpler than the tweaks suggested above.
And pagination for your first and second pages remains correct.
It can't be done without hacking the paginator plugin, so here we go:
remove gem jekyll-paginate from Gemfile
set the needed configuration variables in _config.yml:
paginate: 2
paginate_path: "/blog/page:num/"
create the _plugins directory
copy pager.rb and pagination.rb to _plugins/
cd _plugins
wget https://github.com/jekyll/jekyll-paginate/blob/master/lib/jekyll-paginate/pager.rb
wget https://github.com/jekyll/jekyll-paginate/blob/master/lib/jekyll-paginate/pagination.rb
display posts in homepage with the suggested code used in docs
<!-- This loops through the paginated posts -->
{% for post in paginator.posts %}
<h1>{{ post.title }}</h1>
<p class="author">
<span class="date">{{ post.date }}</span>
</p>
<div class="content">
{{ post.content }}
</div>
{% endfor %}
<h1> Paginator</h1>
<!-- Pagination links -->
<div class="pagination">
{% if paginator.previous_page %}
Previous
{% else %}
<span class="previous">Previous</span>
{% endif %}
<span class="page_number ">Page: {{ paginator.page }} of {{ paginator.total_pages }}</span>
{% if paginator.next_page %}
Next
{% else %}
<span class="next ">Next</span>
{% endif %}
</div>
In pagination.rb modify the paginate function to filter your posts containing the tag foo, currently the all_posts variable contains all the posts data used to calculate pagination, so we need to remove the ones that contains the tag with:
all_posts = all_posts.select do |elem|
!elem.data['tags'].include? 'foo'
end
Then the function will look like:
def paginate(site, page)
all_posts = site.site_payload['site']['posts'].reject { |post| post['hidden'] }
all_posts = all_posts.select do |elem|
!elem.data['tags'].include? 'foo'
end
pages = Pager.calculate_pages(all_posts, site.config['paginate'].to_i)
(1..pages).each do |num_page|
pager = Pager.new(site, num_page, all_posts, pages)
if num_page > 1
newpage = Page.new(site, site.source, page.dir, page.name)
newpage.pager = pager
newpage.dir = Pager.paginate_path(site, num_page)
site.pages << newpage
else
page.pager = pager
end
end
end
Then page 1 will show the desired posts, only the ones not containing the foo tag: 2, 3, 5, 8.
[updated answer]
Solution 1. New collection
You reported that the where command on the paginator object does not work/recalculate the paging. Therefore, I would advice to save all 'foo' posts in a separate collection. This solves your original problem, but creates a new problem if you want to show all posts combined on another page. If you do not want that, this is the most elegant solution.
Solution 2. Use Javascript for paging
Forget about the paginator object and solve this by building you own paging (or infinte scroll) in Javascript, since pagination is a SEO issue anyway...
Note: I have created a resource for Jekyll without plugins. I will add Javascript pagination here too.
I'm trying to write a static site with Jekyll that has a few layers to it. What's the best way to generate links to all subpages within a section?
For example, if I have a site structure like this:
landing
- Topic A
- Content 1
- Content 2
- Content 3
- Topic B
- Content 1
- Content 2
- Content 3
What would be the best way to create links to each of the Content pages from its Topic page? And, is there a simple way to link to all the Topic pages from the landing?
These are not posts, just static pages. It would be really great if I could just do {% for topic.each %} ...etc. and print the links out.
I would not use posts for this purpose (as yaitloutou suggests). I would read the hierarchy from the directory structure (solution 1) or create two seperate collections (solution 2). You can let the collections from solution 2 share the same layout if you want that.
1. Using pages
Create a directory structure with index.md pages and loop over the Jekyll veriable called 'site.pages' to create the menu.
index.md
topic-a/index.md
content-1/index.md
content-2/index.md
content-3/index.md
topic-b/index.md
content-1/index.md
content-2/index.md
content-3/index.md
And loop over all pages like this:
<ul>
{% assign sitepages = site.pages | sort: 'order' %}
{% for sitepage in sitepages %}
<li {% if page.url == sitepage.url %} class="active"{% endif %}>
{{ sitepage.title }}
</li>
{% endfor %}
</ul>
If you want the nested structure, you can do something like this. Or if you want only the results for Topic A, you can do this:
<ul>
{% assign sitepages = site.pages | sort: 'order' %}
{% for sitepage in sitepages %}
{% if sitepage.url contains 'topic-a' %}
<li {% if page.url == sitepage.url %} class="active"{% endif %}>
{{ sitepage.title }}
</li>
{% endif %}
{% endfor %}
</ul>
2. Using collections (simplest solution and quickest build)
Create a collection Topic A and create another collection Topic B. Your config file should look like this:
collections:
topic-a:
output: true
permalink: /topic-a/:path/
topic-b:
output: true
permalink: /topic-b/:path/
Outputting the items of one topic goes like this:
{% assign atopics = site.topic-a | sort: 'order' %}
{% for atopic in atopics %}
<li {% if page.url == atopic.url %} class="active"{% endif %}>
{{ atopic.title }}
</li>
{% endfor %}
</ul>
You should create a _topic-a and a _topic-b directory with your content-1.md, content-2.md, etc. files.
Note that both solutions have YML variables called 'order', to determine the order of appearance of the items/pages. This looks like this:
---
title: mytitle
layout: mylayout
order: 50
---
mycontent
I'll propose here 2 ways, you can determine the "best" according to your specific needs/situation, and which one sound more adapted to them.
first of all, "posts" and "pages" are basically just collections of md/html files. with some variables associated to each one.
to generate files with this structure, you can:
1. Using _posts and page.categories
put all the sub-files in _posts (the 2017-01-01- is just a place holder)
_posts/
- 2017-01-01-content-a-1.md
- 2017-01-01-content-a-2.md
- 2017-01-01-content-a-3.md
- 2017-01-01-content-b-1.md
- 2017-01-01-content-b-2.md
- 2017-01-01-content-b-3.md
add appropriate categories to each file:
2.1. for posts caontent-a-* add category: topic-a (in this order) by adding this line in the yaml front matter at top of each of them:
---
layout: page # or any appropriate layout
category: topic-a
---
2.2. for posts caontent-b-* add category: topic-b
set a premalink to ignore the date, and create the desired structure, by adding the following line to _config.yml:
defaults:
-
scope:
path: "_posts" # to all the file in posts
values:
permalink: /landing/:categories/:title.html # set this as default permalink value
you still can specify a permalinks per post in its front matter, or just add the permalink line to each md folder front matter.
the above will generate the desired structure.
loop through all the
{% for entry in site.posts %}
{% if entry.category == type-a %}
<!-- do A stuff -->
{% elsif entry.category == type-b %}
<!-- do B stuff -->
{% endif %}
{% endfor %}
2. Using collections:
it's similar to the above, but instead of using the already existent _postscollection you'll start by creating a new collection (one advantage is that you'll not need to add a date )
any of the approaches above will generate this structure inside _site
landing/
type-a/
content-a-1/
index.html
content-a-2/
index.html
...
type-b/
...
I have a collection in Jekyll which I want to sort. Sorting by title is easy of course.
<ul>
{% for note in site.note | sort: "title" %}
<li>{{note.path | git_mod }}: {{ note. title }}</li>
{% endfor %}
</ul>
I want to sort by date. But since collections don't have a date, I have a custom Liquid filter which takes the path of the item, and gets its last modified time in Git. You can see that in the code above, where I pass the path to git_mod. I can verify that this works, because when I print out the list, I get the correct last modified times, and it is a full date. (In practice, I also pass it to date_as_string.)
But I can't sort by that value because Liquid doesn't know about it, since it is a value already in each item in the site.note collection. How can I sort by that value? I was thinking something like this, but it doesn't work:
<ul>
{% for note in site.note | sort: path | date_mod %}
<li>{{note.path | git_mod }}: {{ note. title }}</li>
{% endfor %}
</ul>
I've also tried variants like: {% for note in site.note | sort: (note.path | git_mod) %}
None of these throw an error, but none of them work either.
This is a case where you can use Jekyll hooks.
You can create a _plugins/git_mod.rb
Jekyll::Hooks.register :documents, :pre_render do |document, payload|
# as posts are also a collection only search Note collection
isNote = document.collection.label == 'note'
# compute anything here
git_mod = ...
# inject your value in dacument's data
document.data['git_mod'] = git_mod
end
You then will be able to sort by git_mod key
{% assign sortedNotes = site.note | sort: 'git_mod' %}
{% for note in sortedNotes %}
....
Note that you cannot sort in a for loop. You first need to sort in an assign, then loop.
I'd like to convert the printed category names of my posts into title case. I couldn't find a Liquid filter that would work. I tried using dashes and the camelcase filter, but no dice.
Alternatively, I'd like to print the category name as it's written in the YAML frontmatter.
For instance, for a post with:
category: Here's the Category
When I reference the name:
{% for cat in site.categories %}
<h1>{{ cat[0] }}</h1>
{% endfor %}
I see "here's the category" on the page. I would like to see "Here's the Category" or even "Here's The Category," and I could replace (replace: 'The', 'the') the few articles that I wanted to be downcase.
EDIT
For anyone as desperate as I am, this disgusting hack works, where n is the max number of words you have in a category title.
{% for cat in site.categories %}
{% assign words = cat[0] | split: ' ' %}
<h1>{{ words[0] | capitalize | replace:'The','the'}} {{ words[1] | capitalize }} {{ words[2] }} {{ words[3] | capitalize }} {{ words[4] | capitalize }} {{ words[n] | capitalize }}</h1>
{% endfor %}
I'm going to leave the question unanswered in case someone knows a more elegant method.
You can achieve a part of what you want by using the capitalize filter:
Input
{{ 'capitalize me' | capitalize }}
Output
Capitalize me
Source.
Another possibility, which I didn't test for its edge cases, is to use join and camelize:
{{ "here's the category" | join: '-' | camelize }}
It should print "Here's The Category", but camelize might have a problem with here's.
Just use {{ category.first | capitalize }} is OK for my case, without additional '' on category.
Instead of manually stepping through words 0 to n, one can use another for loop as follows:
{% for category in site.categories %}
{% assign words = category | first | split: ' ' %}
{% for word in words %}
{{ word | capitalize | replace: 'The','the' }}
{% endfor %}
{% endfor %}
I know that this is old but it helped me to solve my problem and it could help others.
The solution I came was:
{% for category in site.categories %}
<a href="/{{category[0] | slugify }}/">
{{category[0]}}
</a>
{% endfor %}
This list all the blog categories (most used for building a menu)
It turns into:
<a href="/dicas/">
Dicas
</a>
<a href="/diário-de-bordo/">
Diário de bordo
</a>
Thank you for giving me a clue.
You can check another filters in: http://jekyllrb.com/docs/templates/#filters
Name pages in Kabab-case as you want them to appear, then use replace:
{{ category.name | replace: '-', ' '}}
Don't-Capitalize-the becomes Don't Capitalize the and Capitalize-The becomes Capitalize The
This solutions is a little more overwrought, but you can adapt the author data file solution from the Jekyll site to work with categories.
In your _data folder, make a file called categories.yml. Put in something like this:
my-first-category:
name: My First Category
another-category:
name: Another Category
Then, you can loop through your categories like this:
{% for category in site.categories %}
{% assign category_slug = category[0] %}
{% assign category_data = site.data.categories[category_slug] %}
{% if category_data %}
{{ category_data.name }}
{% endif %}
{% endfor %}
Side note: I'm not sure why I needed the category_slug assign. I didn't need it when looping through post.categories.
This increases overhead by adding an extra file, but opens the door for other data that can get attached to objects like a category image or description. You can be more granular over your names. This is a pretty readable solution too, which is nice.
I went the other way around. I hard coded my page title in Title case and use downcase, upcase and capitalize liquid filter in other pages.
I'm using jekyll-bootstrap to maintain a blog on GitHub.
I'd like to have a sorted tags_list. The tag with the most posts comes first. Then I can have a display that shows the first tags with bigger font-size and last tags with smaller font-size. And I also want a splice function.
If in python/Jinja2, I'd like some code like this:
{% for tag in sorted_tags[:10] %}
<li style="font-size:{{ tag.count }}px;">{{ tag.name }}</li>
{% endfor %}
What's the equivalent implementation in ruby/jekyll?
This is how I'm sorting by the number of posts in a tag (descending), without any plugins (i.e. GitHub Pages compatible).
It also works when your tag names contain spaces; only , and : are forbidden characters (but you can easily change those).
{% capture counts_with_tags_string %}{% for tag in site.tags %}{{ tag[1] | size | prepend:"000000" | slice:-6,6 }}:{{ tag[0] }}{% unless forloop.last %},{% endunless %}{% endfor %}{% endcapture %}
{% assign counts_with_tags = counts_with_tags_string | split:"," | sort | reverse %}
<ol>
{% for count_with_tag in counts_with_tags %}
{% assign tag = count_with_tag | split:":" | last %}
{% assign count = site.tags[tag] | size %}
<li>{{ tag }} ({{ count }})</li>
{% endfor %}
</ol>
It's super gross. What it does:
counts_with_tags_string is set to a string like 000005:first_tag,000010:second_tag,000002:third_tag. The zero-padded numbers are generated using the filter chain | prepend:"000000" | slice:-6,6.
This is split on commas and sorted lexicographically, which works because of the zero padding. The result is assigned to counts_with_tags.
Finally, we iterate over the elements and split each on : to find the original tag name. We could find the count in the same way, but because it's zero padded, it's easier to look it up using site.tags[tag] | size instead.
I thought that the tags array is sorted. Assuming so, you can do this:
{% for tag in site.tags %}
<li style="font-size: {{ tag[1].size }}px">{{ tag[0] }}</li>
{% endfor %}
That feels a little hacky, but it should work. Unfortunately, Liquid doesn't currently allow you to sort arrays within your templates. If you want to do any sorting on the array, you'd probably have to write a plugin to do so - it shouldn't be too complex. In fact, there's an existing plugin for sorting accessors that may do it: https://github.com/krazykylep/Jekyll-Sort
I only needed to do this in one place, on the page where my list of Tags was listed, so I wrote it as a Jekyll filter:
tag_index.html
<h2>Posts by Tag</h2>
<ul class="tags-list">
{{ site.tags | render_tags_list }}
</ul>
_plugins/filters.rb
module Jekyll
module Filters
def render_tags_list(tags)
sorted_tags = tags.keys.sort_by! { |tag| tag.downcase }
str = ''
sorted_tags.each { |tag|
str << '<li>' + tags[tag].size.to_s + ' - ' + tag + '</li>'
}
str
end
end
end
You could certainly just allow the filter to return sorted_tags above if you wanted to keep a better separation between "view" logic and programming logic, but my case was very simple. Trying to re-access a hash value by a specific key using Liquid templating wasn't a very concise process, or maybe I was just doing it wrong, but was much easier in Ruby.
I'm hosting my blog on github and wanted a solution to sorting a tag list that did not involve any jekyll plugins since Github doesn't allow for custom plugins (jekyll bootstrap attempts this as well). My post here doesn't really answer the question since I sort by tag name, and NOT by size. You can adapt this method to output the tag size as well in the string and then do some fancier spliting to get a different sort order (but it will be messy)
I was able to do this with the following code:
{% capture tagString %}{% for tag in site.tags %}{{ tag[0] }}{% unless forloop.last %}|{% endunless %}{% endfor %}{% endcapture %}
{% assign tags = tagString | split: '|' | sort: 'downcase' %}
<div id="cloud">
{% for tag in tags %}
{% assign number = site.tags[tag].size %}
{% assign slug = tag | downcase | replace: ' ', '_' %}
<span class="{% if number == 1 %}small{% elsif number <= 5 %}medium{% elsif number <= 10 %}large{% else %}huge{% endif %}">
{{ tag | downcase }}
</span>
{% endfor %}
</div>
It's kind of odd since I capture a string of tags (using | as separator) and then use that to create an array. After that point (in the loop) I can refer to the tag as tag and the list of sites that use that tag as site.tags[tag].
I use this on my blog:
https://github.com/kelsin/kelsin.github.io/blob/master/tags/index.html
The rest of the code is just how I've chosen to make a tag cloud on my tag page. Hope this helps someone else looking for a solution (without plugins)!