I've just begun learning Jekyll and I've run into a little speedbump.
I have 2 layouts in my _layout folder which essentially look like this:-
default.html
<html>
<head> <!-- Meta Tags etc --> </head>
<body>
{{ content }}
</body>
</html>
hero.html
---
layout: default
---
<section id="hero">
<h3>{{ hero.descr }}</h3>
</section>
{{ content }}
My index page extends the hero layout as follows:-
index.html
---
layout: hero
descr: Hello there.
---
The layouts work just fine, and the website appears as it should, except for the hero.descr variable. The heading tag is just empty.
The flow of data is uni-directional.
default.html => hero.html => index.html
hero.html will not know what's defined in index.html
But, the rendering is in the opposite direction (inserted into the {{ content }} variable of the parent.
index.html ==> hero.html ==> default.html
It seems to me that the variable {{ hero.descr }} does not exist. I think that it should be {{ page.descr }}.
Related
I'm trying to generate an additional Jekyll page called posts.html.
I'm looking to use the Jekyll variables such as site.posts to iterate through the posts I've written for my site, and create a standalone page (posts.html) using these variables.
Here's my current version:
<!DOCTYPE html>
<html lang="en">
<body>
<main>
{% for post in site.posts %}
{{post.title}};{{post.date}},
{%endfor%}
</main>
</body>
</html>
If I include this at the root of my site, the command bundle exec jekyll build will build posts.html to my _site directory, but does not compile the variables into readable text. It outputs it in plaintext.
I've attempted to hook into the existing build cycle by moving the posts.html file to the _includes directory, and referencing it at the bottom of blog.html.
This does generate the HTML, but as part of the index.html like so:
... Additional markup here
</main>
<section id="category-modal-bg"></section>
<section id="category-modal">
<h1 id="category-modal-title"></h1>
<section id="category-modal-content"></section>
</section>
<!DOCTYPE html>
<html lang="en">
<body>
<main>
MyPostName;MyPostDate,
</main>
</body>
</html>
This makes sense as the layouts/posts.html file is an include, so building the markup where the include exists is working as expected.
I'm trying to compile the posts.html file as a standalone, navigatable file that will sit alongside my _site/index.html. If I need to copy this file across as part of my CI/CD pipeline thats fine too.
Is this possible?
Add an empty front matter before posts.html to let Jekyll process your file. (and move back posts.html)
---
---
<!DOCTYPE html>
<html lang="en">
<body>
<main>
{% for post in site.posts %}
{{post.title}};{{post.date}},
{% endfor %}
</main>
</body>
</html>
Any files with front matter are subject to processing. For each of these files, Jekyll makes a variety of data available via Liquid. (Variables | Jekyll Doc)
You must include front matter on the page for Jekyll to process any Liquid tags on it. (Front Matter | Jekyll Doc)
However in most cases, this is better.
---
layout: default
---
{% for post in site.posts %}
{{post.title}};{{post.date}},
{% endfor %}
By using a layout, you don't have to write <head> or <footer> again and again and again. Layouts also makes it easier to change <head>, etc. (let's say, you want to add Google Analytics someday.)
Besides, I think this may help you, though irrelevant to the question's title.
---
layout: default
---
<ol>
{% for p in site.posts %}
<li>{{ p.title }} — {{ p.date }}</li>
{% endfor %}
</ol>
Comprehensive version: Pagination | Jekyll doc
I have a default.html file in _layout folder. This file contains elements that are common throughout the entire site (e.g., the <head> element), and is supposed to be called in other layout files, which will further extend it.
Depending on the file that calls default.html, I want to include the appropriate snippets in the <head> element.
For instance, consider the (simplified) example files bellow:
_includes/post_metadata.html:
<link rel="stylesheet" href="post.css">
_layouts/default.html
<html>
<head>
{% if <is_post_layout> %}
{% include post_metadata.html %}
{% endif %}
</head>
<body>
{{ content }}
</body>
</html>
_layouts/post_layout.html
---
layout: default
---
<article>
{{ content }}
</article>
_posts/2021-09-22-post.md:
---
layout: post_layout
---
[...]
The final page generated by Jekyll should contain:
<html>
<head>
<link rel="stylesheet" href="post.css">
</head>
<body>
<article>
[...]
</article>
</body>
</html>
So, what code should I use to replace <is_post_layout> to make it work?
There are two (and even more) options.
One is similar to the comment of #Brad West.
You can create many layouts, see docs. So create a post.html (e.g. based on default.html) layout and place it inside _layouts folder. Then you can use the layout in the front matter block. For layouts from scratch can use none for an empty layout.
Use a default layout
---
layout: default
---
Use a post layout
---
layout: post
---
The _layouts/default.html
<html>
<body>
{{ content }}
</body>
</html>
The _layouts/post.html
---
layout: none
---
<html>
<head>
{% include post_metadata.html %}
</head>
<body>
{{ content }}
</body>
</html>
The other one is do it with a variable include_post_metadata in the front matter block. Set the variable to true, when it will be omit then it is false / nil, and the if condition will be not excuted.
---
layout: default
include_post_metadata: true
---
The _layouts/default.html
<html>
<head>
{% if page.include_post_metadata %}
{% include post_metadata.html %}
{% endif %}
</head>
<body>
{{ content }}
</body>
</html>
Page (page.include_post_metadata) is valid for pages and posts
I'm using Jekyll to build a static site for my blog site. Jekyll uses the liquid template engine.
To reference posts (blog posts) in the _posts directory, the code in the index.html is something like this
<ul class="posts">
{% for post in site.posts %}
<!-- do stuff here -->
<div class="container">
<h4 class="card-title"><b>{{ post.title }}</b></h4>
<p class="card-author">{{ post.author }}</p>
</div>
{% endif %}
</ul>
Sample markdown file (.md) in _posts:
---
layout: default
title: "Another Blog Post!"
date: 2021-08-09 00:00:00
cover_image: "https://raw.githubusercontent.com/sharmaabhishekk/sharmaabhishekk.github.io/master/images/cover.png"
categories: main
tag: "advanced"
author: "Abhishek Sharma"
---
Hi this is a blog post!
Jekyll offers powerful support for code snippets:
{% highlight ruby %}
def print_hi(name)
puts "Hi, #{name}"
end
print_hi('Tom')
#=> prints 'Hi, Tom' to STDOUT.
{% endhighlight %}
For each of the markdown files in my _posts directory, it iterates over it and displays it appropriately. More importantly, I can use the post.<attribute> way to refer to variables I set (post.title, post.author) in the markdown file.
However, I'd like to write my posts in HTML and not markdown. I want to know how can I still
how to iterate over the .html files in my _posts directory?
how to define these values in my html file?
how can the template engine parse through and read those variables?
For 2.), I settled on a way to use meta tags to write those values. I'm not sure if that's best practice but this is what I'm doing.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Site Title</title>
<meta name="author" content="Abhishek Sharma">
<meta name="title" content="Blog Post 1">
<meta name="date" content="10-08-2021">
</head>
But then I'm unsure how to reference these meta tag name and content pairs in my index.html liquid template.
I'd appreciate any help with this. Thank you!
You can use HTML files as post or collection items in Jekyll by default:
Rename _posts/2020-01-01-example.md to _posts/2020-01-01-example.html
Change the content to HTML (keep the front matter the same)
You'll iterate over them the same way (with site.posts), and you'll be able to access the front matter as you were.
Here's what your example file would look like (the DOCTYPE and other tags you reference are in your default layout):
---
layout: default
title: "Another Blog Post!"
date: 2021-08-09 00:00:00
cover_image: "https://raw.githubusercontent.com/sharmaabhishekk/sharmaabhishekk.github.io/master/images/cover.png"
categories: main
tag: "advanced"
author: "Abhishek Sharma"
---
<p>Hi this is a blog post!</p>
<p>Jekyll offers powerful support for code snippets:</p>
{% highlight ruby %}
def print_hi(name)
puts "Hi, #{name}"
end
print_hi('Tom')
#=> prints 'Hi, Tom' to STDOUT.
{% endhighlight %}
I've created a new Jekyll page, including the appropriate YAML Front Matter info at the top. My problem is that the page is being rendered without any styles. Upon inspection I see the head tag is empty so the CSS isn't linking. I'm sure I'm missing something painfully obvious but I'm stumped. I see that the style sheet is linked to the index page, just not my new page and I don't know what I'm missing to include the head data that links to my style sheet. Here's what I have in my new page.
---
layout: default
title: New Site
---
<div>
<div>
<h2>
Our Sweet Test Page
</h2>
<section>
<article class="dope-page">
<h1>Test Headline</h1>
</article>
</section>
</div>
</div>
This is exactly what happens when your template is not loaded. Is there a default.html file in your _layouts directory with a link to the stylesheet?
In my point of view, Jekyll render the page alongside index.html using layout parameter and find the layout in the _layouts folder. In your case, you use layout: default so you should check the _layouts/default.html file.
The default.html file generated by jekyll new your_awesome_site should look like below:
<!DOCTYPE html>
<html>
{% include head.html %}
<body>
{% include header.html %}
<div class="page-content">
<div class="wrapper">
{{ content }}
</div>
</div>
{% include footer.html %}
</body>
</html>
And the css files are in _includes/head.html.
I'm using Jekyll to build a static website and the front page scrolls to anchor points up and down the page but if the user go off to a post then the menu obviously doesn't go anywhere due the links being like:
<li class="nav-link"><a data-scroll-goto="4" href="#contact">Contact</a></li>
In Jekyll is there a way say in the cofig file to say if post page then replace menu-A with menu-B?
Thanks,
That's what layouts are made for.
Your /index.html page will use the home.html template
Your posts will use the post.html then the default.html template
index.html
---
layout: home
...
---
your content here
_layouts/home.html
<!DOCTYPE html>
<html>
{% include head.html %}
<body>
{% include menu-a.html %} <----------LOADING Menu a
<div class="page-content">
<div class="wrapper">
{{ content }}
</div>
</div>
{% include footer.html %}
</body>
</html>
_layouts/default.html
<!DOCTYPE html>
<html>
{% include head.html %}
<body>
{% include menu-b.html %} <----------LOADING Menu b
<div class="page-content">
<div class="wrapper">
{{ content }}
</div>
</div>
{% include footer.html %}
</body>
</html>