Jekyll multiple pages using the same template - html

I'm aware you can use _layouts and in your pages do something like
---
layout: some_layout
title: Home
---
So say I have 20 pages. All using the same template but slightly different content and stuff inside.
Instead of creating 20 different pages.html files with different names and different permalinks.
Is there a way to create 1 page.html and based on the permalink change what's inside the {{ content }}?

Just create your-slug.md files. Let them all use the same layout, like this:
---
layout: some_layout
title: Your title
---
In the layout file (some_layout.html) you put some logic, like this:
{% if page.url contains '/your-slug' %}Put this on the screen.{% endif %}

You could organize the 20 pages under a collection and assign defaults on the collection.
For example, say your collection is labelled docs, then all those 20 pages need to be placed inside a directory named _docs, at the root of your source directory. Following that configure your collection to use the layout some_layout for its documents.
# _config.yml
# enable rendering on your collection(s)
collections:
docs:
output: true
another_collection:
output: true
# set defaults on your collection. (note the indentation..)
defaults:
-
scope:
type: docs
path: _docs
values:
layout: some_layout # The layout for this collections' files
-
scope:
type: another_collection
[...]

I have not tried this yet, but there is a closed github issue: https://github.com/jekyll/jekyll/issues/16
There are suggestions to write/use a jekyll plugin like the ones below. These are links from the issue and their state is unknown to me.
https://github.com/ixti/ixti.github.io/blob/source/_plugins/categories.rb
https://github.com/rfelix/my_jekyll_extensions/tree/master/category_gen
how to write a plugin: https://jekyllrb.com/docs/plugins/

Related

YML content not displaying in Jekyll collections

I am trying to display items from a collection called fiction. Nothing other than the url is displaying on the website.
The for loop for collection is here
{% for fiction_item in site.fiction %}
<ul class="col-xl-3 col-lg-4 col-md-6 mb-4">
<li class="bg-white"><img class="img-fluid card-img-top" src="{{ fiction_item.image_url }}" alt="{{ fiction_item.title }}">
<div class="p-4 art-content">
<h5>{{ fiction_item.title }}</h5>
<h6>by {{ fiction_item.writer }}</h6>
<p class="small text mb-0">{{ fiction_item.caption }}</p><a class="btn border-pretty" href="{{ site.url }}{{ fiction_item.url }}">More</a>
</div>
</li>
</ul>
{% endfor %}
My _config.yml is written like this
name: The Book Project
url: '/experiment/'
baseurl: '/experiment/'
collections:
nonfiction:
output: true
fiction:
output: true
art:
output: true
poetry:
output: true
defaults:
- scope:
path: ""
type: "nonfiction"
values:
layout: "blog"
- scope:
path: ""
type: "fiction"
values:
layout: "blog"
- scope:
path: ""
type: "art"
values:
layout: "blog"
- scope:
path: ""
type: "poetry"
values:
layout: "blog"
The markdown content is like this:
---
layout: blog
title: History of India
image_url: https://upload.wikimedia.org/wikipedia/commons/thumb/a/a4/Cave_26%2C_Ajanta.jpg/348px-Cave_26%2C_Ajanta.jpg
writer: Adnan Abbasi
caption: Whendefining a collection as a sequence, its pages will not be rendered by default. To enable this, output: true must be specified on the collection, which requires defining the collection as a mapping. For more information, see the section Output. Gather your collections 3.7.0. You can optionally specify a directory to store all your collections in the same place with collections_dir: my_collections. Then Jekyll will look in my_collections/_books for the books collection, and in my ...
---
When defining a collection as a sequence, its pages will not be rendered by default. To enable this, output: true must be specified on the collection, which requires defining the collection as a mapping. For more information, see the section Output. Gather your collections 3.7.0. You When defining a collection as a sequence, its pages will not be rendered by default. To enable this, output: true must be specified on the collection, which requires defining the collection as a mapping. For more information, see the section Output. Gather your collections 3.7.0. YouWhendefining a collection as a sequence, its pages will not be rendered by default. To enable this, output: true must be specified on the collection, which requires defining the collection as a mapping. For more information, see the section Output. Gather your collections 3.7.0. You
When defining a collection as a sequence, its pages will not be rendered by default. To enable this, output: true must be specified on the collection, which requires defining the collection as a mapping. For more information, see the section Output. Gather your collections 3.7.0. You When defining a collection as a sequence, its pages will not be rendered by default. To enable this, output: true must be specified on the collection, which requires defining the collection as a mapping. For more information, see the section Output. Gather your collections 3.7.0. YouWhendefining a collection as a sequence, its pages will not be rendered by default. To enable this, output: true must be specified on the collection, which requires defining the collection as a mapping. For more information, see the section Output. Gather your collections 3.7.0. You
The same problem happens on individual collection page:
The link to the project is here: http://thebookproject.team/experiment/fiction.html
The link to its github is here: https://github.com/thebookproject/experiment
Where exactly am I going wrong?
The problem lies within the front matter of the markdown files.
When I tried building the site locally, I got an error saying that front matter parsing failed:
caption: blah blah collections_dir: my_collections.
In this line, there are multiple variable declarations, caption: and collections_dir:. To fix this, try enclosing your caption in quotes, like this:
caption: "blah blah collections_dir: my_collections."
This fixed the build error for me.

jekyll front matter variable don't work

