Is there any way in jekyll by which one can change variables in a website by simply doing a click? For example, my personal webpage is in english, but I want to have a clickable button in the header of the webpage to switch from english to spanish and vice-versa. This is very easy to implement in each of the different sections of the webpage with simple if statements as long as I have a variable that can change with simple clics, e.g.,
{% if variable == "en" %}
This is in english
{% else %}
Esto esta en español
{% endif %}
I was trying to do this by implementing a variable in the _config.yml file (e.g., creating a variable language: english and then changing the value of that variable by clicking some button on the header), but I just found out you can't do that; is there any other way to accomplish this?
Thanks in advance for the input.
If you have the content in english and spanish in the same page, and don't want to visit another page containing the other language, you will have to use javascript to show/hide the content in english/spanish.
If you can have one post in english and its equivalent in spanish, then adding a variable to the front-matter of each page/post or in the base layout of them to specify its language should work fine. For example, each post will have a language: es variable.:
Post in spanish:
~~~
title: ...
language: es
~~~~
Post in english
~~~
title: ...
language: en
~~~~
then in your _layouts/post.html you can detect the post language:
{% if post.language == 'es' %}
Esto esta en español
{% else %}
{# should be 'en' #}
This is in english
{% endif %}
There are many different strategies to handle languages in Jekyll websites, for example if you have all your spanish posts in the /es folder, then you can detect the language without a variable, or set the variable automatically setting up a scope in _config.yml
Related
There's a Liquid filter sample that allows you to "pick a random value from an array. Optionally, pick multiple values". (See documentation here)
My use case is to have a photo journal for viewers to click and generate one random post from my existing collection "photodiary", and not repeat the post in the next click.
Here's my code:
{% assign posts = site.photodiary | where_exp:"post", "post.url != page.url" | sample: 8 %}
{% for post in posts limit:1 %}
<a class="prev" href="{{post.url}}">Load a post</a>
{% endfor %}
</div>
<main>
{%- if page.content-type == "photodiary" -%}
<h2>{{page.title}}</h2>
<p> {{content}} </p>
{%- endif -%}
</main>
Currently I only have 8 entries, hence the sample: 8.
While the code works, after 1-2 clicks, the posts will be repeated and my page will only load the same 2 to 3 posts.
Can anyone let me know if there's a flaw in the logic or my code?
Thanks much!
Jekyll is a static site generator. This means that Jekyll generates the site once, so filters are applied only when building the site. The sample filter will randomly choose one or more posts and insert it in your page, but won't change when reloading the page, because the site has already been generated.
The kind of dynamic behavior you want can't be achieved by Jekyll, so you will have to do it other way. Take a look to Generating a random link through Javascript/HTML
I have a multilingual docs site for OSS built with Jekyll 3.8.5.
Currently, all items in the global navigation link to English pages.
I want to improve the global navs to contain URL to translated page if exists, otherwise English page as fallback. Since not all pages are translated.
Page structure is like below.
* _collection1
* page1.md
* page2.md
* _es
* collection1
* page1.md
* _ja
* collection1
* page2.md
* _fr
:
My attempted strategy is below.
Construct and capture translatedPageId to be tested.
Find the page by translatedPageId.
If the page found, generate a link to the translated page.
Otherwise generate a link to the English page.
Jekyll code is something like below. Suppose page have a language property to indicate current page language (e.g. es, fr, ja or etc).
{% capture translatedPageId %}/{{page.language}}{{navItem.url | remove_first: '.html' }}{% endcapture %}
{% assign translatedPage = site.pages | where: 'id', translatedPageId | first %}
<a {% if translatedPage.url %}
href="{{ translatedPage.url }}
{% else %}
href="{{ englishPage.url }}
{% endif %}
>...</a>
Expected: translatedPage is assigned and translatedPage.url should be non empty.
Actual: translatedPage is nil and translatedPage.url is nil too.
It looks like Jekyll does not allow filter (where) by id.
It seems that site.pages do not contain pages in collection.
To find pages in collection, it is required to use site.documents instead.
I'm trying to create a multilingual website for a company, and, because they have a lot of information, I'd like to include all their information in french and in english in the same post like so:
en:
title: "English Stuff"
fr:
title: "French Stuff"
The thing is, in order to use them dynamically in the same layout using something like this,
{{ post.[post.lang].title }}
I wanted to assign a variable when I fored them, to automatically assign the language I wanted on the posts, something like:
{% for post in site.categories.yesterday %}
{% assign lang = en %}
<li><h2>{{ post.lang.title }}<h2></li>
{% endfor %}
Is doesn't seem to be working (the titles are not rendered), so I wanted to ask for your opinion. Is the the most viable way to do it? What am I doing wrong and what can I do to improve it?
The easiest solution is to build separate sites on separate domains. It is not DRY, but it is the most simple solution. Google will tell you the same.
However, if you have a website that requires much changes/evolves over time, the 'not being DRY' part might become frustrating. That would be a reason to use an internationization plugin.
This frontmatter in your posts:
----
en:
title: "English Stuff"
fr:
title: "French Stuff"
----
... works with this loop:
{% for post in site.categories.yesterday %}
{% assign lang = en %}
<li><h2>{{ post[lang].title }}<h2></li>
{% endfor %}
Is there something like multiple language highlight syntax in Sublime Text? For example my code might look like this:
{% extends "template.html" %}
{% block content %}
{% if task == 'archimed_spiral' %}
<p>
$\frac{2}{3}$
</p>
{% elif task == 'gcd' %}
{% endif %}
{% endblock %}
Which is LaTeX inside html inside Jinja2. It gets pretty hard to read it properly.
Note
I know about Jinja2 package for Sublime, so it does highlight Jinja2 + html. Maybe I am just asking for too much..
Yes you can embed syntax highlighting. You basically define a start and end pattern, then include an existing scope. See Sublime Text 2: Different language highlighting based on context? (a la Webstorm).
For a bilingual website, i have yaml data files for 2 languages.
files example:
en_services.yml
fr_services.yml
Variable example in my page:
---
lang: en
---
I want to loop trough the file with the lang as the prefix, something like that:
{% for service in site.data.{{ page.lang }}_services %}
{% endfor %}
This doesn't work, is there a way I can do that?
By the way, I don't think I can add subfolders in the _data folder, right?
Thanks.
While that doesn't work, if you are able to put them both in the same file (grouped under the appropriate language code) there is a solution.
This gist was for another example based on post authors, but your should be able to use the same setup using language codes instead of author names.
You should use:
site.data[{{ page.lang }} + '_services']
data[i] has key/value entries for all the files in your _data directory, and passing the string in, like so (for /_data/book.yaml):
site.data['book']
...totally works and opens up the possibility of concatenating strings inside the brackets with whatever variable you want. :)
{% capture thefile %}{{ page.lang }}_services{% end capture %}
{% for service in site.data[thefile] %}
...
{% endfor %}
Should do the trick.