Context
I have a jekyll collection called product-categories in which each file has the following metadata in front matter:
_product-categories/filename1.md
---
- title
- uuid
---
I have a page whose front matter contains filenames from this collection (collection array selections are saved by their filenames with front matter)...
page.html
---
product-categories:
- filename1
- filename2
---
[list of product-categories to be displayed here]
Goal
I want to display the title (from the collection metadata) of these product-categories on the page. Since the items are saved in the front matter by their filename, shouldn't this be possible?
You can do like this :
{% comment %} --- Get product-categories collection's datas --- {% endcomment %}
{% assign collection = site.collections | where: "label", "product-categories" | first %}
{% comment %} --- collection's docs root path --- {% endcomment %}
{% assign collection_path = collection.relative_directory | append: "/" %}
<ul>
{% for cat in page.product-categories %}
{% comment %} --- expected file path --- {% endcomment %}
{% assign filepath = collection_path | append: cat | append:".md" %}
{% comment %} Look for files that have path == filepath.
As "where" filter return an array,
we pick the first and only item in array {% endcomment %}
{% assign file = site.product-categories | where:"path", filepath | first %}
{% if file %}
<li>{{ file.title }}</li>
{% else %}
{% comment %} --- error in front matter list ---{% endcomment %}
<li>No file match for <strong>{{ cat }}</strong> : file at <strong>{{ filepath }}</strong> not found</li>
{% endif %}
{% endfor %}
</ul>
Related
In Jekyll you can include a file by doing:
{% include some-folder/some-file.html %}
If you add more files to the folder you have to manually add them:
{% include some-folder/some-file-2.html %}
{% include some-folder/some-file-3.html %}
{% include some-folder/some-file-4.html %}
Is there a way in Jekyll to include all files in a folder automatically?
It seems possible to have a variable name in an include (source).
If this is allowed:
{% include {{ page.my_variable }} %}
Then also this is allowed:
{% include include_all_files.html folder="some-folder" %}
With an include_all_files.html that looks like this:
{% for file in site.static_files %}
{% if file.path contains include.folder %}
{% include {{ file.path }} %}
{% endif %}
{% endif %}
I have found a way to include the content of all files in the current folder not including the current file.
{% assign parent_path = page.path | split:'/' | last %}
{% assign parent_path = page.path | remove: parent_path %}
{% for file in site.static_files %}
{% if file.path contains parent_path %}
{% assign file_name = file.path | remove: parent_path | remove: "/" %}
{% include_relative {{ file_name }} %}
{% endif %}
{% endfor %}
Reason for my setup: I have a large markdown file (main.md) that contains a lot of information, so I needed a way to move the content into separate files and included them with main.md.
I need to be able to compare a value in each of the markdown files in a folder called in_media to the user_id of the current page stored in a _users folder and only display the post title that have that value from the in_media folder.
User markdown file in _users folder
---
user_id: 123
title: bob
---
Post markdown from in_media folder
---
users: 123
---
I tried the following:
{% for this_user in site.in_media %}
{% for user in page.user %}
{% if this_user == user.user_id %}
<li><a href="{{ post.external_link }}">{{ post.title }}</a </li>
{% endif %}
{% endfor %}
{% endfor %}
However, this is not returning anything
Try this way:
{% for post in site.in_media %}
{% if post.value == page.title %}
<li>{{ post.title }}</li>
{% endfor %}
{% endfor %}
I'm not sure that you can use external_link, never heard of it. Maybe you'll need to build permalink manually - depending on your _config.xml.
Also note the collection should be properly set up to work with permalinks.
I have several collections on my Jekyll site. I've added post navigation to one of the collections displaying a counter on each post page:
{% assign testimonials = site.testimonials %}
{% assign page_order = 1 %}
{% for node in testimonials reversed %}
{% if node.url == page.url %}
{{ page_order }} from {{ forloop.length }}
{% else %}
{% assign page_order = page_order | plus: 1 %}
{% endif %}
{% endfor %}
I would like to make this code work not only for site.testimonials, but for other collections as well. I tried to pass a variable for collections like this:
{% capture label %}{{ page.collection }}{% endcapture %}
{% assign collection = site.collections | where: "label",label | first %}
{% for node in collection reversed %}
{% if node.url == page.url %}
{{ page_order }} from {{ forloop.length }}
{% else %}
{% assign page_order = page_order | plus: 1 %}
{% endif %}
{% endfor %}
But it doesn't work. Is there any way to pass a variable for all collections in Jekyll to use in forloop in post navigation?
When you access collection with site.testimonials, you get collection's documents array.
{{ site.testimonials | inspect }}
# output >> [#<Jekyll::Document ...>, #<Jekyll::Document ...>, ...]
When you access a collection while looping over site.collection, you receive the collection's object :
{% assign collection = site.collections | where: "label",page.collection | first %}
{{ collection | inspect }}
# output >> { "output": true, "label": "collectionLabel",
"docs": [ doc1, docs2, ... ], "files": [],
"directory": "/path/to/collection",
"relative_directory": "_colectionDirectory" }
In your case, you just have to replace :
{% for node in collection reversed %}
By :
{% for node in collection.docs reversed %}
I'm creating a style guide in Jekyll and using Collections to define different elements of the guide. For example, headings, lists, etc.
I'm trying to separate the Sass into files that match up with the partials, one to one, and I'd like to render the Sass files as part of each collection.
So, something like:
{% if _includes/_sass/{{ entry.title | append: ".scss"}} %}
{% highlight sass %}
{% include _includes/_sass/{{ entry.title | append: ".scss" }} %}
{% endhighlight %}
{% endif %}
Basically, what I want is "Include a file in this directory that has the same name as this entry in my collection. If it doesn't exist, don't break."
How do I do this? I've explored storing the file path in a variable but can't seem to get that to work.
Thanks in advance.
It can be done.
This works on Jekyll 3 but it can certainly be ported to Jekyll 2.
Starting from a base install (jekyll new)
_config.yml
collections:
guide:
sasssamples:
Style guide files
Our samples will be grouped in the _guide collection.
Example file : _guide/header/header1.hmtl
---
title: Header level 1
---
<h1>Header level 1</h1>
SCSS samples
We want our SCSS samples to be included in our css/main.scss and use variables defined in our other SCSS files. Our samples will be integrated at the end of our css/main.scss
We don't want our SCSS samples to render as css so no .scss extension. Switch to .txt extension
We want to access SCSS samples from a list. Let's put them in a sasssamples collection.
Example file : _sasssamples/header/header1.txt
---
---
h1{
color: $brand-color;
border: 1px solid $brand-color;
}
SCSS samples integration
Add this code at the very end of you bootstraping scss file (css/main.scss on a base Jekyll install)
css/main.scss
[ original code ... ]
{% comment %} Selecting a collection the Jekyll 3 way. See https://github.com/jekyll/jekyll/issues/4392 {% endcomment %}
{% assign scssCollection = site.collections | where: 'label', 'sasssamples' | first %}
{% comment %}
Printing documents in sasssamples collection.
All SCSS from style guide are sandboxed in .guide class
This allows us to apply styles only to style guide html samples
{% endcomment %}
.guide{
{% for doc in scssCollection.docs %}
{{ doc.content }}
{% endfor %}
}
The style guide
<h2>Style guide</h2>
{% comment %}Selecting a collection the Jekyll 3 way. See https://github.com/jekyll/jekyll/issues/4392 {% endcomment %}
{% assign guideCollection = site.collections | where: 'label', 'guide' | first %}
{% assign scssCollection = site.collections | where: 'label', 'sasssamples' | first %}
{% comment %} Looping hover style guide samples {% endcomment %}
{% assign samples = guideCollection.docs %}
{% for sample in samples %}
<article>
<h3>Element : {{ sample.title }}</h3>
<h4>Render</h4>
<div class="guide">
{{ sample.content }}
</div>
<h4>html code</h4>
{% highlight html %}{{ sample.content }}{% endhighlight %}
{% comment %}
Changing a path like : _guide/headers/header1.html
to : _sasssamples/headers/header1.txt
{% endcomment %}
{% assign scssPath = sample.path | replace: '_guide', '_sasssamples' %}
{% assign scssPath = scssPath | replace: '.html', '.txt' %}
{% comment %} Try to find a SCSS sample with equivalent path {% endcomment %}
{% assign scssSample = scssCollection.docs | where: 'path', scssPath | first %}
{% comment %}We print SCSS sample only if we found an equivalent path{% endcomment %}
{% if scssSample != nil %}
<h4>SCSS code</h4>
{% highlight css %}{{ scssSample.content }}{% endhighlight %}
{% endif %}
</article>
{% endfor %}
Done!
Seems it only miss on assigning the correct path
{% if _includes/_sass/{{ entry.title | append: ".scss"}}
Need to be replaced to relative path to the scss file:
{% assign scssPath = 'relative/path/to/your/scss/' %}
{% if {{ entry.title | append: ".scss" | prepend: scssPath }} != nil %}
In Jekyll's Front Matter, is there a way to make references to another document?
I have a custom collection, and would like to add meta-data in each document such as "parent-topic" (a link to the parent), and "children" (an array of documents), or "related-topics".
With such a reference I could access the linked documents' meta-data, such as their title, url, or other arbitrary data.
The idea is a hierarchy of documentation, with topics, sub-topics, sub-sub-topics, etc. And a topic page could show a list of child topics, or a breadcrumb for the parent topics, etc.
Real question that deserve a real answer. I also got this documentation problem. Following advise from Ben Balter, I started to use collections. The idea was to make
a table of content reflecting topic/sub-topics arrangement,
a breadcrumb on each page
I gave up because it was simplest to code against pages. So, here's how I do documentation with pages.
Prerequisites :
documentation is in a folder eg : documentation
permalink is set to pretty in _config.yml
folders hierarchy describes documentation organization
example
documentation
|--index.html
|--chapter-1
| |--index.html
|
|--chapter-2
| |--index.html
| |
| |--part-1
| | |--index.html
| | |--subpart-1
| | |--index.html
| |--part-2
| | |--index.html
| |
| |--part-3.html
Note : documentation/chapter-2/part-2/index.html can also be documentation/chapter-2/part-2.html, because permalink is set to pretty, generated page will be at documentation/chapter-2/part-2/index.html.
Pages at a same level are sorted depending on a weight front matter variable. This can be anything you want.
Numbering by tenth allows easy insertion for new doc.
example front matter
---
title: My title
weight: 10
---
documentation get default variables values from _config.yml
example
defaults:
-
scope:
path: "documentation"
type: pages
values:
isDoc: true # allows quick extraction from site.pages
layout: page
Once those prerequisites are in place, it's easy to print a table of content and a breadcrumb.
Table of content
_includes/show-children.html
{% assign parentDir = include.dir %}
{% if parentDir == nil %}<h1>You must specify a root directory</h1>{% endif %}
{% assign allDocs = include.docs %}
{% if allDocs == nil %}{% assign allDocs = site.pages | sort: "weight" %}{% endif %}
{% assign level = include.level %}
{% if level == nil %}{% assign level = parentDir | remove_first: "/" | split:"/" | size %}{% endif %}
{% assign maxLevel = include.maxLevel %}
{% if maxLevel == nil %}{% assign maxLevel = 100 %}{% endif %}
{% assign nextLevel = level | plus : 1 %}
{% comment %}+++++++++++++++++++++++++++++++++++++++++++++++++
Looking for all page in this path with the same level (siblings)
This avoid to deep recursion and error like :
__ Liquid Exception: Nesting too deep __
+++++++++++++++++++++++++++++++++++++++++++++++++{% endcomment %}
{% assign siblings = "" | split: "/" %}
{% for s in allDocs %}
{% assign sPageLevel = s.url | remove_first: "/" | split:"/" | size %}
{% if sPageLevel == level and s.url contains parentDir %}
{% if s.title %}{% assign siblings = siblings | push: s %}{% endif %}
{% endif %}
{% endfor %}
<ul>
{% for p in siblings %}
<li><a href="{{site.baseurl}}{{p.url}}"{%if p.url == page.url%} class="active"{%endif%}>{{ p.title }}</a>
{% if nextLevel <= maxLevel %}
{% include show-children.html dir=p.dir docs=allDocs level=nextLevel maxLevel=maxLevel %}
{% endif %}
</li>
{% endfor %}
</ul>
{% comment %}+++++++++++++++++++++++++++++++++++++++++++++++++
Because all variables are globales (all includes have the same scope)
we restore level and nextLevel variables to parent values
+++++++++++++++++++++++++++++++++++++++++++++++++{% endcomment %}
{% assign level = level | minus : 1 %}
{% assign nextLevel = nextLevel | minus : 1 %}
Use
This include can be called with several arguments :
dir : root dir to explore (ie : /documentation)
docs : an array of pages - default to site.pages
level: level at which we start printing (/documentation is at level 1,
/documentation/chapter-1 is at level 2, and so on)
Default to 'dir' level
maxLevel: where to stop to print - default to 100
Extracting documentation pages
{% assign documents = site.pages | where: "isDoc", true | sort: "weight" %}
{% assign dir = "documentation" %}
This will print all documentation hierachy
{% include show-children.html dir=dir docs=documents %}
This will start printing at level 2
{% include show-children.html dir=dir docs=documents level=2 %}
This stop printing at level 2
{% include show-children.html dir=dir docs=documents maxLevel=2 %}
On page layout if you just want to print page children you can do :
{% assign documents = site.pages | where: "isDoc", true | sort: "weight" %}
{% assign level = page.dir | remove_first: "/" | split:"/" | size %}
{% assign childrenLevel = level | plus : 1 %}
{% include show-children.html docs=documents dir=page.dir level=childrenLevel %}
Breadcrumb
_includes/breadcrumb.html
{% assign minLevel = include.minLevel %}
{% if minLevel == nil %}{% assign minLevel = 1 %}{% endif %}
<div class="breadcrumb">
<p>You are here : </p>
{% assign documents = site.pages | where: "isDoc", true | sort: "weight" %}
{% include get-parents.html page=page minLevel=minLevel docs=documents %}
<p>{{ page.title }}</p>
</div>
<style type="text/css">
.breadcrumb p { display: inline; }
.breadcrumb p+p+p:before { content:"ยป "; }
</style>
_includes/get-parents.html
{% assign currentPage = include.page %}
{% assign minLevel = include.minLevel %}
{% assign allDocs = include.docs %}
{% assign pageLevel = currentPage.dir | remove_first: "/" | split:"/" | size %}
{% assign parentLevel = pageLevel | minus: 1 %}
{% if parentLevel >= minLevel %}
{% for p in allDocs %}
{% assign pPageLevel = p.dir | remove_first: "/" | split:"/" | size %}
{% if pPageLevel == parentLevel and currentPage.dir contains p.dir %}
{% include get-parents.html page=p minLevel=minLevel docs=allDocs %}
<p>{{ p.title }}</p>
{% endif %}
{% endfor %}
{% endif %}
Use
Print Documentation > chapter 1 > part 1
{% include breadcrumb.html %}
Print Chapter 1 > part 1
{% include breadcrumb.html minLevel=2 %}
Can it be more simple ?
Working code can be found here.