I'm starting to use jekyll, but when trying to customize a variable it does not work.
My code
---
layout: default
hello: "teste liquid"
---
<h1>{{ page.hello }}</h1>
but this don't work, it does not print anything in html, it leaves empty
do I need to do any additional configuration on jekyll?
I'm writing this because I had the same problem and I lost half a day trying to figure out what caused it.
When I installed jekyll and created a new site I got the following file by default: index.markdown with an empty front matter in it (two lines of three dashes each).
I also created an index.html file as the Jekyll tutorial suggested.
Apparently, if you have both files and you try to add front matter to the HTML file the whole site breaks and the default jekyll page is displayed instead of the index.html page.
The solution is to remove or rename the index.markdown file so the HTML file is the only index.
Note, that if you don't add front matter to the HTML page the HTML page is displayed normally (but, of course, the liquid tags {{ }} don't work)
Hope this help.
Thanks to virginiarcrz for pointing this solution out.
I had this issue. There was an extra space after toggling a comment '#' tag in the frontmatter of my index.md:
---
#title: index
title: index2
----
and I fixed it by removing the space:
---
#title: index
title: index2
----

Use per-page title with a Jekyll theme

This is my personal GH Pages site.
I have this set in my /_config.yml:
theme: jekyll-theme-cayman
title: iBug # GitHub
description: The small personal site for iBug
Now it shows a big title iBug # GitHub and a tagline on every page GH Pages generates. I want to set overrides for specific pages. I tried
---
title: Blog index
---
in /blog/index.html, but it doesn't work. It only changes the HTML title of the page (browser title bar), but not the "title" in the big block on the top of the page.
How do I set an override title for a single page?
Update: I have since submitted a pull request to change this in the theme, and the answer below is no longer necessary since it's already been applied when you use the theme as of now. All you need to do is to specify the title override in the front matter:
---
title: My custom title
---
To specify another title, you need to change the layout file.
Copy the default layout and place it in <GitHub repo>/_layouts/default.html, and change line 16 to this:
<h1 class="project-name">{{ page.title | default: site.title }}</h1>
Then Jekyll will respect the title set in the front matter, and place it there.
This is just the way this theme is implemented, if you check the default layout for Cayman theme on line 14 you can see what exact variable it is using.
<h1 class="project-name">{{ site.title | default: site.github.repository_name }}</h1>
Hope that helps!
My approach is using javascript as follows.
<script>
document.getElementsByClassName("project-name").item(0).innerText = "{{ page.title }}";
</script>
You can write a html file in _includes dir and use {% include your_file.html %}.

How to create sub md files with content that applies to the page md files

I'm creating a website using Jekyll.
so far I have four pages which are created automatically from four md files which md files are in the root of the project.
index.md
about.md
login.md
register.md
Here is the content inside my login.md file
---
layout: layout-default
title: some login title
permalink: /login
theme: secondary-theme
nav:
menu-items:
- type: text
text: Don't have an account?
- type: link
text: SIGN UP
class: button
linkPath: /register
sections:
- type: 3
class: form-section
header-line-2: Login Section!
form:
api: http://127.0.0.1:8080/login
submit-text: LOG IN
form-controls:
- label-text: EMAIL ADDRESS
input-type: email
input-placeholder: Enter your email
input-name: email
- label-text: PASSWORD
label-link-text: Forgot password?
label-link-path: #
input-type: password
input-placeholder: Enter your password
input-name: password
---
What i do is iterating the sections and applying html attribute values depending on the variables inside each section. That way i can have as many sections rendered as i want on one page. And they can also be different depending on the classes and content i put in the md file.
The problem is that if the project gets too complicated with different styles for sections and so on. I would like to separate each section content. It would be nice if i could make a folder lets say login/sections folder
and then put md files inside and then inside login.md file include these section md files. This way the code would be much more organized.
Is there way to do that, and is my approach actually good.
Jekyll provides the ability to include files into another files. The magic directory for this is _includes. Example:
If you create a file named _includes/sections/s1.html, you can include that into any other file with the following tag:
{% include sections/s1.html %}
This approach works for:
including HTML file into HTML
including HTML file into Markdown (since Markdown can contain HTML code)
including Markdown into Markdown
If you want to include a Markdown file into a HTML, you have to use some trick:
{% capture m %}{% include sections/s1.md %}{% endcapture %}
{{ m | markdownify }}

Can you use Jekyll layout variables in pages?

In a Jekyll layout, default.html, you initialize a variable
{% assign relative_path = "../../" %}
Inside a page using default layout, this variable is empty though.
How can you use inside pages variables set in layout?
This is the opposite of
Can you use Jekyll page variables in a layout?
After some research in Jekyll code, it seems that you cannot access layout variables from a page or post. The only information about layout a page can see is the layout's name {{ page.layout }}.
Then you can use this to store some layout related variables in _config.yml and get them from any post/page using the {{ page.layout }} variable.
_config.yml
layoutVars:
default:
relative_path: "../../"
post:
relative_path: "an other path"
page:
relative_path: "hello world"
use in a page or post
{% assign pagePath = site.layoutVars[page.layout].relative_path %}
You have two possibilities.
Store your variable in the layouts yaml-header, e.g.:
---
variable : value
---
Have a look at jekylls front matter defaults. You can declare variables depending on the type of posts/documents and the folder the posts are stored in.
I'm not if this is what you are looking for, but i hope it helps...