Can you create template pages in Jekyll? - jekyll

I have the following 2 pages:
---
<!-- pages/apple.md -->
title: Apple Nutrition Info
permalink: /info/apple
---
{% assign fruit = site.data.info.apple %}
Carbs: {{fruit.carbs}}
Sugar: {{fruit.sugar}}
![Apple](/assets/images/apple.png)
---
<!-- pages/orange.md -->
title: Orange Nutrition Info
permalink: /info/orange
---
{% assign fruit = site.data.info.orange %}
Carbs: {{fruit.carbs}}
Sugar: {{fruit.sugar}}
![Orange](assets/images/orange.png)
Since the pages' content are almost identical, is it possible to template the entire page itself, and somehow pass data like "apple", "orange", "banana" to the page?
I would love to do something like this:
---
<!-- pages/info.md -->
title: {{args.fruit | capitalize}} Nutrition Info
permalink: /info/{{args.fruit}}
---
{% assign fruit = site.data.info.{{args.fruit}} %}
Carbs: {{fruit.carbs}}
Sugar: {{fruit.sugar}}
![{{args.fruit | capitalize}}](assets/images/{{args.fruit}}.png)
Is this possible?

A bypass is to use collections instead of pages+data. (The doc on collections offers an example about authors with names and positions, similar to your fruits with carbs and sugar.)
_config.yml:
# …… (title, domain, plugins, etc.)
collections:
fruits:
output: true
permalink: /fruits/:name/
defaults:
- scope:
path: ""
type: fruits
values:
layout: fruit
(Permalinks pattern for collections can be different from pages, see Permalinks | Jekyll Doc if necessary.)
_layouts/fruit.md:
---
layout: default
---
- Carbs: {{ page.carbs }}
- Sugar: {{ page.sugar }}
![{{ page.name | capitalize }}](assets/images/{{page.name}}.png)
_fruits/apple.md:
---
name: apple
carbs: ○○
sugar: □□
---

Related

Using liquid to sort posts by the latest date(latest(posted_date, updated_date))

I'm writing a site in Jekyll, which uses Liquid.
I have ymal for pages , like this:
---
title: Mytitle
posted: 2020-06-29
updated: 2020-07-29
....
---
And I have some posts, as follows
{
title: title1
posted: 2020-06-29
updated: 2020-07-29
},
{
title: title2
posted: 2020-07-05
},
{
title: title 3
posted: 2020-07-01
updated: 2020-07-20
},
{
title: title 4
posted: 2020-07-22
},
I expect the order of posts which is sorted by the latest date, i.e. latest(posted, updated).
liquid seems cannot sort by custom function? Can someone tell me what to do?
Thanks
By default site.posts are sorted by the date property (newest fist), which you called posed. So you may want to rename it to date to make your life easier.
For custom sorting you can use the Liquid sort filter, which takes one argument.
So if you want to sort by updated instead, you can do that with:
{% assign my_sorted_list = site.posts | sort:"updated" %}
{% for post in my_sorted_list %}
...
{% endfor %}
You'll need to set the updated property then for every post or use a custom hook as explained here.

Jekyll `site.posts` appearing empty after incorporating custom domain with Github page

