I'm using jekyll with GitHub pages for my blog. How can I display a short sentence right below my post title in the index/ home page? As an example, I am trying to write text between the red brackets:
example image
I've seen other posts on this site that ask a similar question, but they are very old and it seems that jekyll has changed since then. Any help would be appreciated.
If these are posts you should be able to use {{ post.excerpt }}. You can see more in the docs: https://jekyllrb.com/docs/posts/
If it's a page (and not a post) you'll need to use {{ page.content | truncatewords: 30 }}. See more in the docs: https://shopify.github.io/liquid/filters/truncatewords/
A note about page.content: if that page is HTML code you'll need to use the strip_html filter. If that page has liquid, there is no filter to strip that and you will need to add the excerpt to the front matter. Something like this:
---
title: This is a post title
description: This is a post description.
excerpt: This is the post excerpt.
---
{{ page.excerpt }}
In my Jekyll theme, some of my blog posts are shown as it is on the home page. But I want to limit them up to certain lines. That is, I want to show only 5-6 lines of the blog on the home page.
For example,
In,
1. 5 lines of the blog post are visible
2. Only two lines of the blog post are visible
3. In the last post of the page the entire blog post is visible on the homepage.
I am new to Jekyll and I don't know how can I do that. The theme I am using is the earlier version of White Paper
The preview text from each blog posts are from {{ post.excerpt }} in index.html[1]. It looks like the White Paper jekyll theme is using the default behavior of Post excerpts[2].
By default this is the first paragraph of content in the post, however
it can be customized by setting a excerpt_separator variable in front
matter or _config.yml.
If you want to control how much text is previewed for each blog post, you can stop using {{ post.excerpt }} and do something like {{ post.content | truncatewords: 60 }} instead.
These {{ ... }} code snippets are from the Liquid templating language [3][4]
[1] https://github.com/vinitkumar/white-paper/blob/3995398d74b42ee70ad2e4c82a0ab8955ad49955/index.html#L10
[2] https://jekyllrb.com/docs/posts/#post-excerpts
[3] https://jekyllrb.com/docs/liquid/
[4] https://shopify.github.io/liquid/
If you'd like to have more variation in excerpt size by each post, you can also use an excerpt-separator anywhere you'd like in the body of your posts [1].
By default this is the first paragraph of content in the post, however
it can be customized by setting a excerpt_separator variable in front
matter or _config.yml
[1] https://jekyllrb.com/docs/posts/#post-excerpts
I need to provide page content reference list (it should contain references on sections on page).
The only way which I can see is to use page.content and parse it, but I stumbled on problem with data evaluation. For example I can pull out this string from page.content: {{site.data.sdk.language}} SDK but there is no way to make jekyll process it, it outputs as is.
Also I want to make it possible to create cross-pages links (on specific section on page, but that link generated by another inclusion and doesn't persist in page.content in HTML form).
Is there any way to make it evaluate values from page.content?
P.S. I'm including piece of code which should build page content and return HTML with list (so there is no recursions).
P.P.S. I can't use submodules, because I need to run this pages on github pages.
Thanks.
Shouldn't {{ site.data.sdk.language | strip_html }} do it? I don't know, most probably I didn't understand the problem. Can you elaborate more? Maybe provide a link to a post you're referring to?
Thinking about the similar
{% assign title = site.data.sdk.language %}
which is a stock Liquid tag and does the job well, so instead of
{% section title={{site.data.sdk.language}} %}
write your code as
{% section title = site.data.sdk.language %}
The key here is that once you enter {%, you're in Liquid. Don't expect Liquid to go "Inception" all over itself. {{ is just a shorthand for "print this to output", but an parameter passing is not output, it's just reading a variable.
You should be able to also go wild and do:
{% section title = site.data.sdk.language | capitalize %}
For more re-read the docs: https://github.com/Shopify/liquid/wiki/Liquid-for-Designers
I want to use liquid tags in a page on a Jekyll site. I have used them successfully in layout files, but when I use them in a page they are not parsed by Liquid.
The page is in html format not Markdown. The page has valid YAML front-matter that is being successfully used by the layout file. Here's the code for the page that isn't parsing:
---
layout: default
title: Media
id: media
order: 2
---
<section id="photos">
<h2>Photographs</h2>
<div id="galleries">
{% for set in site.flickr-sets %}
<div class="gallery" data-set="{{ set }}"></div>
{% endfor %}
</div>
</section>
Is there any obvious reason why this isn't working? I really need to be able to access the site global variable...
EDIT
It seems this issue isn't confined to just that page. I tried creating a new page and using some liquid syntax and got the same result. It's also any liquid syntax not just tags.
In the layout file that these pages use I include the content of the page using {{ page.content }} rather than just {{ content }}. Could that be relevant?
{{ content }} works and it's different than {{ page.content }}
{{ content }} it's parsing all liquid syntax :)
Hope that helps.
So it seems that the answer is that as I suspected. I tested the same code using a new layout file that just called {{ content }} and it rendered correctly. I'm assuming this means that when Jekyll builds it stores raw content in the page object. This is why pages with only html (or Markdown) were being rendered correctly, but any Liquid syntax was not being parsed.
Although this technically answers the question, I still haven't figured out how to solve my problem! It would be useful if there was some sort of filter I could add to {{ page.content }} to make it parse the Liquid syntax.
I know this may be a little late, but I dug up something called {{ page.output }} which is the rendered content of the page.
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
</script>
Take a look at Paul Irish's Gist for a JS code that can interpret sections of your page from Markdown to HTML.