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

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 }}

Related

Hugo won't render front matter variables when I publish to Netlify

I am building a hugo blog site and I have some front matter that I would like to get rendered in the layouts. When I view the results on my localhost:1313, I can see the front matter being populated, but when I host the site on Netlify, the front matter and partial files won't render.
I'm not sure what else to do. I've cleared the console of any errors, made sure my content files match the layout files etc.
Any help?
Here is the link to the live netlify site: https://stoic-meninsky-a5758a.netlify.app/
Here is my directory structure:
-content
-about
-_index.md
-blog
-_index.md
-post-1.md
-_index.md
-layouts
-_default
-baseOf.html
-about
-section.html
-blog
-section.html
-single.html
_index.html
This is a sample file that is pulled from one of my content markdown files:
---
title: "The Herman Show | Blog"
linktitle: "Blog"
draft: true
newsletter: "This is the newsletter"
---
This is how I call the front matter: <p>{{ .Params.newsletter }}</p>
This is how I loop over the section pages to get a navbar
{{ range .Site.Sections }}
<li>{{ .LinkTitle }}</li>
{{ end }}
Make sure your markdown files in the content directory are marked to: drafts:false

Q: Jekyll - 2 sections displaying nearly same content

I have two very similar sections on a jekyll website.
The displayed content change for only some words or resources.
I handle this using 3 files:
One markdown content without Front Matter. This file content the text with if conditions:
# Mardown Content
Here is more info about:
{% if page.section == 'sectionA' %}
[Something About Setion A](/sectionA/something)
{% elsif page.section == "sectionB" %}
[Something About Setion B](/sectionB/somethingelse)
{% endif %}
Two markdown files with front matter including the content
---
layout: myTemplate
section: sectionA/B
title: something
---
{% include content.md %}
I used to have those 3 files in the same directory using {% include_relative content.md %}. This way seems better because the files were in the same directory and the _include folder do not mix up content and html templates.
But my config of jekyll builds also a page for the content file displaying an html page.
Is there a way to prevent serving this html content?
Do you know a better way to handle this?
In _config.yml add :
exclude:
- content.md
This will instruct Jekyll not to process content.md.
Note : I don't get why you cannot put content.md in the _includes folder.

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 %}.

Jekyll multiple pages using the same template

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/

Sub templates inside of Jekyll

Is there an equivalent to laravel's #section('') blocks in jekyll? What I am trying to do is create a template that can condense the html shared between multiple jekyll pages. For example:
default_layout
<html>
<div class="page-content">
<div class="wrapper">
{{ content }}
</div>
</div>
</html>
page_1
---
layout: default
permalink: xxx
---
<head>
<title>My title</title>
{% include header.html %}
...
<div> <!-- A shared block between pages with different content --> </div>
....
<div> <!-- Another shared block between pages with different content --> </div>
{% include footer.html %}
</html>
It looks like the current offering of jekyll allows you to use sub-templates, but limits the {{content}} block to be a separate file that also inherits the child template. I would need to create a bunch of files that inherent one another to create the final html page (or so I think).
What worked for me in Laravel was using multiple #yield and #section statements to easily insert dynamic data into a shared template. I don't think Jekyll can do this without creating a bunch of nested sub templates, but I hope I am wrong.
Solution 1:
You could use Jekyll's include files for that.
You probably already know about includes, because you're using them in the layout file in your question.
If your shared blocks are just HTML, using an include is all you need.
But maybe (I'm not sure) the shared blocks are text, meaning you'd like to use Markdown for formatting?
By default, Jekyll doesn't render Markdown in include files, but with a little trick it's still possible to include Markdown files.
I have a site where I needed the same block of text (with formatting and links) on multiple pages, so I did this:
Put the text in a Markdown file into the _includes folder, e.g. _includes/info.md
Include that file and render the Markdown by capturing it and then using the markdownify Liquid filter:
{% capture tmp %}{% include info.md %}{% endcapture %}
{{ tmp | markdownify }}
Solution 2:
If the shared blocks are the same for certain groups of pages, maybe you want to use multiple layout files.
The best example of this would be a blog built with Jekyll:
You have a "basic" layout (navigation, sidebar, footer...) that all pages share, and which is directly used by "regular" pages.
Then, you have a second layout "inheriting" from the main one, which adds stuff like post date, tags and so on - this is used by all blog posts.
Here's a simple Jekyll example for this.