I need to get the rendered content (without html tags) of some posts in Jekyll. When I do 'post.content' It returns the full HTML instead of the rendered text. How do I do this?
You can use strip_html filter {{ post.content | strip_html }}
Related
Big thanks to anyone who looks at this! I think the question is straightforward. It is only long because I wanted to be very thorough/ well-documented. I have taken the following example code from the jekyll documentation and edited it only so that I can find it with a permalink:
---
food: Pizza
permalink: "/pizza"
---
<h1>{{ page.food }}</h1>
When I run jekyll serve, the variable is outputted as it should be, but it has no layout. When I try to add a layout that I wrote to the page, the variable no longer outputs, as seen here.
Ultimately, I want to write an archive page that loops through categories, exactly like this code in the documentation:
{% for category in site.categories %}
<h3>{{ category[0] }}</h3>
<ul>
{% for post in category[1] %}
<li>{{ post.title }}</li>
{% endfor %}
</ul>
{% endfor %}
But, because the liquid variables are not working, I cannot make the archive without either putting in in the _layouts directory or manually copy-pasting my layout to the archive page.
Sorry if I'm coming across as a jekyll newbie (I am) or if the answer is in the docs somewhere and I could not find it, but here are my questions:
Why is this behavior happening? Is it something about how jekyll works or is it my layout that is causing this?
What would be the best practice for writing the archive/ correcting this error?
The github repository for this entire project is here
It looks like you are using the wrong liquid tag for trying to get the content. When injecting the page content, use {{ content }} not {{ page.content }}. You can see an example in the docs.
Looking at your includes for post_body.html and body.html, you just need to fix the above and it should work.
I'm trying to output tags as pages from collection items/posts, so if a user clicks on a tag it will take them to a page where I can set the layout to display all items with that specific tag.
I've been trying to use the jekyll-tagging plugin but haven't had much luck. I've tried the following.
This generates all tags within the site as links that lead to a page.
{{ site | tag_cloud }}
This generates the same as above
{{ page | tag_cloud }}
This generates all tags within the page as links but they don't output as pages and I can't figure out how to do this.
{{ page | tags }}
Am I missing something that will output the tags as pages as {{ site | tag_cloud }} does?
Thanks!
To use jekyll-tagging you need to configure it, in _config.yml add:
tag_page_layout: tag_page
tag_page_dir: tag
Then in _layouts/ folder create the file tag_page.html:
---
layout: default
---
<h2>{{ page.tag }}</h2>
<ul>
{% for post in page.posts %}
<li>{{ post.title }} ({{ post.date | date_to_string }} | Tags: {{ post | tags }})</li>
{% endfor %}
</ul>
<div id="tag-cloud">
{{ site | tag_cloud }}
</div>
Then tag pages will be generated in the folder _site/tag and tag filters will generate links to them.
In my index.html page, I want to append '...' after the post.excerpt. The idealized way is to use code {{ post.excerpt |replace_last:'</p>', '……</p>' }},but the filter replace_last seems not defined. So how can I do this in jekyll? thank you.
In my opinion, a better way is CSS:
.excerpt p:last-child::after {
content: '..';
}
This adds ".." to the last paragraph's after psuedo-element inside the excerpt div.
<div class="excerpt">
<p>Normal paragraph.</p>
<p>Paragraph with trailing ellipsis.</p>
</div>
If you need to do it with Jekyll, you could use the slice filter to cut off the trailing </p> and the append filter to add '...</p>' to the end. This will not work if your excerpt does not end with a paragraph.
I prefer to strip the p tags from post.excerpt first, then append '...'.
This way, we can even add "read more" link inside of the p.
<p>
{{ post.excerpt | strip_html | append: "..." }}
{% if post.excerpt != post.content %}
>>
{% endif %}
</p>
I've found a workaround for this to achieve an ellipsis with a "Read More" link. Both the truncate filter and setting excerpt_separator have shortcomings, however, it's simple to do implement it yourself via split. Use this in your index.html where you iterate the posts:
{{ post.content | split:'<!--read more-->' | first | append: "…"}} Read more
And you just have to place <!--read more--> wherever in your blog post where you want it to cut off and be replaced by a "… Read More" link.
Link to repo: https://github.com/AlvSovereign/AlvSovereign.github.io
I am coding my portfolio site, with a link to my blog. The fully processed portfolio site sits in _site/index.html which contains a link to the blog (fully processed link exists in _site/blog.html)
Blog.html at the root of the repo has in the front matter a layout of "bl", which is defined in my layouts folder under "bl.html".
"bl.html" is the layout I want for my blog page, which contains my includes etc. It also contains the {{ content }} liquid tag.
If I am thinking about this the right way, my posts are being parsed (I think this is the right terminology) into "post.html" - which has the front matter "layout: bl", which then parsed into "bl.html", and that this is so as they both have {{ content }} in each files.
Now all my posts are showing correctly (i think) within _site/(year)/(month) etc. However, they are not ending being parsed through my "blog.html" file, and then visible on my webpage. How I know this is that the fully processed "blog.html" file does not have any of the posts in them.
What will I need to do to solve this issue?
If it helps, I use Prepros for LiveReload, and using LANYON template, http://lanyon.getpoole.com/
{{ content }} refers to all the content that in the file that is being converted to HTML code.
For example, if you are passing a blog post on 'What is Jekyll' to any layout that has the {{ content }} tag, all text other than the YAML front matter will be put in that place. Basically the content of the post. You can also limit the scope by using {{ post.content }}, see Variables for more info here.
So the Liquid {{ content }} variable works as intended.
Looking at your website, I believe you're trying to display all the posts in your blog.html file, so what you're actually asking about is why aren't my posts being displayed (not parsed) in your blog.html file, hence not visible on your webpage.
The reason for that is because you shouldn't use {{ content }} tag for that, what you want instead is something like this snippet of code as mentioned in the Jekyll docs, that will grab all your posts, and display them by post title, as well as a link to that post. Here's the code to display a list of your posts. (taken from the website I linked you)
<ul>
{% for post in site.posts %}
<li>
{{ post.title }}
</li>
{% endfor %}
</ul>
So just swap out {{ content }} in your bl.html layout with that code snippet and you've got what you want.
Additionally, if you also want to display the content/excerpt in the list of posts, just add the liquid tag {{ post.content }} or {{post.excerpt}} like so:
<ul>
{% for post in site.posts %}
<li>
{{ post.title }}
{{ post.content }} /* or post.excerpt */
</li>
{% endfor %}
</ul>
Of course, edit the HTML accordingly for your preference. Read the documentation on how to set up post excerpts here, which uses the <!--more--> comment separator for excerpts.
I strongly recommend reading the JekyllRb documentation for more information, it's a lot to read and not always easily understandable, but keep referring to it and you'll understand more in no time.
I'm using Jekyll with pygments and having an issue using {% highlight %} in .html posts. As you can see here, it is just printing out {% highlight %} yet on my homepage the syntax highlighting works See here: iwasasuperhero.
Here is the code for the index, and the code for the post: Here
I'm not really sure the issue or why it is working on the index but not the post page. Any ideas?
It seems I have figured out my problem. I was using {{ page.content }} in my post.html instead of just {{ content }}.