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/
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 a Jekyll site that uses kramdown for markdown. In _config.yml I have the following setting that ensures that only <h2> and <h3> elements show up in the automatically generated table of contents:
kramdown:
toc_levels: "2,3"
This works fine, but on some pages I would like to include <h4> elements in the TOC as well, while retaining the existing <h2> and <h3> configuration on other pages. Is this possible?
On any page I can access the _config.yml definitions like this:
{{ site.kramdown.toc_levels }}
Is there a way to set the value of the toc_levels on a page?
I looked through the codes. It appears page-level settings are not possible for Kramdown at this moment. You are left with {:.no_toc} option to suppress unexpected tags.
Is there any global option for rdiscount to enable parsing markdown in block html tags? And any way to use that option within Octopress/Jekyll? This is the option that Kramdown supports:
parse_block_html Process kramdown syntax in block HTML tags If this
option is true, the kramdown parser processes the content of block
HTML tags as text containing block-level elements. Since this is not
wanted normally, the default is false. It is normally better to
selectively enable kramdown processing via the markdown attribute.
Default: false
Unfortunately, Jekyll does not pass this kramdown flag to kramdown. I opened an issue on that: https://github.com/mojombo/jekyll/issues/1095
No. There is no RDiscount option for this. All options are listed in the API docs here:
http://rdoc.info/github/davidfstr/rdiscount/RDiscount
Here is a workaround for Jekyll/Octopress. Consider the following example:
<div>
I want this to be in *Markdown*!
</div>
You can use the markdownify tag in Jekyll to manually force a section to be in Markdown:
<div>
{% capture m %}I want this to be in *Markdown*!{% endcapture %}
{{ m | markdownify }}
</div>
I'm trying to nest markdown in an HTML file while using Jekyll. Is there a way to achieve something like the following?
# index.html
---
layout: default
---
<p>[Stack Overflow](http://www.stackoverflow.com)</p>
Note: I'm aware that I could do this instead.
# index.html
---
layout: default
---
<p>Stack Overflow</p>
If you are using Kramdown, based on their doc you can do this:
<div markdown="1">
My text with **markdown** syntax
</div>
And this way, the text within the div is rendered as markdown.
Make sure to use the .md or .markdown extension for the file, as .html files aren't sent to Kramdown for processing!
Here's how you can define a markdown block with a Jekyll plugin:
module Jekyll
class MarkdownBlock < Liquid::Block
def initialize(tag_name, text, tokens)
super
end
require "kramdown"
def render(context)
content = super
"#{Kramdown::Document.new(content).to_html}"
end
end
end
Liquid::Template.register_tag('markdown', Jekyll::MarkdownBlock)
(To install this snippet as a plugin, put it in a *.rb file under _plugins directory of your source site root)
Then, use it like this:
{% markdown %}
[Stack Overflow](http://www.stackoverflow.com)
{% endmarkdown %}
EDIT: See #Cristian's answer for a better solution! If you're using Kramdown (which is likely the case since you are using Jekyll), you can use it's feature to render markdown inside div's with a markdown="1" attribute.
As of current Jekyll 3.6.2 life can be a lot simpler with the following two options:
<div>
{{ "## Yes, this renders as markdown" | markdownify }}
</div>
note the markdown-attribute:
<div markdown="1">
## some markdown
inside some html. `snippet` _italic_ **bold**
</div>
#sunny-juneja, check out the Liquid Extension Filter called markdownify:
https://github.com/mojombo/jekyll/wiki/liquid-extensions#markdownify
Use it like this:
<p>{{ '[Stack Overflow](http://www.stackoverflow.com)' | markdownify }}</p>
Put single or double quotes around your string inside of the Output tag.
Works for me on Jekyll 1.0.0beta3
I just recently spent way too many hours trying to do something similar. #J.T.'s 2nd bullet point, referencing markdownify, is what ultimately got me moving in the right direction.
I had in my _layouts directory a few different layouts. One of them, I wanted to add a bit of an "index" before the page content. The index was working perfectly as a partial, if I called it directly from a page or post, but not when trying to add it to a layout.
Here's what I had:
---
layout: default
---
<div class="table-of-contents">
{% include series_index.md %}
{{ content }}
</div>
But it wouldn't work. Instead of rendering HTML on the page, the include was spitting out the markdown, which was then being added to the page as an ugly block of markdown, instead of rendering the markdown as HTML.
So, I tried tacking | markdownify to the include statement, like so:
{% include jekyll-bug-fix-index.md | markdownify %}
and that didn't work.
The solution, using a variable, a capture "block", and markdownify
So, I captured the markdown, saved to a variable, and then rendered the variable with the liquid markdownify tag:
{% capture index %}
{% include series_index.md %}
{% endcapture %}
{{ index | markdownify }}
And this works! The Markdown is rendered as HTML on my pages, and all is right in the world.
I have no doubt this is unconventional, and I hope to someday learn a better solution, but it's 100% good enough for me, and I wanted to share so others might benefit from this.
To convert the markdown-formatted string to HTML in a Jekyll page, there are THREE WAYS can be selected as below:
1. Kramdown:
If you are using Kramdown, based on their doc you can do this:
<div markdown="1">
## Some Markdown Title
Let's have a look. `snippet` _italic_ **bold**
</div>
The markdown attribute:
If an HTML tag has an attribute markdown="0", then the tag is parsed as raw HTML block.
If an HTML tag has an attribute markdown="1", then the default mechanism for parsing syntax in this tag is used.
If an HTML tag has an attribute markdown="block", then the content of the tag is parsed as block level elements.
If an HTML tag has an attribute markdown="span", then the content of the tag is parsed as span level elements.
Requirments:
The markdown content need to be within the DIV tag.
Make sure to use the .md or .markdown extension for the file
as .html files aren't sent to Kramdown for processing)
2. Liquid Extension Filter
There is a liquid extension filter called markdownify, it also can help you convert a Markdown-formatted string into HTML.
<div>
{{ "Renders as markdown. `snippet` _italic_ **bold**" | markdownify }}
</div>
3. Jekyll plugin:
jekyll-spaceship - 🚀 A Jekyll plugin to provide powerful supports for table, mathjax, mermaid, plantuml, emoji, youtube, vimeo, dailymotion, etc.
https://github.com/jeffreytse/jekyll-spaceship
With this plugin, it's easy to write markdown inside HTML:
<script type="text/markdown">
# Hybrid HTML with Markdown is a not bad choice ^\_^
##2. Table Usage
| : Fruits \|\| Food : |||
| :--------- | :-------- | :-------- |
| Apple | : Apple :| Apple \
| Banana | Banana | Banana \
| Orange | Orange | Orange |
| : Rowspan is 4 : || How's it? |
|^^ A. Peach || 1. Fine :|
|^^ B. Orange ||^^ 2. Bad |
|^^ C. Banana || It's OK! |
## PlantUML Usage
#startuml
Bob -> Alice : hello
#enduml
## Video Usage
![](https://www.youtube.com/watch?v=Ptk_1Dc2iPY)
</script>
Take a look at Paul Irish's Gist for a JS code that can interpret sections of your page from Markdown to HTML.