I am building a simple static site as my personal website with Jekyll. I am using GitHub pages for hosting it (https://username.github.io). Recently I am trying to incorporate my custom domain with it and facing a problem.
For example, I have a page titled posts.html whose content is like this:
---
layout: page
title: Posts
permalink: posts
---
Some Text
<ul>
{% for post in site.posts %}
<li> List item </li>
{% endfor %}
</ul>
Previously everything was appearing as expected. But after incorporating custom domain no list item is appearing(even though everything is perfect when I run locally). I suppose site.posts is appearing empty. Any suggestion why is?
I have another page like following which loops through something other than site.posts. It is appearing perfect even after incorporating custom domain.
---
layout: page
title: Books I Have Read
permalink: read-books
---
Some text
<ul>
{% for book in site.data.read-books %}
<li>
<a href={{book.goodreads}}> {{book.title}} </a>;
{{book.author}} [{{book.date}}]
{% if book.comment %}
<br/>
(Opinion: {{book.comment}})
{% endif %}
</li>
{% endfor %}
</ul>
Format of my posts: YYYY-MM-DD-title.md
Name of posts directory: _posts
Local Jekyll version is: 3.7.0
_config.yml content:
Title: Md. Taufique Hussain
brieftitle: Taufique
baseUrl: ""
# Where things are
source: .
destination: ./_site
collections_dir: .
plugins_dir: _plugins
layouts_dir: _layouts
data_dir: _data
includes_dir: _includes
collections:
posts:
output: true
# Handling Reading
safe: false
include: [".htaccess"]
exclude: ["Gemfile", "Gemfile.lock", "node_modules", "vendor/bundle/", "vendor/cache/", "vendor/gems/", "vendor/ruby/"]
keep_files: [".git", ".svn"]
encoding: "utf-8"
markdown_ext: "markdown,mkdown,mkdn,mkd,md"
strict_front_matter: false
# Filtering Content
show_drafts: null
limit_posts: 0
future: false
unpublished: false
# Plugins
whitelist: []
plugins:
- jekyll-seo-tag
# Conversion
markdown: kramdown
highlighter: rouge
lsi: false
excerpt_separator: "\n\n"
incremental: false
# Serving
detach: false
port: 4000
host: 127.0.0.1
baseurl: "" # does not include hostname
show_dir_listing: false
# Outputting
permalink: date
paginate_path: /page:num
timezone: null
quiet: false
verbose: false
defaults: []
liquid:
error_mode: warn
# Markdown Processors
rdiscount:
extensions: []
redcarpet:
extensions: []
kramdown:
auto_ids: true
entity_output: as_char
toc_levels: 1..6
smart_quotes: lsquo,rsquo,ldquo,rdquo
input: GFM
hard_wrap: false
footnote_nr: 1
First is you want to locally test Jekyll in Github Pages configuration, your Gemfile must contain :
source "https://rubygems.org"
gem 'github-pages'
All plugins available on gh pages will be loaded, see complete list here.
This will allow you to reproduce gh pages error which comes from one of your config directive :
collections_dir: .
If you delete or comment this directive everything is back to normal.

cant find the error in jekyll... "did not find expected key while parsing a block mapping"

I'm a relative newbee to jekyll and liquid. I had this running a while ago but messed it up somehow, without a backup. When finding something the error just shifts to somewhere else... Please take a look.
Here is my code:
---
title: Gallery
layout: gallery
heroimage: /img/hero-image-gallery.jpg
imgsize: small
masonry:
itemsize: 33.333%
categories:
- Objects
- People
- Places
images:
- title: one
thumb: img/gallery-image-one.jpg
big: img/gallery-image-one.jpg
categories:
- People
- Places
- title: two
thumb: img/gallery-image-two.jpg
big: img/gallery-image-two.jpg
categories:
- Objects
- Places
- title: three
thumb: img/gallery-image-three.jpg
big: img/gallery-image-three.jpg
categories:
- People
- title: four
thumb: img/gallery-image-four.jpg
big: img/gallery-image-four.jpg
categories:
- Objects
- Places
- title: five
thumb: img/gallery-image-five.jpg
big: img/gallery-image-five.jpg
categories:
- Objects
- title: eight
thumb: img/gallery-image-eight.jpg
big: img/gallery-image-eight.jpg
categories:
- Places
- title: seven
thumb: img/gallery-image-seven.jpg
big: img/gallery-image-seven.jpg
categories:
- Places
- title: six
thumb: img/gallery-image-six.jpg
big: img/gallery-image-six.jpg
categories:
- Objects
- People
- title: bla
thumb: img/gallery-image-six.jpg
big: img/gallery-image-six.jpg
categories:
- Objects
- People
---
<div class="portfolioFilter">
Alle
{% for cat in page.categories %}
{{cat}}
{% endfor %}
</div><br>
<div class="grid">
<div class="grid-sizer"></div>
{% for item in page.images %}
<div class="grid-item{% for cat in item.categories %} {{cat | slugify}}{% endfor %}">
<a class="example-image-link" href="{{item.big}}" data-lightbox="example-set" ><img src="{{item.thumb}}"/></a>
</div>
{% endfor %}
</div>
And here is the error I'm getting:
Error reading file /Users/maxborm/Desktop/lukawebsite/gallery.html: (<unknown>): did not find expected key while parsing a block mapping at line 2 column 1
Thanks in advance.
Indentation is very important in Liquid, and you have to make sure you have the right amount of spaces when declaring collections.
In your case, you have an extra space before - title: bla which is causing the error.
i.e. you have:
- title: bla
when you should have:
- title: bla

How to vary jekyll's `site.title` on different pages?

I want to present a different site title in different parts of my site (identified by a path prefix). The ideal setup would look like:
_includes/header.html contains:
<a class="site-title" href="{{ site.baseurl }}/">{{ site.title }}</a>
with the header being included in page and post templates, and
_config.yml contains:
defaults:
-
scope:
path: ""
values:
title: logophile
-
scope:
path: "blog"
values:
title: (b)logophile
This however writes an empty string into the generated html.
Alternatives I've tried:
In _config.yml use site.title: logophile / site.title: (b)logophile
In _config.yml define my_site_title: logophile etc and use {{ my_site_title }} in _includes/header.html
Your default title will only change page.title if it's not already set. So, this will not work.
You can set default like this :
defaults:
-
scope:
path: ""
values:
alternative_site_title: logophile
-
scope:
path: "blog"
values:
alternative_site_title: (b)logophile
And call this variable like this :
<a class="site-title" href="{{ site.baseurl }}/">
{{ page.alternative_site_title }}
</a>

Sorted Map Iteration in Go Templates?

I'm building a website in Go, using the Hugo static site generator. What I'm trying to do is build a dynamic navigation bar for my web pages.
Here's what I'm doing:
In my config.yml file, I've defined a Map of links that I'd like to appear in my navbar -- here's what this file looks like:
baseurl: "https://www.rdegges.com/"
languageCode: "en-us"
title: "Randall Degges"
params:
navLinks: {"Twitter": "https://twitter.com/rdegges", "Facebook": "https://www.facebook.com/rdegges", "Google+": "https://plus.google.com/109157194342162880262", "Github": "https://github.com/rdegges"}
So, I've also got an index.html template in Hugo that contains a navbar which looks like this:
<nav>
<ul>
{{ range sort $title, $link := .Site.Params.navLinks }}
<li>{{ $title }}</li>
{{ end }}
</ul>
</nav>
This above code works correctly, with one exception: I'd like to order the results of my links instead of having them randomly ordered each time.
I know that Maps are not inherently structured in Go -- but is there a way to retain the original ordering of my navigation elements in some way?
Thanks for the help!
Go templates sort maps by key. If you want to force a specific order, then use a slice:
Here's the YAML:
baseurl: "https://www.rdegges.com/"
languageCode: "en-us"
title: "Randall Degges"
params:
navLinks:
- title: Twitter
url: https://twitter.com/rdegges
- title: Facebook
url: https://www.facebook.com/rdegges
... and the template:
<nav>
<ul>
{{ range $link := .Site.Params.navLinks }}
<li>{{ $link.title }}</li>
{{ end }}
</ul>
</nav>