I have layout chaining on an 11ty site. When I add front matter to the base template, the front matter gets rendered and appears in the browser. I don't understand why. Note: Also using nunjucks.
base.njk:
---
test1: hello
---
<!doctype html>
HTML GOES HERE
layer.njk:
---
test2: goodbye
---
{% extends "base.njk" %}
HTML GOES HERE
page.html:
---
layout: layer.njk
---
HTML GOES HERE
{{test1}}
{{test2}}
HTML GOES HERE
When I view the page.html, the templates render properly, but the front matter from base.njk appears on the page. In other words, I see the dashes and the property/value declaration literally. The front matter from layer.njk does not appear on page.
What I am trying to accomplish is to establish global constants in the base.njk so that other pages can access those global constants.
Related
As described in "specifying layout for html posts in jekyll", Jekyll _posts should behave as any other page when it comes from its _layouts, however it isn't doing this way to me right now.
I'm developing this static site to be hosted in a Github Pages and everything else is working fine, but my posts are not.
I also checked the errors in "Jekyll post not generated" about Jekyll _posts, but the problem wasn't solved.
# _posts/2020-06-27-how-I-long-for-summer.md
---
layout: post
title: How I long for Summer
cover: /assets/img/jhonny.jpg
date: 2020-06-27 20:56:28 -0300
categories: text
---
# _layouts/post.html
---
layout: default
---
# layouts/default.html
<!DOCTYPE html>
<html lang="en">
{% include head.html %}
<body>
{% include navbar.html %}
{{ content }}
{%- include footer.html -%}
</body>
</html>
So, even all regular pages are using default layout accordingly, my post pages have been rendered raw, as if I haven't declared any layout to them.
I'm using minima theme, but actually I was expecting it hasn't any effect since I overwrited post layout.
# _config.yml
markdown: kramdown
theme: minima
permalink: :year/:month/:day/:title
I tried what I could. Does anyone have a clue about what I'm doing wrong?
All of your CSS is using relative paths rather than absolute paths and therefore isn't being fetched correctly.
In your various source code files (head.html, footer.html etc.).
assets/js/main.min.js
assets/js/theme.js
assets/css/main.min.css
assets/css/theme.css
assets/main.css // not available
Should be:
/assets/js/main.min.js
/assets/js/theme.js
/assets/css/main.min.css
/assets/css/theme.css
/assets/main.css // not available
Another solution is to use Liquid's relative_url filter:
https://github.com/jekyll/minima/blob/master/_includes/head.html#L6
https://jekyllrb.com/docs/liquid/filters/
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
----
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 %}.
I've a number of 'building blocks' I've created of my own to use when templating a site and I'm wondering how I could use Panini to re-use partials on the same page, with different data.
Say for example I have a partial which basically adds a h1 tag followed by a single p tag but I want to be able to re-use that same partial on the same page with different data each time.
This is the content of the partial file for example;
<h1> {{ h1Header }}</h1>
<p> {{ pParagraph }} </p>
The Frontmatter data in the Index file;
---
h1Header: Hello!
pParagraph: This is some text.
---
And this to call the partial into action;
{{> partial }}
Unless I'm doing something fundamentally wrong the way I'm using it at the moment would mean I'd have to create several different partials for each possible outcome.
I was wondering if there was some way of sending arguments etc. If someone can point me in the right direction with even the simplest of examples just to get a feel of what I can do and what to look into I'd be grateful.
You can pass data to your partials passing a context or parameters to your partial. You can pass different data every-time you render the partial, according to the manual.
Having a partial called test:
<h1>{{foo}}</h1>
You can render it with specific data:
{{> test foo="bar"}}
{{> test foo="foobar"}}
Which results in
<h1>foo</h1>
<h1>foobar</h1>
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.