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/
Related
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.
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 want to create an archive for old blog posts on my jekyll site. Previously, my structure was serving the contents of _posts on my website homepage, index.html. After reading the collections documentation and a few tutorials online, I have added a collection folder _archive to my structure and a test file inside called test-file.markdown.
However, the url mysite.com/archive/test-file fully regenerates my main index.html, not the collection contents.
Structure:
_archive
index.html
test-file.markdown
_includes
about.html
head.html
... other stuff ...
_layouts
default.html
_posts
post1.markdown
post2.markdown
... other stuff ...
css
img
js
_config.yaml
... other stuff ...
test-file.markdown
---
layout: default
title: test
---
_config.yml
# Site settings
title: test
email: test#test.com
url: http://www.test.com
# Color settings (hex-codes without the leading hash-tag)
color:
primary: ffffff #80B3FF
primary-rgb: "24,288,156" #"128,179,255"
secondary: 2c3e50 #FD6E8A
secondary-dark: 233140 #A2122F
third: 979797
collections:
archive:
output: true
permalink: /archive/:path/
# Build settings
markdown: kramdown
permalink: pretty
mysite.com/archive/index.html
---
---
{% for p in site.archive %}
{{ p}}
{{ p.title }}
{% endfor %}
This re-renders the main index.html, not the contents of test-file.markdown.
How can I properly render the contents of _archive at mysite.com/archive/?
EDIT: added --- to index.html
Did you add the:
---
---
{% for p in site.archive %}
{{ p}}
{{ p.title }}
{% endfor %}
on the top of the index.html file? If it's missing it won't run any content within in that file through jekyll's templating engine.
It's hard to tell what your problem really is without seeing the whole site. Provide a repo URL if possible.
If the contents of /index.html are appearing in the /_archive/test-file.markdown output, the post loop is probably in the default layout file, since both of the files share that layout. The solution here would be to move the relevant content into /index.html.
I believe that your /_archive/index.html is not being output. Move /_archive/index.html to /archive.html. Jekyll doesn't process pages inside of the _archive folder because it starts with an underscore.
You'd then have these files output with your current config:
/archive/index.html
/archive/test-file/index.html
In my opinion, you should keep posts as posts, whether they are archived or not. You would then keep the URLs when posts are archived rather than having to set 301s or losing them to the great void.
To do this, add front matter to your archived posts:
---
archived: true
---
And your current posts (you could use defaults to save repetition):
---
archived: false
---
Exclude the archived posts in your main post loop:
{% assign posts = site.posts | where: "archived", false %}
Exclude the current posts on your archive page:
{% assign archived_posts = site.posts | where: "archived", true %}
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.
I have the following layout files for my Jekyll project :
_layouts
main.html
post.html
In all cases, I load the main.html layout. If the requested page is a post, I nest the post.html layout inside the main one using {{ content }}.
Is it possible to know (from the main layout) if a sublayout has been loaded ?
You can use a Front matter entry for that.
---
layout: post.html
sublayout = post.html
---
And in your page.html you can then check {{ page.sublayout }}. {{ page.layout itself }} will be main.html in the outer template.