My Jekyll template has a simple alert include:
<div{% if include.style %} class="uk-alert-{{ include.style }}"{% endif %} data-uk-alert>
<p>{{ include.text | markdownify }}</p>
</div>
I am trying to do something like this:
{% include alert.html style="warning" text="This article is for Administrators and other Roles. Learn more about [permissions]({% link _docs/permissions.md %}) and [roles]({% link _docs/roles.md %})." %}
The issue is the output is not parsed by markdown and I get the raw text:
This article is for Administrators and other Roles. Learn more about [permissions](/support/docs/permissions/) and [roles](/support/docs/roles/).
Tried adding this:
<div{% if include.style %} class="uk-alert-{{ include.style }}"{% endif %} data-uk-alert>
<p>{{ include.text | markdownify }}</p>
</div>
This sort of works but I get extra <p></p> before and after the markdown text and it adds padding.
So far this is what I have working with a capture:
{% capture alert_text %}This article is for Administrators and other Roles. Learn more about permissions and roles.{% endcapture %}
{% include alert.html style="warning" text=alert_text %}
Can I just just have the link generated inline direct or somehow eliminate the extra paragraph tags?
A single line of markdown is considered a paragraph, which is why it's being wrapped in those tags. I'd keep the capture to render out the liquid link tags, and just remove the p tags in the include:
<div{% if include.style %} class="uk-alert-{{ include.style }}"{% endif %} data-uk-alert>
{{ include.text | markdownify }}
</div>
If you're seeing the p tags added before or after, it's because an opening p tag implies the close of the previous one. If you're still having issues with whitespace on each end of your text, you could strip it before markdownify to be sure:
{{ include.text | strip | markdownify }}
Related
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.
My input is pretty simple. I'm pulling from a data file to fill <p> with content then running the method markdownify, but the output duplicates the <p> element in (to me) unexpected ways.
Please advise! And thank you.
Sample Input:
{% for item in site.data.filename.item %}
<p style="display:{{ item.display }}" id="{{ item.nav }}">{{ item.content | markdownify }}</p>
{% endfor %}
And the Output:
<p id="test" style="display:block"></p>
<p>testing output</p>
<p></p>
Is there something going on with my liquid syntax? Many thanks in advance
This is typically what happens when you nest paragraphs. You should remove HTML tags from your content.
{{ item.content | strip_HTML}}
https://docs.shopify.com/themes/liquid/filters/string-filters#strip_html
If you want to keep the html formatting, you can use a div to wrap the content, like this:
{% for item in site.data.filename.item %}
<div style="display:{{ item.display }}" id="{{ item.nav }}">{{ item.content | markdownify }}</div>
{% endfor %}
Did you try removing markdownify?
Internally jekyll framework will apply markdownify so we do not need to write markdownify
I tried your code with markdownify removed and got single lines of <p> duplicates.
strip_HTML option also works.
Either remove markdownify or put strip_HTML
Instead of display:{{ item.display }} try
display:{{ display }}
Should do the job! :)
I am unable to remove the new line character that is generated by jekyll's for loop from the following:
<br/><ul class="post-list">
{% for post in site.tags[page.tag] %}
<li>
<h2>{{ post.date | date: "%b %d %Y" | append: post.excerpt }}</h2>
</li>
{% endfor %}
</ul>
I have looked all over SO and, though I see that this is a issue that people get stuck on, it is not clear to me whether it is possible to remove this newline without writing something that would remove the newline characters from the jekyll generated HTML after the fact. I would prefer not to have to do that. Does anyone know how to get post.date and post.excerpt to generate without a new line in between?
Im not sure if I understood your question correct. I guess, with new line character you mean some obsolete empty lines in the generated HTML.
At least with newer versions of liquid, the solution is to replace {% by {%-.
<br/><ul class="post-list">
{%- for post in site.tags[page.tag] -%}
<li>
<h2>{{ post.date | date: "%b %d %Y" | append: post.excerpt }}</h2>
</li>
{%- endfor -%}
</ul>
More details can be found here.
I think if you move the {% endfor %} up to the end of the </li> it will remove the new lines.
Like:
<br/><ul class="post-list">
{% for post in site.tags[page.tag] %}
<li>
<h2>{{ post.date | date: "%b %d %Y" | append: post.excerpt }}</h2>
</li>{% endfor %}
</ul>
EDIT:
After playing with this I see what you mean. The post.excerpt itself seems to contain a line break. If you take out the post.excerpt and just use post.date as an example you should see that you will get new lines if the {% endfor %} is below the </li> and moving it up fixes that. I tried a few things to remove the line break from the actual post.excerpt but nothing worked. I use my own descriptions in the front matter instead of post.excerpt and that works.
Also, your code I think is not correct - by appending the post.excerpt to the post date inside of an h2 you are ending up with a <p> inside of an h2.
I would do something like this:
<ul class="post-list">
{% for post in site.tags.[page.tag] %}
<li><h2>{{post.title}}</h2>{{post.excerpt}}</li>{% endfor %}
</ul>
I used title instead of date, use what ever works for you but appending the excerpt to the date inside of an h2 doesn't seem right.
As for the post.excerpt seeming to contain a line break, I think that may be a bug. Though in my code I don't see the line break causing any problems.
I had the same problem and changing the source file to html solved the issue.
Change the source file from markdown to HTML.
Add the frontmatter --- to the top of HTML so it is processed by Jekyll.
Change the corresponding markdown items such as ###### to <h6></h6>.
The linebreak should not appear now.
I am trying to get Page 2+ of my blog to have a different title for search engines to index.
I have read several other stackoverflow answers stating that you cannot use liquid tags in the front matter yaml. One suggested to use JS to update the title, however this will not work for me as I want the search engine to index the parsed title.
I thought there may be another way. I can perhaps create a HTML page for each of my pages. I would like to do that without having to manually add each one of my posts into each of the pages (resulting in an ongoing time consuming task each time I post a new article).
I was thinking I could make one page for 1-10, another page for 11-20, etc... Something like this:
---
title: Blog Page 2
---
{% for post in paginator.posts %}
{% if post.index > 10 %}{% if post.index <= 20 %}
<div class="post-preview">
<a href="{{ post.url | prepend: site.baseurl }}">
<h2 class="post-title"> {{ post.title }}</h2>
{{ post.excerpt }}
</a>
</div>
{% endif %}{% endif %}
{% endfor %}
It seems there is no post.index variable available. Is there anything similar I can use?
Or are there any other ways to achieve "Blog Page X" in my title?
Supposing that your head tags are in your _includes/head.html file. In the title tag just add :
{% if paginator %} - page {{ paginator.page }}{% endif %}
Your title tag now looks like this :
<title>
{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}
{%if paginator %} - page {{ paginator.page }}{% endif %}
</title>
I'm creating a bird's eye view tutorial for Jekyll, to be hosted on Github pages (on my blog that runs on Jekyll). So, I want to put some code there. If I put the following:
{% for post in site.posts %}
{% if post.categories contains '<categoryname>' %}
<h2>
{{ post.title }}
</h2>
{% endif %}
{% endfor %}
(all lines after tabspaces), it doesn't render as code, rather, it executes. How do I stop it from executing and render it as code?
The {%...%} syntax used by Jekyll is part of the Liquid templating engine. To escape these tags, and so show them literally, you should use the raw tag.
You will probably want to combine this with the markdown syntax for code blocks. With Redcarpet you can use the triple backtick syntax. It doesn’t matter if you put the backticks inside the raw tags or the other way round:
{%raw%}
```
{% for post in site.posts %}
{% if post.categories contains '<categoryname>' %}
<h2>
{{ post.title }}
</h2>
{% endif %}
{% endfor %}
```
{%endraw%}
Enclose your code in backticks:
(tested with redcarpet markdown engine)
```
{% for post in site.posts %}
{% if post.categories contains '<categoryname>' %}
<h2>
{{ post.title }}
</h2>
{% endif %}
{% endfor %}
```
There are at least three options exist, taht you can use to format code in Jekyll:
highlight - Jekyll has built in
{% highlight java %}
ValidationResult validationResult = NetLicensing.LicenseeService.validate(context, licenseeNumber);
{% endhighlight %}
example: https://raw.githubusercontent.com/Labs64/netlicensing.io/gh-pages/_drafts/2010-09-16-post-template.md (see Syntax highlighting section)
backtick - GitHub style
```java
ValidationResult validationResult = NetLicensing.LicenseeService.validate(context, licenseeNumber);
```
HTML pre/code - HTML can be included in markdown as well
<pre><code>
ValidationResult validationResult = NetLicensing.LicenseeService.validate(context, licenseeNumber);
<code/></pre>