My Jekyll website has two kinds of content: personal, and professional.
I would like to emphasize which kind of content a visitor is currently reading with dynamic CSS classes:
If the visitor is on a page tagged as "personal", my <main> element's class should be "personal-content".
If the visitor is on a page tagged as "professional", my <main> element's class should be "professional-content".
Otherwise, the class should be "site-content".
In the front-matter of each page, I'm creating an output statement that I set either at "personal" or "professional", for example:
---
content: "personal"
----
Then I'm using this output statement in my tag like this: (indented for reading purposes)
<main
{% if page.content %}
class="{{ page.content }}-content"
{% else %}
class="site-content"
{% endif %}
>
However I'm only seeing styling from my site-content class. What did I do wrong?
Thanks to the comments above, I fixed it!
The problem was that I was not using a custom output statement as I thought I was: {{ content }} is already used by Jekyll to include markdown articles into HTML layouts.
So I switched {{ page.content }} to {{ page.contenttype }} and it works fine!
Caveat:
I also had to change the values I was giving my output statement. professional was working fine, but for some reason personal was returning nil. So I simply switched them for pro and perso and voilà.
Related
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 %}
I'm learning Drupal8 and Twig with Chaz Chumley's book 'Drupal 8 Theming with Twig'.
When I put in the code provided I don't get the desired result. (Chapter 3, Filters)
The book says to add the following to the page.html.twig file:
{% filter upper %}
<p>{{ name }} is the best cms around.</p>
{% endfilter %}
but the page outputs
<P>DRUPAL IS THE BEST CMS AROUND.</P>
(Showing the html tags on the page as shown here)
Is there something I'm missing to have the twig filter not change the HTML tags? or is the only solution to put the filter inside the tag? but this filter is supposed to "wrap sections of HTML and variables" so why is it affecting HTML tags?
You can put the filter around just the text, so it ends up as:
<p>{% filter upper %}{{ name }} is the best cms around.{% endfilter %}</p>
You can test your twig code here: https://twig.stapps.io/
Can you give this a try:
<p>{{ 'your text'|upper }}</p>
Also, check out https://drupal.stackexchange.com/ if you have any more drupal related questions.
I have this Liquid template which looks like this:
# /_includes/slideshow.html
{% for image in {{ include.images }} %}
...
{% endfor %}
which I'm trying to use with a YAML file (for my Jekyll site) like this:
# /index.md
{% include slideshow.html images='site.data.homepage_images' %}
The reason I see this failing is because my include variable {{ include.images }} resolves to a string within the for loop. Is there a different way to accomplish this? I'm still rather new to Liquid, YAML, Jekyll, and well, web development altogether, so any help in doing this is much appreciated!
(Note: the problem goes away if I replace {{ include.images }} with site.data.homepage_images.)
Additionally, the reason why I'm doing this (and why that crude fix isn't the solution I'm looking for) is for the ability to inject my image slideshow elsewhere around my site. It'd save a lot of code to abuse my include variable in this way.
Correct syntax in for loop is : {% for image in include.images %}
I am working on a client's Django/Mezzanine website that has got some strange issue that I just can't seem to figure out. On the blog page (template of blog_post_list.html) I cannot get the meta title of the page to display, meaning
{% block meta_title %}
{{ blog_page.title }}
{% endblock %}
produces no output in the resulting html. The same holds for the meta description, but I am not worried about it as much. The strange thing is that it seems to work just fine for individual blog entries, as well as all the other pages on the website, except the blog list.
Any ideas?
Nothing is displayed in Django template if you render not existing variable or variable value is None.
First test if {{ blog_page }} renders anything. If it doesn't check if blog_page is in your template context.
You can debug template's context by writing simple custom templatetag, e.g.:
templates/your_template.html:
{% load pdb from debug %}
{% block meta_title %}
{% pdb %}
{{ blog_page.title }}
{% endblock %}
templatetags/debug.py:
from django import template
register = template.Library()
#register.simple_tag(name='pdb', takes_context=True)
def pdb(context, *args, **kwargs):
import ipdb;
ipdb.set_trace()
Apparently, there was a bit of confusion involved: I thought blog_page.title was a standard variable in mezzanine, apparently it is not, it was a custom model created by the previous developer. Since I have basically only the templates and a dump of the DB, it does not appear to be possible to restore the original model for blog_page class, so I simply solved it by supplying a meta title manually in the blog_post_list template.
I want to use liquid tags in a page on a Jekyll site. I have used them successfully in layout files, but when I use them in a page they are not parsed by Liquid.
The page is in html format not Markdown. The page has valid YAML front-matter that is being successfully used by the layout file. Here's the code for the page that isn't parsing:
---
layout: default
title: Media
id: media
order: 2
---
<section id="photos">
<h2>Photographs</h2>
<div id="galleries">
{% for set in site.flickr-sets %}
<div class="gallery" data-set="{{ set }}"></div>
{% endfor %}
</div>
</section>
Is there any obvious reason why this isn't working? I really need to be able to access the site global variable...
EDIT
It seems this issue isn't confined to just that page. I tried creating a new page and using some liquid syntax and got the same result. It's also any liquid syntax not just tags.
In the layout file that these pages use I include the content of the page using {{ page.content }} rather than just {{ content }}. Could that be relevant?
{{ content }} works and it's different than {{ page.content }}
{{ content }} it's parsing all liquid syntax :)
Hope that helps.
So it seems that the answer is that as I suspected. I tested the same code using a new layout file that just called {{ content }} and it rendered correctly. I'm assuming this means that when Jekyll builds it stores raw content in the page object. This is why pages with only html (or Markdown) were being rendered correctly, but any Liquid syntax was not being parsed.
Although this technically answers the question, I still haven't figured out how to solve my problem! It would be useful if there was some sort of filter I could add to {{ page.content }} to make it parse the Liquid syntax.
I know this may be a little late, but I dug up something called {{ page.output }} which is the rendered content of the page.