How do you repeat string multiple times in Jekyll?
For eg: in Python, you can do "hello" * 5 to get 'hellohellohellohellohello'. In Jekyll is there an easier way of doing the same thing than this.
{% for i in (1..5) %}
Hello
{% endfor %}
Example
Say you want to display a star rating and you are using <i class="fa fa-star"></i> to display each star. So to display a 5 star rating you would do.
{% for i in (1..5) %}
<i class="fa fa-star"></i>
{% endfor %}
A single page may have many ratings displayed on it so you would be using several instances of that for loop.
This is the best way.
If your concern is about performance; then you don't need worry because Jekyll Liquid is precompiled into html anyway so the performance will only be affected at build time.
Related
I am using the following expression
<ul>
{% assign mypages = site.pages | sort: "order" %}
{% for page in mypages %}
<li class="intro">
<a href="{{ page.url | absolute_url }}">{{
page.title }}</a>
</li>
{% endfor %}
</ul>
at my site's index.md to generate list of all pages and all works perfect
Also I am using modified version of the above-mentioned code
<marquee behavior="scroll" scrollamount="17"
direction="left" height="80px" loop="-1"
style="border:0px" width="99%" padding="0px"
onmouseover="this.stop();"
onmouseout="this.start();">
{% assign mypages = site.pages | sort: "order" %}
{% for page in mypages %}
<a href="{{page.url|absolute_url}}"> {{
page.shortname }} <span class="rate">{% include
indexmod.html %}</a></span> <span class="rex"> |
</span> {% endfor %}
</marquee>
to generate Bloomberg-like scroll marquee area made from some meta data and rating value (include indexmod.html), but there are appearing 7 "spook" pages without title and linking to: 404.html, feed.xml, sitemap.xml, robots.txt, redirects.json, style.css...
I have try to add thouse pages into ignore list in _config.yml
Thanks in advance for trick how to add all of them into some exclude filter.
Here is screen of the mentioned marquee on my site. Topic 032C 0.24 is linking to a real article with title "032C" with rate 0.24, next topic is wrong and linking to 404.html with rating 0.0, next topic is good again 4S4R, and all rest zeros are titles empty rates for technical files of my site. I have left only 2 real articles on my site for easier fixing the glitch.
I see there is no any comments. I have fixed part of problem using exclude line in front matter for 404.md. But still have question about other 5 files with extensions .css .json .xml .txt.
Therefore I am redirecting rest of question to a new topic
I am initializing icons based on different outcomes in Django template. Here is my code
{% if name == 'Euro' %}
<i class="fa fa-eur"></i>
{% else %}
<i class="fa fa-shopping-bag"></i>
{% endif %}
Problem is whatever the outcome is, icon class is remaining fa fa-shopping-bag . I have checked if/else conditional, it is working perfectly. What is the cause of this phenomenon? How can i solve this?
I have a newspaper running on Jekyll. On the home page there’s a bunch of the most recent posts and below them there are posts grouped by various interesting topics. For example:
Current Headlines (site.posts[1..9])
Opinions (site.categories['opinions'])
Culture (site.tags['culture'])
…
Now, when rendering the opinions, I don’t want to repeat the stories that are already listed under Current Headlines. Is there an easy way to express that in Liquid, without any Jekyll plugins?
Loop through all posts with an offset and use an if statement for the category. Offset can be found here: https://help.shopify.com/themes/liquid/tags/iteration-tags
{% for post in site.posts offset:9 %}
{% if post.categories contains 'mycat' %}
{{ post.title }}
{% endif %}
{% endfor %}
I am currently looking at developing a "static" website, few pages only. However, by design, I can tell there is going to be repetitive layouts/patterns. I am thinking doing a data-oriented approach, with my HTMLs being as reusable as possible. Here is an example:
index.html:
<div>
{% include organisms/topBanner.html
tp-title=site.data.home.topbanner.title
tp-select-blurb=site.data.home.topbanner.select.blurb
button-text=site.data.generic.buttons.getstarted
button-link=site.data.generic.links.gosomewhere
%}
</div>
then my organisms/topBanner.html:
<div class="tb">
<h1>
{{ include.tp-title }}
</h1>
<div>
<h2>{{ include.tp-select-blurb }}</h2>
<div>
{% include atoms/button.html
%}
</div>
</div>
</div>
finally my atoms/button.html:
<a class="button" href="{{ include.button-link }}">{{ include.button-text }}</a>
I have multiple JSON file under _data that basically hold the texts. An example for the button would be a _data/generic/buttons.json:
{
"getstarted": "GET STARTED",
"completesurvey": "COMPLETE THE SURVEY"
}
or links.json:
{
"gosomewhere": "/go-somwhere",
"surveypage": "/survey"
}
So this means you need to pass all your data from the top level include of the organism so every bits in it would have its data. That way the example of that button is that the HTML is defined only once and the data is bound to it. And for a second button to be in the topBanner you could do something like this:
index.html:
<div>
{% include organisms/topBanner.html
tp-title=site.data.home.topbanner.title
tp-select-blurb=site.data.home.topbanner.select.blurb
b-getstarted-text=site.data.generic.buttons.getstarted
b-getstarted-link=site.data.generic.links.gosomewhere
b-survey-text=site.data.generic.buttons.completesurvey
b-survey-link=site.data.generic.links.surveypage
%}
</div>
and in the topBanner.html, you rebind the data to the dedicated button:
<div class="tb">
<h1>
{{ include.tp-title }}
</h1>
<div>
<h2>{{ include.tp-select-blurb }}</h2>
<div id="getstarted">
{% include atoms/button.html
button-text=include.b-getstarted-text
button-link=include.b-getstarted-link
%}
</div>
<div id="survey">
{% include atoms/button.html
button-text=include.b-survey-text
button-link=include.b-survey-link
%}
</div>
</div>
</div>
This approach means everything is data driven, there is no repetition/'copy/paste' of HTML, it all works through includes and you can apply atomic design pattern (http://patternlab.io/).
Wanna change the text of the button from 'GET STARTED' to 'LET'S START'? Go to the data/generic/buttons.json and change it there. The whole website now has the text changed.
The drawback is the fact that all the data has to trickle down from top level. Readability might be bad.
First use of Jekyll for me, and waned to have your opinion on this. What is good practice for static website dev like this? Is it easier to have a buttonGetStarted.html that includes a more generic button.html, and pass the data to button.html from buttonGetStarted.html? Like:
buttonGetStarted.html:
{% include atoms/button.html
button.text=site.data.generic.buttons.getstarted
button.text=site.data.generic.links.gosomewhere
%}
and then include buttonGetStarted every time I need it on the page? But then if I need a new button for the survey, I need to create another html buttonSurvey.html and so on... Sure on the code you see an {% include buttonSurvey.html %} which is easy to read and understandable straight away what this button is about. So this:
{% include button.html button.text=site.data.generic.buttons.getstarted %}
with only one file button for all the buttons, or
{% include buttonGetStarted.html %}
with creation of a new HTML file everytime I need a new button?
Thanks
F.
Disclaimer : As this question is primarily opinion-based (see SO help on this), I've voted to close it.
However, I can give my two cents. Quote are from Atomic Design Methodology.
Atom
[...] elements that can’t be broken down any further without ceasing to be functional
atom/buttons.html
<a class="button" href="{{ include.datas.button-link }}">
{{ include.dats.button-text }}
</a>
Molecule
[...] molecules are relatively simple groups of UI elements functioning together as a unit.
Here the question is : "do we need datas from organism / page for our molecule to work ?"
Yes : Datas will be passed by the parent organism. molecule/buttonGetStarded.html looks like (Note : this molecule is Homonuclear, but is functionnal.)
{% include button.html datas=include.buttonDatas %}
No : Datas will be set from inside the molecule (imaginary data structure)
{% include button.html datas=site.data.buttonDatas.getStarted %}
So in your case, I think that organism/topBanner.html can be composed like this (simplified for readability) :
{{ include.tp-title }}
<h2>{{ include.tp-select-blurb }}</h2>
<div id="getstarted"> {% include molecules/buttonGetStarted.html %}</div>
<div id="survey"> {% include molecules/buttonSurvey.html %}</div>
As I guess that your data files can be used for Internationalization (I18n) purpose. The molecule language doesn't need to be passed all the way down. It can be guessed by the molecule itself.
{% if page.language == nil %}
// if no language variable in page's front matter
// we default to site language set in _config.yml
{% assign language = site.language %}
{% else %}
// language variable present in front matter
{% assign language = page.language %}
{% endif %}
// get datas depending on guessed language
{% assign datas = site.data[language] %}
// this can even be more atomic with
{% assign datas = site.data[language]['buttonSurvey'] %}
// include the atom with correct language datas
{% include atom/button.html datas=datas %}
Note that this logic can even be factorized.
How can I add multiple images on a page?
I want to have pages with 3-4 paragraphs and under the paragraphs I want to have multiple images like a small photo gallery, I found a extension for the images in bolt lib but it is more photographic oriented and I wander if it is possible to do it simpler then using the plugin... the curiosity is if boltcms can do this with default build.
In your contenttypes.yml setup file, add an imagelist to your fields, something like this:
gallery:
type: imagelist
label: "Gallery Images"
Then in your frontend template you print them out in the style that your gallery plugin needs, here's one that uses magnific as an example:
{% for image in record.gallery %}
<a href="{{ thumbnail(image, 1000, 1000) }}">
<i class="fi-arrows-expand hide"></i>
<img src="{{thumbnail(image,150,100)}}">
</a>
{% endfor %}
If you want to use the lightbox plugin that is included in the default Bolt theme, #Ross' for loop can be a little simpler:
{% for img in record.gallery %}
{{ popup(img, 150, 100) }}
{% endfor %}