How to suppress blank line in Jekyll? - jekyll

I use GitHub Pages for my blog, and am running into a problem with Jekyll. My post.html has a block like this:
{% for testpost in site.posts %}
{% four %}
{% lines of %}
{% processing %}
{% goes here %}
{% endfor %}
The part in the middle doesn't matter. The important part is the end of the line which is outside of the {% %} markup, and is therefore rendered into the html. Since this is in a loop, it's putting about 1000 blank lines into the middle of by HTML page. It doesn't affect the display, but it make a View/Source troublesome.
Any ideas on how to avoid those extra blank lines?

Since Liquid v4 (included in Jekyll from v3.5) there is a Whitespace control, which finally resolved case with blank line, white space, etc.
Link to documentation: https://shopify.github.io/liquid/basics/whitespace/

There's a nice workaround, that I found out in https://github.com/plusjade/jekyll-bootstrap/blob/master/_includes/JB/setup, and which is compatible with github pages.
Just enclose your loop in a capture statement, and assign nil to the resulting var.
{% capture cache %}
{% for p in site.posts %}
do stuff here
{% endfor %}
{% endcapture %}{% assign cache = nil %}

How about
{{ page.content | escape | strip_newlines }}

There is Jekyll plugin that strips the whitespace.
Jekyll plugins by Aucor: Plugins for eg. trimming unwanted
newlines/whitespace and sorting pages by weight attribute.
You can get it directly from its Github repository. So basically you wrap your code with {% strip %}{% endstrip %}. Even if this doesn't suit you needs, you can easily change the ruby script.
For example:
{% strip %}
{% for testpost in site.posts %}
{% four %}
{% lines of %}
{% processing %}
{% goes here %}
{% endfor %}
{% endstrip %}
However, please remember the nature of Jekyll plugins, you can't run them on the Github Pages server.
Quote from Jekyll Doccumentation:
GitHub Pages is powered by Jekyll, however all Pages sites are generated using the --safe option to disable custom plugins for security reasons. Unfortunately, this means your plugins won’t work if you’re deploying to GitHub Pages.
You can still use GitHub Pages to publish your site, but you'll need to convert the site locally and push the generated static files to your GitHub repository instead of the Jekyll source files.

Actually there is a new solution for this problem which works without any plugin.
A Jekyll layout that compresses HTML. At a glance:
removes unnecessary whitespace;
removes optional end tags;
removes optional start tags;
removes comments;
preserves whitespace within <pre>;
GitHub Pages compatible;
ignores development environments;
configurable affected elements;
profile mode;
automatically tested.
http://jch.penibelst.de/
If you - for some reason - do not want to use this here is a nice article, which describes some workarounds:
Compressing Liquid generated code - sylvain durand

Related

Custom Shortcode (Include, Tag) in Jekyll with Parameters and Multiline Text

I'd like to create something like a shortcode for a blockquote in Jekyll. It should include the quote source in a nicely formatted way.
The shortcode could look like this:
{% quote author="My Author" %}
This is the quoted content
spanning multiple lines
And paragraphs
{% endquote %}
What's the best way to achieve this in Jekyll? Can it be that there is no way to provide multiple arguments to a Jekyll tag plugin?
I have found a blog post that provides multiple attributes using string concatenation or JSON.
My Research
I have found two systems in Jekyll that can be used similar to shortcodes:
HTML Includes
Custom Tags
To summarize, both methods only provide a single attribute to the Ruby code, the content. Below, you will find the limitations of both solutions.
HTML Includes limiations
https://jekyllrb.com/docs/includes/
An include in use looks like this:
{% include note.html content=download_note %}
It is possible to use content from captures for parameters, so we could create the following include file:
<blockquote>
{{ include.quote | markdownify }}
<p><em>{{ include.author }}</em></p>
</blockquote>
And use it in a blog post like this:
{% capture quote %}
This is the quote content
spanning multiple lines
And paragraphs
{% endcapture %}
{% include quote.html quote=quote author="My Author" %}
It works, but in my opinion, it's not really a nice approach to use when writing blog posts.
Custom Tags limiations
https://jekyllrb.com/docs/plugins/tags/
Sounds promising, but the documentation only shows two ways to use them:
{% render_time page rendered at: %}
and
{% render_time %}
page rendered at:
{% endrender_time %}

Trying to get a collection from a Front Matter value

