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 %}
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.
So the current Shopify implementation of sections leaves a lot to be desired. The majority of the functionality is relegated to the homepage.
I'm trying to skirt around that to a certain degree but basically chucking all the section functionality (that would normally be split into multiple sections) into one section file, and then duplicating it for each product in the store, reusing the handle of each product as the section name.
E.g.: example-product-handle --> sections/example-product-handle.liquid
My idea was then to create, in the main product.liquid file, a simple routing system that would conditionally include a section if one exists that matches with the handle. This SO answer got my creative juices flowing.
The ideal result would look like...
{% assign current_page = product.handle %}
{% capture snippet_exists %}{% section current_page %}{% endcapture %}
{% unless snippet_exists contains "Liquid error" %}
{% section current_page %}
{% endunless %}
This works beautifully for snippets. Replace section with include in that code, and the routing system performs perfectly.
With sections however?
Liquid syntax error: Error in tag 'section' - Valid syntax: section '[type]'
Is there no way around this? Do section names have to be explicitly stated?
This isn't possible. It is purposefully not possible. Try instead using the section to dynamically include snippets.
{% for block in section.blocks %}
{% case block.type %}
{% when 'layout1' %}
{% include 'layout1' %}
{% endfor %}
I would like to escape the HTML code from an imported file in Nunjucks.
{% include "item.html" %}
The file "item.html" contains following code:
<strong>bold text</strong>
I would like the parent file (which includes item.html) to have the following output:
<strong>bold text</strong>
I tried surrounding the include with an escape filter:
{% filter escape %}
{% include "item.html" %}
{% endfilter %}
However in that case the file doesn't get included correctly. Any ideas?
I tested your snippet on Gulp + gulp-nunjucks-render#2.0.0, it does produce the desired effect:
{% filter escape %}
{% include "partials/test.html" %}
{% endfilter %}
Output:
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 %}
I am using the standard jekyll installation to maintain a blog, everything is going fine. Except I would really like to tag my posts.
I can tag a post using the YAML front matter, but how do I generate pages for each tag that can will list all posts for a tag?
Here is a solution with alphabetically sorted tags on a single page.
It uses Liquid only, which means that it works on GitHub Pages:
{% capture tags %}
{% for tag in site.tags %}
{{ tag[0] }}
{% endfor %}
{% endcapture %}
{% assign sortedtags = tags | split:' ' | sort %}
{% for tag in sortedtags %}
<h3 id="{{ tag }}">{{ tag }}</h3>
<ul>
{% for post in site.tags[tag] %}
<li>{{ post.title }}</li>
{% endfor %}
</ul>
{% endfor %}
You can see it in action here.
EDIT:
There's also a way to generate a separate page for each tag without plugins (which will work on GitHub Pages).
I have a more detailed explanation on my blog:
Separate pages per tag/category with Jekyll (without plugins)
First, you need a new layout file:
/_layouts/tagpage.html:
---
layout: default
---
<h1>{{ page.tag }}</h1>
<ul>
{% for post in site.tags[page.tag] %}
<li>
{{ post.date | date: "%B %d, %Y" }}: {{ post.title }}
</li>
{% endfor %}
</ul>
With this layout file, you can add a new tag page by adding a new file with just two lines of YAML front-matter.
Here's an example for the jekyll tag:
/tags/jekyll/index.html:
---
layout: tagpage
tag: jekyll
---
The only disadvantage of this approach: each time you use a new tag for the first time, you have to remember to create a new two-line file for it.
To generate the root index file (i.e. the list of tags that links to /tags/jekyll/index.html etc.), you can use a similar solution like the one on top of this answer where I generate a single page with alphebetically sorted tags:
{% capture tags %}
{% for tag in site.tags %}
{{ tag[0] }}
{% endfor %}
{% endcapture %}
{% assign sortedtags = tags | split:' ' | sort %}
{% for tag in sortedtags %}
{{ tag }}<br>
{% endfor %}
This will generate a list of links like this:
<ul>
<li>.net</li>
<li>authentication</li>
<li>backup</li>
</ul>
Note that this solution uses a blank to split tags, so it doesn't work when your tags contain blanks and Yevgeniy Brikman's comment applies here as well.
This gist will generate a page per category for you: https://gist.github.com/524748
It uses a Jekyll Generator plugin, plus a Page subclass.
Have a look at sites using jekyll. There are a few custom forks which have implemented tagging functionality, hopefully also in the way you want :-)
I had the same question, and stumbled upon this: http://gist.github.com/143571.
It's a rake task which generates a tag list. I modified it slightly, and my version is at:
http://github.com/mattfoster/mattfoster.github.com/blob/master/Rakefile.
Whilst this doesn't give you a page per tag, you can use anchors, which is half way there!
I use the great Jekyll Tagging plugin that automatically generates a tags cloud and tag pages. Easy to install and use.
Here is a page for the "photo" tag on my blog (in french), and you can see the tags cloud in the bottom.
Based on Christian's answer above I made a bash script that does what he described.
https://github.com/ObjectiveTruth/objectivetruth.github.io/blob/master/rebuild_tags.sh
Be sure to have the accompanying 14 line vim script in the /non_website_resources/ directory
AND
Make the /_layouts/tagpage.html shown in Christian's answer above but rename it to /_layouts/tag_pages.html
File structure should be like this:
.jekyll_website_root
├── _posts
├── _layout
│ ├── tag_pages.html
├── rebuild_tags.sh
Run from the root directory ./rebuild_tags.sh
If you get permission denied error be sure to run chmod 777 rebuild_tags.sh
If you look at scripts comments its fairly simple:
Uses sed to find all the tags in every .md file in _post directory
Uses sed to massage the data to proper format
Takes all the unique tags and makes a directory and a index.html for each
This way, if you have any new tags, just run the script to rebuild the pages before pushing to github
A nice simple non-plugin way to do tags
EDIT
Removed dependency on other files. Just need the one script!
I do these with CSS. First lists an element and use the tag name as its id.
<span id="{{ site.posts | map: 'tags' | uniq | join: '"></span><span id="' }}"></span>
And then lists all the post and use its tags as a value for the "tags" custom attribute.
{% for post in site.posts %}
<article class="post" tags="{% for tag in post.tags %}{{tag}}{% if forloop.last == false %}{{" "}}{% endif %}{% endfor %}">
<h3>{{post.title}}</h3>
</article>
{% endfor %}
And then in CSS, hide all the posts by default, and only show posts with tags matches the url id/ hash
.post {
display: none;
}
{% for tag in site.tags %}#{{tag[0]}}:target ~ [tags~={{tag[0]}}]{% if forloop.last == false %}, {% endif %}{% endfor %} {
display: block;
}
/*
The compiled version will look like this
#tagname:target ~ [tags~="tagname"], #tagname2:target ~ [tags~="tagname2"] {
display: block;
}
*/
I made an article about this here.