What is the correct way to comment out in the Liquid templating language?
In Liquid you comment out using the {% comment %} and {% endcomment %} tags:
{% comment %} This is a comment in Liquid {% endcomment %}
It doesn't matter if the comment is inline or a block comment.
{% comment %}
This is a block comment in Liquid
{% endcomment %}
If, like me, you are looking for a solution that actually comments out "anything"/everything between the comment tags (as described in the documentation), you can use the {% raw %} tag (in conjuction with the {% comment %} tag if you don't want anything rendered in the browser).
Example:
{% comment %}
{% raw %}
Here is some text that I don't want displayed and
{% some_liquid_stuff_that_I_don't_want_parsed %}
{% endraw %}
{% endcomment %}
will render nothing at all.
In contrast,
{% raw %}
Here is some text that I want displayed but
{% some_liquid_stuff_that_I_don't_want_parsed %}
{% endraw %}
will render
Here is some text that I want displayed but
{% some_liquid_stuff_that_I_don't_want_parsed %}
while
{% comment %}
Here is some text that I don't want displayed but
{% some_liquid_stuff_that_will_be_parsed %}
{% endcomment %}
may result in a syntax error or Liquid exception, depending on the validity of the Liquid inside the comment tags.
An example of where this becomes an issue is where some work-in-progress code has been commented out:
{% comment %}
{% if some test %}
some stuff to render
{% elsif... %}
unfinished code...
{% endcomment %}
Additional information on this GitHub thread.
Liquid allows you to leave un-rendered code inside a Liquid template by using the {% comment %} and {% endcomment %} tags.
Input:
Anything you put between {% comment %} and {% endcomment %} tags
is turned into a comment.
Output:
Anything you put between tags
is turned into a comment.
Reference documentation: Comment tag in Liquid
Starting with Liquid 5.4.0 you will be able to use a short inline comment that does not require a closing tag! The syntax is:
{% # This is a new inline comment! %}
As with other tags you can add hyphens to remove whitespace around it:
{%- # This is a new inline comment without whitespace! -%}
And even use multiple lines:
{%-
################################
# This is a really big block #
################################
-%}
More info is available in the merged PR.
In the liquid, using comment tag enclose the text to be commented inside the comment tag
{%comment%}
Text to be commented
{%endcomment%}
In liquid, you use {% comment %} and {% endcomment %} tags:
{% comment %} This would be commented out {% endcomment %}
You can also use it in block:
{% comment %}
This would also be commented out
{% endcomment %}
If the {% comment %} and {% endcomment %} tags would comment anything, including HTML elements and such:
{% comment %}
<div class="commented_out">
<p>This whole div would be commented out</p>
</div>
{% endcomment %}
Related
This works perfectly fine:
{% capture foo %}{% include test.html %}{% endcapture %}
I want to do this:
frontmatter.md:
---
baaz: test.html
layout: layout.html
---
layout.html:
{% capture foo %}{% include {{ page.baaz }} %}{% endcapture %}
But when I do I'm given this error:
"Liquid Exception: Invalid syntax for include tag. File contains invalid characters or sequences: Valid syntax: {% include file.ext param='value' param2='value' %}"
I've seen this addressed in several other questions, with the most recent explanation I've found being this:
"...dynamic filename paths can't be added due to the fact that the included files are calculated and added at the compilation phase and not at run time phase. And compilation phase means dynamic paths aren't yet recognized."
But that source is nearly two years old. Does anyone have a solution to this yet? Or a workaround that would allow me to include a file defined as a variable in frontmatter?
You can try {% include page.baaz %}
Edit : after some investigations, it appears that your syntax is correct, and that the error fires only when page.baaz is not present.
This ends up in an include tag which looks like this for liquid :
{% include %}
In order to avoid this error on certain pages/post with no baaz set, you can use a condition.
{% if page.baaz %}
{% capture foo %}{% include {{ page.baaz }} %}{% endcapture %}
{% endif %}
I just came to this case recently. I assume the syntax works as expected. See sample and result.
{% include {{ page.baaz }} %}
However in your case it might be the page name could not be put in a variable as the error stated:
Error: Invalid syntax for include tag:
File contains invalid characters or sequences
Valid syntax:
***% include file.ext param='value' param2='value' %***
So to come out from the problem I would suggest you to inventory all file names and choose it:
{% case page.baaz %}
{% when 'test.html' %}
{% capture foo %}{% include test.html %}{% endcapture %}
{% when 'othertest.html' %}
{% capture foo %}{% include othertest.html %}{% endcapture %}
{% else %}
This is not a test
{% endcase %}
I had a similar issue... I have found a very usable work-around. Allow me to share my experience and solution. I hope it helps you to find a suitable solution for your problem.
What I wanted to build
I wanted to make a page with multiple sections. The sections should be reusable, be able to contain includes and they should be easy to manage in the CloudCannon CMS.
What I came up with
I ended up using the following front matter:
---
title: Lorem ipsum
description: Lorem ipsum
image: /img/default.jpg
section_blocks:
- section: sectionwithinclude
- section: anothersection
- section: andyetanothersection
---
... and the following tempate:
{% for item in page.section_blocks %}
{% for section in site.sections %}
{% if item.section == section.slug %}
<div class="section {{ item.section }}">
{{ section.content }}
</div>
{% endif %}
{% endfor %}
{% endfor %}
Within the _sections folder/collection I have a file called sectionwithinclude.md that looks like this:
---
---
{% include mycustominclude.html %}
Why this is great
When you edit your page, CloudCannon will show the section_blocks as an array with reorder buttons. Additionally, CloudCannon will automagically recognize section as a collection and show the options in a dropdown. Therefore adding a section is a matter of adding an empty item to the array, selecting a section from the dropdown and reordering it with the array buttons. On the same time, the inline editing option of CloudCannon still works. So management of text can be WYSIWYG, while block management can be done in the front matter array.
Super easy and powerful for (you and) your editors.
PS. You might find out that you will have some 'scope' issues, because page no longer relates to the actual page, but to the section. To solve this you can/should alter the loop in the template. You can let the loop manage the include instead of the section.
I have a Jekyll 3 project that allows language selection. We use the 'jekyll-multiple-languages-plugin' gem for internationalization.
We have a glossary that is supposed to display German terms or English terms according to the selected language. I get the selected language using the variable site.lang provided by the 'jekyll-multiple-languages-plugin' gem.
Right now glossary.html looks like this
<div id="glossary">
{% if site.lang == "de" %}
{% for term in site.data['terms_de'] %}
<!-- German glossary goes here -->
{% endfor %}
{% elsif site.lang == "en" %}
{% for term in site.data['terms_en'] %}
<!-- English glossary goes here -->
{% endfor %}
{% endif %}
</div>
However, i'd love to have something like this
<div id="glossary">
{% for term in site.data["terms_#{site.lang}"] %}
<!-- Glossary goes here -->
{% endfor %}
</div>
But for some reason, the string interpolation "terms_#{site.lang}" doesn't work. I also tried 'terms_'+site.lang
I think the interpolation is not working because, when i put {{ site.lang }} in the page, i see the selected language, but when i write {{ "terms_"+site.lang }} i don't see anything.
Thanks in advance.
You can make use of the capture tag, instead of displaying a value it sets to a variable:
{% capture term_lang %}{{ 'terms_' | append: site.lang }}{% endcapture%}
Then you can use that variable as the index of the array:
site.data[term_lang]
In your example:
{% capture term_lang %}{{ 'terms_' | append: site.lang }}{% endcapture%}
<div id="glossary">
{% for term in site.data[term_lang] %}
<!-- Glossary goes here -->
{% endfor %}
</div>
Hello and thanks for reading my post!
I have a collection with multiple products. On a custom collection template, I want to show the tags only for those that contain multiple products (or when more than 1 product in that collection have the same tag)
I assume it would go something like:
{% for tag in collection.all_tags %}
{% if tag.product.size >= 1 %}
has more than 1 product.
{% endif %}
{% endfor %}
I've answered similar questions here and here.
You want something like this:
{% for tag in collection.all_tags %}
{% assign products_count = 0 %}
{% for product in collection.products %}
{% if product.tags contains tag %}
{% assign products_count = products_count | plus: 1 %}
{% endif %}
{% endfor %}
{% if products_count > 1 %}
{{ tag }}
{% endif %}
{% endfor %}
Is there a way to comment out an include statement inside an HTML file using Jekyll?
For example I have this inside one of my HTML files that I'd like to temporarily comment out. Standard HTML comment doesn't seem to work.
{% include navbar.html %}
{% comment %}
{% include navbar.html %}
{% endcomment %}
Jekyll uses the Liquid templating system. So whatever works for Liquid works for Jekyll.
{% comment %}
this is commented out
{% endcomment %}
https://shopify.github.io/liquid/tags/template/#comment
mccambridge posted the correct solution. The one posted by David Jacquel does not work in Jekyll.
In alternative you can add a space between the bracket { and the percentage simbol % like shown below:
{% comment %}
{ % include navbar.html % }
{% endcomment %}
Is there a possibility to selectively render specific tags in a liquid template and leave the rest for a second render?
I have pages containing snippets(includes) and variables. The snippets are stored in the database and expensive to render. The variables are available only at runtime (via the URL request in the scenario of a landing page). I want to cache the page content with the snippets rendered but with all the rest of the liquid markup untouched.
So, If I have
{% snippet header %}
{% if vars.first_name %}
Welcome, {{ vars.first_name }}
{% endif %}
{% snippet footer %}
I would want the cached page content to be:
The header content
{% if vars.first_name %}
Welcome, {{ vars.first_name }}
{% endif %}
The footer content
At runtime this would be picked up from the memcached store and rendered:
The header content
Welcome, John
The footer content
Any idea on how to achieve this?
Update: Here's what I have in place already:
(It works, but I am looking for a cleaner, ideally liquid-only-based solution.)
A "vars" tag which produces a variable with the given name:
{% vars first_name %} #=> {{ vars.first_name }}
And, I use modified liquid markup for everything I don't want rendered the first time:
{* if vars.first_name *}
So, currently the initial page looks like this:
{% snippet header %}
{* if vars.first_name *}
Welcome, {% vars first_name %}
{* endif *}
{% snippet footer %}
Which gets rendered once and cached as:
The header content
{* if vars.first_name *}
Welcome, {{ vars.first_name }}
{* endif *}
The footer content
Then at runtime I retrieve the cached version and replace {* with {% etc. to get
The header content
{% if vars.first_name %}
Welcome, {{ vars.first_name }}
{% endif %}
The footer content
Which I render with liquid again to get to the desired outcome.
This does the job but is not pure liquid and I was wondering if there is a cleaner solution.
Is there?
{% snippet header %}
{% raw %}{% if vars.first_name %}
Welcome, {{ vars.first_name }}
{% endif %}{% endraw %}
{% snippet footer %}
This should get you the rendering that you want to cache, and then if you re-render it through Liquid I would think it would process the runtime variable.