I'm new to Jekyll and Liquid, and I've been trying to utilize a site that has 100+ pages, separated into 15 modules. I need the navigation to reflect only to related pages, but I'm stuck on how to do this efficiently. For example, a directory like:
animal-species/
├── _docs/
│ ├── mammals/
│ │ ├── mam-page01.md
│ │ └── mam-page02.md
│ ├── reptiles/
│ │ ├── rep-page01.md
│ │ └── rep-page02.md
Set in pages:
title: Mammals Overview
module: mammals
---
docs.yml:
- module: mammals
title: Section Title
docs:
- mam-page01
- mam-page02
- module: reptiles
title: Section Title
docs:
- rep-page01
- rep-page02
In my nav.html file I've tried sorting with {% for section in site.data.docs | where page.module == page.module %} or page.module == section.module with no luck. I've also tried creating nested collections with 3.7.0 and collections_dir:, also failing. Every page is available to each other in all navs:
navigation of site
How can I set the nav to only show same-module pages? I have 15 modules and with like some sort of global sorting without having to code for all sub-directories.
Thank you for your help/patience! I'm very green to this.
I've bypassed a collections directory and _config.yml restructure but adding additional variables to by assign output:
{% assign docs = site.data.docs[page.module] | map: 'docs' | join: ',' | split: ',' %}
{% for document in docs %}
{% assign dir = page.module | prepend: "/" | append: "/" %}
{% assign document_url = document | prepend: {{dir}} | append:"/" %}
{% if document_url == page.url %}
"Previous"/"Next" buttons will only link to items with the same module. A simple solution that took me forever to divine.
Related
I am trying to write a recursive Jekyll navigation template (include) as described in "Nested tree navigation with recursion". I have a minimal example committed in jekyll-min, which basically has:
two top-level dirs, each with one page
another dir under the second top-level dir, containing one page
a navigation template (_includes/docs_contents.html) that loops through the top-level dirs and initiates recursive traversal for each
a recursive include (_includes/nav.html) that accepts a navigation entry, renders its title and child links, and invokes itself recursively for any dirs in its children list
a layout (_layouts/doc.html) that renders the navigation pane and content for each page
I'm using Ruby v2.7.0 and Jekyll v3.8.5.
# docs structure
_docs
|
|_a/
| |_index.md
|
|_b/
|_index.md
|
|_1/
|_index.md
# _data/docs-nav.yml
- title: a
docs:
- link: /a/
- title: b
docs:
- link: /b/
- title: 1
docs:
- link: /b/1/
# _includes/nav.html
{% assign section=include.nav %}
<div class="ui accordion">
<div class="title active">
<i class="dropdown icon"></i>
{{ section.title }}
</div>
<div class="content active">
<div class="ui vertical text menu">
{% for item in section.docs %}
{% if item.link %}
{%- assign p = site.documents | where: "url", item.link | first %}
<a {%- if page.url== p.url %} class="current item" {% endif %} class="item" href="{{ p.url }}">
{{ p.menu_name | default: p.title }}
</a>
{% endif %}
{% if item.docs %}
{% include nav.html nav=item %}
{% endif %}
{% endfor %}
</div>
</div>
</div>
# _includes/docs_contents.html
<div class="unit one-fifth hide-on-mobiles">
<aside>
{% for section in site.data.docs_nav %}
{% include nav.html nav=section %}
{% endfor %}
</aside>
</div>
# _layouts/doc.html
---
title: Docs
description: version 1.0
---
<html>
<body>
{% include docs_contents.html %}
{{ content }}
</body>
</html>
As far as I understand, for each page the navigation template render should work like this:
_layouts/doc.html
_includes/docs_contents.html: iterate root level entries, calling _nav for each
_nav(/a/ entry): render title, iterate docs, render /a/ link, and quit
_nav(/b/ entry): render title, iterate docs, render /b/ link, and then call _nav(/b/1/ entry)
_nav(/b/1/ entry): render title, iterate docs, render /b/1/ link, and quit
_nav(/b/ entry) (already in stack): quit
_includes/docs_contents.html: quit
However, when I perform a bundle exec jekyll build I get:
Liquid Exception: Liquid error (/mnt/e/ThirdParty/jekyll-min/_includes/docs_contents.html line 17):
Nesting too deep included in /_layouts/doc.html
jekyll 3.8.5 | Error: Liquid error (/mnt/e/ThirdParty/jekyll-min/_includes/docs_contents.html line 17):
Nesting too deep included
Traceback (most recent call last):
[...]
What is the problem with my content or the recursive template? I have been struggling with this for hours with no luck.
JEKYLL_LOG_LEVEL=debug
didn't produce any additional useful info.
The actual document structure is more complex and could go arbitrarily deep, so writing a non-recursive template to manually handle nested levels may not be an option.
Excellent question.
With help of {{ myvar | inspect }} and a flag limiting recursion, I've successfully debugged your code and understood why this infinite recursion occurs.
It comes from the fact that the section variable in docs_contents.html is assigned by in a for loop and freezed : it cannot be changed.
The first time you include nav.html, {% assign section=include.nav %} is not changing section and your code just use the one assigned in your for loop.
When you recurse and call nav.html a second time it will use the same freezed global section variable and recurse indefinitely.
The solution is to change your variable name in nav.html from section to something else. eg: sub_section, and it will work, because this new variable will not be freezed and can be reassigned as needed during recursion.
{% assign sub_section=include.nav %}
{{ sub_section.title }}
{% for item in sub_section.docs %}
...
If you want to experiment here is my test code with some comments :
docs_contents.html
{% for section in site.data.docs_nav %}
{% comment %} ++++ Try to reassign "section" ++++ {% endcomment %}
{% assign section = "yolo from docs_contents.html" %}
{% assign recursion = 0 %}
<pre>
>> docs_contents.html
++++ "recursion" var is assigned and becomes global
recursion : {{ recursion | inspect }}
++++ "section" is freezed to loop value ++++
including nav with include nav.html nav=section >> {{ section | inspect }}
</pre>
{% include nav.html nav=section %}
{% endfor %}
nav.html
{% comment %} ++++ Try to reassign "section" ++++ {% endcomment %}
{% assign section = "yolo from nav.html" %}
<pre>
>> nav.hml
recursion : {{ recursion }}
include.nav : {{ include.nav | inspect }}
++++ "section" is freezed to loop value ++++
section : {{ section | inspect }}
</pre>
{% comment %} ++++ useless assignement ++++ {% endcomment %}
{% assign section=include.nav %}
{% for item in section.docs %}
{% if item.link %}
{%- assign p = site.documents | where: "url", item.link | first %}
<a {%- if page.url== p.url %} class="current item" {% endif %} class="item" href="{{ p.url }}">
{{ p.menu_name | default: p.title }}
</a>
{% endif %}
{% comment %}++++ limiting recursion to 2 levels ++++{% endcomment %}
{% if item.docs and recursion < 2 %}
{% comment %}++++ incrementing "recursion" global variable ++++{% endcomment %}
{% assign recursion = recursion | plus: 1 %}
{% include nav.html nav=item %}
{% endif %}
{% endfor %}
Using a POST on my front-end (React.js, with react-beautiful-dnd), I'm trying to update the position of the items a user has stored.
My strategy is to send over an updated index of IDs that are ordered in the specified position.
My Data (example, simplified)
┌────┬────────┬───────┐
│ id │ title │ index │ <── my "position"
├────┼────────┼───────┤
│ 1 │ Apple │ 4 │
│ 2 │ Banana │ 1 │
│ 3 │ Mango │ 3 │
│ 4 │ Kiwi │ 2 │
│ 5 │ Orange │ 0 │
└────┴────────┴───────┘
New positions array (anatomy)
$value: sorted ids ------> [3, 2, 5, 1, 4]
: : : : :
$key: new index will be… 0, 1, 2, 3, 4
The Code
The controller ingests an array that derives the new positions from the keys of the array. It loops then through the collection of given IDs and reassigns them the updated index.
public function reorder(Request $request) {
$newIndex = $request->newIndex;
$items = Item::whereIn('id', $newIndex)->get();
foreach ($newIndex as $key => $value) {
// TODO: check if $item->index needs to be rewritten at all
$item = $items->find($value);
$item->index = $key;
$item->save();
}
return response('Success', 200);
}
dd() of $request->input
array:1 [
"newIndex" => array:5 [
0 => 4
1 => 1
2 => 2
3 => 5
4 => 3
]
]
The problem
It seems… the code only works once? Did I miss something? The POST fires every time and the set array is accurate, so the issue is not on the frontend side of things.
I have my server working perfectly with Parse-server and heroku.
One of the things I'm missing is that I want one of my cloud code functions to be called at 1:00 am each day. Is there any way I can automate this? Maybe with Parse or with another service? I just need to call that method 1 time per day.
So after some research on Github and on npm packages I have found this one.
First you install node-schedule A cron-like and not-cron-like job scheduler for Node.
You can install it through Putty in your server with this command npm install node-schedule
After you install it successfully you can open your main.js file that you have your Cloud Code and paste the following code
var schedule = require('node-schedule');
var j = schedule.scheduleJob(' * * * * *', function(){
console.log('This console log will run every 5 minutes');
});
The meaning of the stars
* * * * * *
┬ ┬ ┬ ┬ ┬ ┬
│ │ │ │ │ |
│ │ │ │ │ └ day of week (0 - 7) (0 or 7 is Sun)
│ │ │ │ └───── month (1 - 12)
│ │ │ └────────── day of month (1 - 31)
│ │ └─────────────── hour (0 - 23)
│ └──────────────────── minute (0 - 59)
└───────────────────────── second (0 - 59, OPTIONAL)
So you can have the complete code running like this if you want it to run 5 seconds (to see if its working by replacing your cloud code)
var schedule = require('node-schedule');
var j = schedule.scheduleJob('*/5 * * * *', function(){
Parse.Cloud.define("averageStars", function(request, response) {
var query = new Parse.Query("Review");
query.equalTo("movie", request.params.movie);
query.find({
success: function(results) {
var sum = 0;
for (var i = 0; i < results.length; ++i) {
sum += results[i].get("stars");
}
response.success(sum / results.length);
},
error: function() {
response.error("movie lookup failed");
}
});
});
});
Useful links:
node schedule
Try this one and I'm waiting for your results!
I am using the YAML heading of a markdown file to add an excerpt variable to blog posts that I can use elsewhere. In one of these excerpts I refer to an earlier blog post via markdown link markup, and I use the liquid template data variable {{ site.url }} in place of the base URL of the site.
So I have something like (trimmed it somewhat)
---
title: "Decluttering ordination plots in vegan part 2: orditorp()"
status: publish
layout: post
published: true
tags:
- tag1
- tag2
excerpt: In the [earlier post in this series]({{ site.url }}/2013/01/12/
decluttering-ordination-plots-in-vegan-part-1-ordilabel/ "Decluttering ordination
plots in vegan part 1: ordilabel()") I looked at the `ordilabel()` function
----
However, jekyll and the Maruku md parser don't like this, which makes me suspect that you can't use liquid markup in the YAML header.
Is it possible to use liquid markup in the YAML header of pages handled by jekyll?
If it is, what I am I doing wrong in the example shown?
If it is not allowed, who else can I achieve what I intended? I am currently developing my site on my laptop and don't want to hard code the base URL as it'll have to change when I am ready to deploy.
The errors I am getting from Maruku are:
| Maruku tells you:
+---------------------------------------------------------------------------
| Must quote title
| ---------------------------------------------------------------------------
| the [earlier post in this series]({{ site.url }}/2013/01/12/decluttering-o
| --------------------------------------|-------------------------------------
| +--- Byte 40
and
| Maruku tells you:
+---------------------------------------------------------------------------
| Unclosed link
| ---------------------------------------------------------------------------
| the [earlier post in this series]({{ site.url }}/2013/01/12/decluttering-or
| --------------------------------------|-------------------------------------
| +--- Byte 41
and
| Maruku tells you:
+---------------------------------------------------------------------------
| No closing ): I will not create the link for ["earlier post in this series"]
| ---------------------------------------------------------------------------
| the [earlier post in this series]({{ site.url }}/2013/01/12/decluttering-or
| --------------------------------------|-------------------------------------
| +--- Byte 41
Today I ran into a similar problem. As a solution I created the following simple Jekyll filter-plugin which allows to expand nested liquid-templates in (e.g. liquid-variables in the YAML front matter):
module Jekyll
module LiquifyFilter
def liquify(input)
Liquid::Template.parse(input).render(#context)
end
end
end
Liquid::Template.register_filter(Jekyll::LiquifyFilter)
Filters can be added to a Jekyll site by placing them in the '_plugins' sub-directory of the site-root dir. The above code can be simply pasted into a yoursite/_plugins/liquify_filter.rb file.
After that a template like...
---
layout: default
first_name: Harry
last_name: Potter
greetings: Greetings {{ page.first_name }} {{ page.last_name }}!
---
{{ page.greetings | liquify }}
... should render some output like "Greetings Harry Potter!". The expansion works also for deeper nested structures - as long as the liquify filter is also specified on the inner liquid output-blocks. Something like {{ site.url }} works of course, too.
Update - looks like this is now available as a Ruby gem: https://github.com/gemfarmer/jekyll-liquify.
I don't believe it's possible to nest liquid variables inside YAML. At least, I haven't figure out how to do it.
One approach that will work is to use a Liquid's replace filter. Specifically, define a string that you want to use for the variable replacement (e.g. !SITE_URL!). Then, use the replace filter to switch that to your desired Jekyll variable (e.g. site.url) during the output. Here's a cut down .md file that behaves as expected on my jekyll 0.11 install:
---
layout: post
excerpt: In the [earlier post in this series](!SITE_URL!/2013/01/12/)
---
{{ page.excerpt | replace: '!SITE_URL!', site.url }}
Testing that on my machine, the URL is inserted properly and then translated from markdown into an HTML link as expected. If you have more than one item to replace, you can string multiple replace calls together.
---
layout: post
my_name: Alan W. Smith
multi_replace_test: 'Name: !PAGE_MY_NAME! - Site: [!SITE_URL!](!SITE_URL!)'
---
{{ page.multi_replace_test | replace: '!SITE_URL!', site.url | replace: '!PAGE_MY_NAME!', page.my_name }}
An important note is that you must explicitly set the site.url value. You don't get that for free with Jekyll. You can either set it in your _config.yml file with:
url: http://alanwsmith.com
Or, define it when you call jekyll:
jekyll --url http://alanwsmith.com
If you need to replace values in data/yml from another data/yml file, I wrote plugin. It's not so elegant but works :
I did some code improvements. Now it catch all occurrences in one string and work with nested values.
module LiquidReplacer
class Generator < Jekyll::Generator
REGEX = /\!([A-Za-z0-9]|_|\.){1,}\!/
def replace_str(str)
out = str
str.to_s.to_enum(:scan, REGEX).map {
m = Regexp.last_match.to_s
val = m.gsub('!', '').split('.')
vv = $site_data[val[0]]
val.delete_at(0)
val.length.times.with_index do |i|
if val.nil? || val[i].nil? || vv.nil? ||vv[val[i]].nil?
puts "ERROR IN BUILDING YAML WITH KEY:\n#{m}"
else
vv = vv[val[i]]
end
end
out = out.gsub(m, vv)
}
out
end
def deeper(in_hash)
if in_hash.class == Hash || in_hash.class == Array
_in_hash = in_hash.to_a
_out_hash = {}
_in_hash.each do |dd|
case dd
when Hash
_dd = dd.to_a
_out_hash[_dd[0]] = deeper(_dd[1])
when Array
_out_hash[dd[0]] = deeper(dd[1])
else
_out_hash = replace_str(dd)
end
end
else
_out_hash = replace_str(in_hash)
end
return _out_hash
end
def generate(site)
$site_data = site.data
site.data.each do |data|
site.data[data[0]] = deeper(data[1])
end
end
end
end
place this code in site/_plugins/liquid_replacer.rb
in yml file use !something.someval! like as site.data.something.someval but without site.data part.
example :
_data/one.yml
foo: foo
_data/two.yml
bar: "!one.foo!bar"
calling {{ site.data.two.bar }} will produce foobar
=======
OLD CODE
======
module LiquidReplacer
class Generator < Jekyll::Generator
REGEX = /\!([A-Za-z0-9]|_|\.){1,}\!/
def generate(site)
site.data.each do |d|
d[1].each_pair do |k,v|
v.to_s.match(REGEX) do |m|
val = m[0].gsub('!', '').split('.')
vv = site.data[val[0]]
val.delete_at(0)
val.length.times.with_index do |i|
vv = vv[val[i]]
end
d[1][k] = d[1][k].gsub(m[0], vv)
end
end
end
end
end
end
Another approach would be to add an IF statement to your head.html.
Instead of using page.layout like I did on my example below, you could use any variable from the page YAML header.
<title>
{% if page.layout == 'post' %}
Some text with {{ site.url }} variable
{% else %}
{{ site.description | escape }}
{% endif %}
</title>
I'm trying to create my first Jekyll website and I'm encountering a problem designing the i18n part.
The different articles will be totally rewritten for each language, so each one will be a different post, no problems here. I actually have more difficulties with the text in my layout / includes.
Typically, for the menu, I was thinking doing something along these lines:
{% capture menu_location %}menu.{{ lang }}.html{% endcapture %}
{% include menu_location %}
like suggested here. But this gives me the following error :
Included file 'menu_location' not
found in _includes directory
Is it possible to use a variable for the include tag ? Do you have any other idea how I can do this ?
Thanks !
PS: Even if I have only 3 languages in mind for the moment, I won't do it with an if / elseif / else syntax ;)
What you are trying to do isn't possible without modifying Jekyll. The include filter they defined treats its parameter as a string, not as an expression.
I've created a couple bilingual sites with Jekyll in the past. I found that the cleanest solution was often storing locale-dependant variables inside _config.yml, and reference it when needed.
# _config.yml
...
locales:
en:
welcome_message: "Welcome to my site"
...
es:
welcome_message: "Bienvenido a mi sitio"
For every page I render, I need to know its locale. The simplest way of doing that is adding a locale field on the top yaml that page:
---
# a page or post (for example index.html)
...
locale: en
---
You can then get the current page locale by doing page.locale.
If you have divided your site in folders (/en/ for english, /es/ for spanish, and so on, you can use the page url to calculate the locale, so that you don't need to specify the locale on each page:
{% capture locale %}{{ page.url | truncate: 3, "" | remove: "/" }}{% endcapture %}
{% if locale == "" %}{% assign locale = "en" %}{% endif %}
For a page like /en/blog/, locale will be 'en'; for /fr/le-blog, it will be 'fr'. You will have to use that line in all the layouts and includes that need to use the locale, though.
You can then get localized texts like this:
{{ site.locales[locale].welcome_message }}
Or, if you prefer page.locale:
{{ site.locales[page.locale].welcome_message }}
Menus are the same; you can generate them from _config.yml, too:
# _config.yml
...
locales:
en:
nav:
- text: Welcome
url: /en/welcome
- text: Blog
url: /en/blog
layout: post
...
es:
nav:
- text: Bienvenido
url: /es/bienvenido
- text: Blog
url: /es/blog
layout: post
...
Then you can have a single menu.html that generates the right menu depending on the page locale:
{% capture locale %}{{ page.url | truncate: 3, "" | remove: "/" }}{% endcapture %}
{% if locale == "" %}{% assign locale = "en" %}{% endif %}
<nav>
<ul class="nav">
{% for link in site.locales[locale].nav %}
{% assign current = nil %}
{% if page.url == link.url or page.layout == link.layout %}
{% assign current = 'current' %}
{% endif %}
<li class="{% if forloop.first %}first{% endif %} {{ current }} {% if forloop.last %}last{% endif %}">
<a class="{{ current }}" href="{{ link.url }}">{{ link.text }}</a>
</li>
{% endfor %}
</ul>
</nav>
For using ´page.locale´ instead of ´locale´, just remove the first two lines and replace site.locales[locale].nav by site.locales[page.locale].nav
I hope this helps.
Regards!
How about creating a filter, wouldn't it be simpler? Something like:
<li>{{some_text_id|localize</li>