Question about using shortcodes on Jekyll

Help
1

Hello!

I want to create several shortcodes for my website. Before I researching and found this topic: Are there short-codes in Jekyll?

I can create /includes/someShortcode.html file. Then pass some content to the included file: {% include someShortcode.html content="Some Shortcode Content" %}

But if I want to display several paragraphs, headlines into my shortcode content. How I can do that?

I should do something like this?

{% include alert.html content=" \<p>Paragraph</p> \<h2>Headline</h2> " %}

It’s correct way? And what, if my content into a shortcode so big? Write HTML-tags without spaces so hard.

And can I use markdown into includes content instead of HTML-tags?

2

that is not so short.

You could just make an include with all that info in it and use that without passing the data to it. I do that where I need to use the same alert type thing on multiple pages.

I think you can do a little trick to have markdown work in an include:

{% capture myinclude %}{% include amarkdownfile.md %}{% endcapture %}
{{ myinclude | markdownify } }
3

Thank you for the answer, but that’s not what I want.

You could just make include with all that info in it and use that without passing the data to it. I do that where I need to use the same alert type thing on multiple pages.

Yes, if I want to display a single text (block) on the difference pages, I could do that.

But in my case, I want to display introducing block for each post. Here is a screenshot, what I mean: Screenshot by Lightshot. Every article will have a introducing block, there will be custom Headline, description and image. How I can do something like that with shortcodes? Please, rdyar, give me advice.

4

if all that is custom why do you want a shortcode type thing? why not just put it in the post?

You could also use a data file if every post is going to have that same format - you can have fields of:

  • post short name (or maybe just use the actual name)
  • title
  • image
  • description

then in the posts front matter you put the post short name, then you test if that is which page it is and then loop thru the items to fill out the section.

For repetitive things that are identical in format but not content data files can work really well.

For your example if there were going to be more than a dozen or so posts with that same exact format I would do it with a data file.

5

I think you’re over complicating things.
If all you’re trying to do is add an intro block to each post then add that logic to your layout and then add any custom fields as YAML front matter.

---
custom_headline: Your custom headline
image: path-to-your-image.jpg
description: your description
---

Then pull those into the page like any other liquid variable

<div class="intro">
  <h2>{{ page.custom_headline }}</h2>
  <p>{{ page.description }}</p>
  <img src="{{ page.image }}" alt="">
</div>
6

yeah, that is a better idea than mine. I did something like this in a data file and it is nice to have it all in one place, but then when I go to edit something on a particular page it isn’t there cause it is in the data file.

7

Thank you for the answer!

But in description on Front Matter I can write several paragraphs (<p), lists (ol>li or ul>lI) and something else?

And you right, that it’s bit over complicating. I think the best way is just put a HTML-block code in the markdown posts, then just write intro block content inside.

8

Yes you can write multiple lines in the front matter. Take a look at the YAML spec

If you use a > you can write multiline content. Along with Jekyll’s markdownify filter you can convert it into HTML.

Example

---
custom_variable: >
  This will be a paragraph.

  This will be another paragraph.

{{ custom_variable | markownify }} will then be converted into:

<p>This will be a paragraph.</p>
<p>This will be another paragraph.</p>
9

Thank you, mmistakes! It’s seems what I need.

Your advices is very helpful for me. Thank you again!

I try it, it’s very convenient to my case.