Hi I'm new to Jekyll and have a basic blog set up. Now my idea is to loop through a collection per blog post to get some fancy HTML going on. Because as far as I'm aware you can't simply add HTML to the markdown.
// config.yml
collections:
- hollowknight
So I've set up a collection named hollowknight and I got a blog post about Hollow Knight.
In the Front Matter of the blog post I have collectionid: 'hollowknight'. And in the Layout I use for blog posts I tried the following:
// post.html
{% capture collection %}site.{{ page.collectionid }}{% endcapture %}
{% for section in collection %}
{{ section.title }}
{% endfor %}
So the idea was to set the collection variable to site.hollowknight as configured in the config and the Front Matter. I set up a single article inside the collection, but it isn't showing up.
Is there any way to realise this?
Edit: https://talk.jekyllrb.com/t/list-collection-with-name-from-front-matter/3619/6
Or is there a way to use paragraphs in the Front Matter, because then I could just use arrays and objects in the Front Matter of the posts to do my magic?
Edit: https://github.com/jekyll/jekyll/issues/246#issuecomment-1639375
Or am I just stretching to far from what Jekyll is supposed to be?
Edit
So I found out I was getting the collection the wrong way, https://talk.jekyllrb.com/t/list-collection-with-name-from-front-matter/3619/6.
{% for section in site.[page.collectionid] %}
{{ section.content | textilize }}
{% endfor %}
The only weird part is, everywhere I see | textilize being used but can't get it to work.
This is the final solutions:
{% for section in site.[page.collectionid] %}
{{ section.content | markdownify }}
{% endfor %}
It's markdownify instead of textilize.
Also I ended up using a Front Matter array with objects to loop through instead of a collection to keep it more organized.

For loop in HTML file, {% for x in xxx %}. Native or framework?

I was looking at some HTML code and I encountered this syntax that I had not seen before:
{% for x in xxx %} \n
<li>{{x.something|e}}</li> \n
{% endfor %}
I was wondering if this was native HTML, or if it was some special framework. For the record, I saw it in a Jekyll template for github pages but when I tried searching it up, I couldn't find much clarification.
That is Liquid, the templating language that Jekyll uses to process templates.
The code you posted is a for loop:
Liquid allows for loops over collections:
{% for item in array %}
{{ item }}
{% endfor %}
You can check the project doc: Liquid for Designers and how Jekyll uses it.

In Jekyll, how can I create a tag archive for pages?

I'm using tags on pages in Jekyll, like this:
---
title: Sample page
permalink: /sample/
tag: news
---
On my homepage, I have different sections that aggregate pages by tag, like this:
{% assign counter = '0' %}
{% for page in site.pages %}
{% for tag in page.tags %}
{% if tag == "news" and counter < '3' %}
{% capture counter %}{{ counter | plus:'1' }}{% endcapture %}
<li>{{page.title}}</li>
<div class="summary">{{page.summary}}</div>
{% endif %}
{% endfor %}
{% endfor %}
This loop limits the news-tagged pages to 3, but I might have 10+ pages with the tag of "news." I want to include a "View all" tag at the bottom, so that users can see a complete list of all pages matching that tag.
I realize I could manually create a page and add similar code but without a limit to get all the pages. However, that's kind of tedious. I'd rather have Jekyll auto-generate a tag archive by default. I think Jekyll has a concept of generators, but I'm not sure how to implement a tag page generator.
How can I dynamically generate tag archive pages without creating and entering code on each page?
check out jekyll-archives plugin. i just found out about this and am able to generate categories and tags pages. it does increase compile time coz of the number of categories and tags i have but it does what i need it to do. https://github.com/jekyll/jekyll-archives
Actually you do not need a plugin to do that. Check this out: http://codinfox.github.io/dev/2015/03/06/use-tags-and-categories-in-your-jekyll-based-github-pages/

Jekyll not generating pages in subfolders

I use GitHub Pages and created some pages in a sub folder. It seems to be not generating pages I created in sub folder. All other pages work fine. The directory structure is like this:
/
/index.html
/_config.yaml
/_includes
/_layouts
/_posts
/tag
/tag/personal.html
/tag/videos.html
The pages inside the /tag directory are not generated by Jekyll. Also, usually GitHub sends an email if Jekyll build fails, but did not, in this case. Also, if I do any other changes it works, so the build is apparently not failing.
The /tag/personal.html is here:
---
layout: default
title: Tag-personal
permalink: /tag/personal/index.html
tagspec: personal
---
<div id="tagpage">
<h1>Posts tagged personal</h1>
{% include tags.html %}
</div>
and /_includes/tags.html is here:
{% for tag in post.tags %}
{% if tag == page.tagspec %}
{% assign ispostviable = true %}
{% endif %}
{% endfor %}
<ul class="posts">
{% for post in site.posts %}
{% if ispostviable == true %}
<li><a href="{{ post.url }}"></li>
{% endif %}
{% endfor %}
</ul>
PS: I use GitHub Pages and have no access to a Jekyll instance at my development machine (Windows).
Joshua Powell provided step-by-step directions in reply to a similar question on Github.
Edit _config.yml to add the following line (or expand the array, if it exists)
include: ['_pages']
where _pages is the name of the folder in which you wish to keep your files. (This also works for nested folders if you explicitly add them, e.g., ['_pages', '_pages/foo'].)
Move your pages into that folder. (These pages may be HTML, Markdown, or whatever else Jekyll renders when it’s placed in the root folder.)
Give them front matter with an appropiate permalink including a trailing slash, e.g., permalink: "/about/".
I found the culprit. It was that In Jekyll v1.0, absolute permalinks for pages in subdirectories were introduced. Until v1.1, it is opt-in. Starting with v1.1, however, absolute permalinks became opt-out, meaning Jekyll defaults to using absolute permalinks instead of relative permalinks.
The pages were being generated at /tag/tag/personal.html and so on.
There were two solutions:
Specify relative_permalinks: false in _config.yaml
Make permalinks relative to the subdirectory.
I chose the first option.