Let's say I have a MarkDown file which is a post in a Jekyll static web site. It resides in _posts and it is named 2020-05-16-my-post.md. Assume its content is given by:
---
title: 'My Post'
date: 2020-05-16
author: My Name
layout: post
class: news
---
This is the 1st sentence which is should appear both on the index page and the post.
This is the 2nd sentence which should appear only on the index page.
This is the 3rd sentence which should appear only on the post.
This is the 4th sentence which should appear on both.
This is the beginning of the 2nd paragraph...
So in the 1st paragraph we have 4 sentences. Which I want some of them to appear only in the index page (2nd sentence) some of them only in the post (3rd) and the rest on both.
Let's assume that in the index page I use something like:
<ul>
{% for post in site.posts %}
<li>
{{ post.title }}
{{ post.excerpt }}
</li>
{% endfor %}
</ul>
So in the index page it uses what's in the 1st paragraph of the page (As I didn't explicitly define the excerpt tag).
I thought I could do something like that:
This is the 1st sentence which is should appear both on the index page and the post.
{% if page.layout == "index" %}
This is the 2nd sentence which should appear only on the index page.
{% endif %}
{% if page.layout == "post" %}
This is the 3rd sentence which should appear only on the post.
{% endif %}
This is the 4th sentence which should appear on both.
This is the beginning of the 2nd paragraph...
But it seems Jekyll renders the page only in single context (Of its explicit YAML).
Is there a way to do so? Namely different pages will draw different rendering of the content?
Remark
I am aware of the options to use excerpts and excerpt_separator. Yet they are not satisfying in my use case.
Related
I am trying to creating a blog on my website using markdown but I am having trouble with the blog titles.
I have created a loop to bring in the latest title and excerpt onto my home page which works fine.:
{% for post in site.posts limit: 1 %}
On my site I have a list of my blogs (https://jenjnif.github.io/blog.html)
and when you click on one to read the whole blog I would the title for only that blog to show up.
I used the same code as above {% for post in site.posts limit: 1 %} to only show one title as all blog titles were showing without this but obviously then it will only show the latest title regardless of which blog I am actually viewing. Here is the markdown for that page:
---
layout: default
---
<div id="post">
<div class="blog-header">
{% for post in site.posts limit: 1 %}
</div>
<h2 class="blog-title">{{ post.title }}</h2>
{% endfor %}
{{ content }}
</div>
I know the limit: 1 will not work because it is only then going to take the latest title but I don't know how else to get only one title showing up on each blog post. Is there a way to make sure only one title shows - only showing the correct, current blog title, not all of them?
All files can be found in my GitHub repository: https://github.com/jenjnif/jenjnif.github.io
When using Jekyll and its Liquid templating engine, they have several sets of variables. Instead of using a for loop to go through all the posts, you can use page.title to get the title for the current blog post.
<div id="post">
<div class="blog-header">
</div>
<h2 class="blog-title">{{ page.title }}</h2>
{{ content }}
</div>
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.
Link to repo: https://github.com/AlvSovereign/AlvSovereign.github.io
I am coding my portfolio site, with a link to my blog. The fully processed portfolio site sits in _site/index.html which contains a link to the blog (fully processed link exists in _site/blog.html)
Blog.html at the root of the repo has in the front matter a layout of "bl", which is defined in my layouts folder under "bl.html".
"bl.html" is the layout I want for my blog page, which contains my includes etc. It also contains the {{ content }} liquid tag.
If I am thinking about this the right way, my posts are being parsed (I think this is the right terminology) into "post.html" - which has the front matter "layout: bl", which then parsed into "bl.html", and that this is so as they both have {{ content }} in each files.
Now all my posts are showing correctly (i think) within _site/(year)/(month) etc. However, they are not ending being parsed through my "blog.html" file, and then visible on my webpage. How I know this is that the fully processed "blog.html" file does not have any of the posts in them.
What will I need to do to solve this issue?
If it helps, I use Prepros for LiveReload, and using LANYON template, http://lanyon.getpoole.com/
{{ content }} refers to all the content that in the file that is being converted to HTML code.
For example, if you are passing a blog post on 'What is Jekyll' to any layout that has the {{ content }} tag, all text other than the YAML front matter will be put in that place. Basically the content of the post. You can also limit the scope by using {{ post.content }}, see Variables for more info here.
So the Liquid {{ content }} variable works as intended.
Looking at your website, I believe you're trying to display all the posts in your blog.html file, so what you're actually asking about is why aren't my posts being displayed (not parsed) in your blog.html file, hence not visible on your webpage.
The reason for that is because you shouldn't use {{ content }} tag for that, what you want instead is something like this snippet of code as mentioned in the Jekyll docs, that will grab all your posts, and display them by post title, as well as a link to that post. Here's the code to display a list of your posts. (taken from the website I linked you)
<ul>
{% for post in site.posts %}
<li>
{{ post.title }}
</li>
{% endfor %}
</ul>
So just swap out {{ content }} in your bl.html layout with that code snippet and you've got what you want.
Additionally, if you also want to display the content/excerpt in the list of posts, just add the liquid tag {{ post.content }} or {{post.excerpt}} like so:
<ul>
{% for post in site.posts %}
<li>
{{ post.title }}
{{ post.content }} /* or post.excerpt */
</li>
{% endfor %}
</ul>
Of course, edit the HTML accordingly for your preference. Read the documentation on how to set up post excerpts here, which uses the <!--more--> comment separator for excerpts.
I strongly recommend reading the JekyllRb documentation for more information, it's a lot to read and not always easily understandable, but keep referring to it and you'll understand more in no time.
How do I hide a page in Jekyll? I have a Contact Us page (as a Google Docs form), and there is a response page. When created, it shows up in the navigation as a child of the Contact Us page, but I don't want it to show up at all.
I currently have this set up in the front matter like this:
---
layout: page
title: Thanks
permalink: /contact/thanks/
---
If you do not put any title in the page, it does not show up in the nav bar. Something like
---
layout: page
permalink: /contact/thanks/
---
Rather than 'opting out' of including certain pages, you can 'opt in' to include only the pages you do want included in your navigation. This is useful if you have a large number of pages.
Include a menu variable in the front matter of every page you do want included in the navigation:
---
layout: blog
title: Blog
menu: main
permalink: /blog/
---
And then add an if statement where your navigation is generated:
<ul>
{% for page in site.pages %}
{% if page.menu == 'main' %}
<li>{{ page.title }}</li>
{% endif %}
{% endfor %}
</ul>
This is likely to be in _layouts/default.html or possibly _includes/header.html.
Thanks to David Jaquel's answer on this question for the inspiration: Excluding page from Jekyll navigation bar
Just add a show_in_nav: false in you page front matter and in your navigation bar, do a :
<ul>
{% for p in pages %}
{% unless show_in_nav == false %}
<li>{{ p.title }}</li>
{% endunless %}
{% endfor %}
</ul>
This will prevent your page from appearing in navigation bar.
According to docs, set published to false in your front matter:
---
layout: post
title: Blogging Like a Hacker
published: false
---
Front Matter
I am setting up a basic Github-hosted Jekyll website (so minimal, I am not even bothering to change the default theme). I have a nested site with a small number of first-tier pages that I would like to appear in the navigation bar (i.e. the default mode of operation). I also have some second-tier pages that I would like to NOT junk up the navigation bar.
While a multi-level navigation system would be nice, I'm trying to avoid using plugins. Therefore, I believe the simplest solution is to just exclude tier two pages from the navigation system entirely.
Here's a hypothetical page structure (minus the other Jekyll files):
jekyllsite
jekyllsite/bar
jekyllsite/bar/alice
jekyllsite/bar/alice/index.md
jekyllsite/bar/bob
jekyllsite/bar/bob/index.md
jekyllsite/bar/index.md
jekyllsite/baz
jekyllsite/baz/index.md
jekyllsite/foo
jekyllsite/foo/eggs
jekyllsite/foo/eggs/index.md
jekyllsite/foo/index.md
jekyllsite/foo/spam
jekyllsite/foo/spam/index.md
jekyllsite/index.md
In descending order of awesome, this is how I'd like this to go down:
Best case, context sensitive navigation (don't think possible without plugins): When visiting jekyllsite/index.md, I would get a single layer navigation bar offering me links to foo, bar, and baz. When visiting jekyllsite/bar/index.md, I would see a two-tiered navigation bar containing foo, bar, and baz at the top level, and with alice and bob in the second tier.
The next best option would be for me to change something globally, such that only top-level directories (foo, bar, baz) got added to the nav bar. Subdirectories such as alice, bob, spam, and eggs would be automatically excluded from the nav bar.
Finally (and I think this might be the easiest) would be for a YAML frontmatter flag to exclude a page. Something like nonav: true in the frontmatter of the page to be excluded.
This seems like it would have to be a fairly common use case, though I haven't been able to find anything that looks like a short path to either of these three options. I'm hoping someone more familiar with Jekyll has a "path of least resistance" answer.
I personally do ;
Front matter for page that appears in main menu
---
layout: default
title: Home
menu: main
weight: 10
---
Main menu template (classes are from twitter bootstrap) :
<ul class="nav navbar-nav">
{% comment %}Jekyll can now sort on custom page key{% endcomment %}
{% assign pages = site.pages | sort: 'weight' %}
{% for p in pages %}
{% if p.menu == 'main' %}
<li{% if p.url == page.url %} class="active"{% endif %}>
{{ p.title }}
</li>
{% endif %}
{% endfor %}
</ul>
You can then replicate that at any level by setting a custom var in the yaml front matter :
menu : foo
and passing a value to a menu template
{% include navbar.html menuLevel="foo" %}
And intercept it like this :
{% if p.menu == menuLevel %}
Any page that doesn't expose a menu: toto will not appear in navigation.
If you are coming from the basic Jekyll theme, the simplest way to exclude pages from the header site navigation is to add an unless page.exclude exception.
(page.exclude is a new Yaml frontmatter attribute.)
By default, this is in _includes/header.html:
{% for page in site.pages %}
{% unless page.exclude %}
{% if page.title %}
<a class="page-link" href="{{ page.url | prepend: site.baseurl }}">{{ page.title }}</a>
{% endif %}
{% endunless %}
{% endfor %}
and a corresponding tag to the Yaml frontmatter of any page:
---
... other attributes ...
exclude: true
---
Credit to Michael Chadwick.
It is possible to create a multi-level, context-sensitive navigation like you described without plugins, I have done it.
The only caveat is that you need to maintain a YAML data file with your menu hierarchy - with my approach, it's not possible to generate this automatically from your directory structure.
I'll show the short version here, but I have a way more detailed explanation on my blog:
Building a pseudo-dynamic tree menu with Jekyll
Example project on GitHub
1. Create a YAML data file (/_data/menu.yml) which contains your menu hierarchy:
- text: Home
url: /
- text: First menu
url: /first-menu/
subitems:
- text: First menu (sub)
url: /first-menu/first-menu-sub/
subitems:
- text: First menu (sub-sub)
url: /first-menu/first-menu-sub/first-menu-sub-sub/
- text: Second menu
url: /second-menu/
subitems:
- text: Second menu (sub)
url: /second-menu/second-menu-sub/
2. Create an include file (/_includes/nav.html) with the following content:
{% assign navurl = page.url | remove: 'index.html' %}
<ul>
{% for item in include.nav %}
<li>
<a href="{{ item.url }}">
{% if item.url == navurl %}
<b>{{ item.text }}</b>
{% else %}
{{ item.text }}
{% endif %}
</a>
</li>
{% if item.subitems and navurl contains item.url %}
{% include nav.html nav=item.subitems %}
{% endif %}
{% endfor %}
</ul>
This include file will take care of showing the correct navigation for each page:
showing the next level of subitems only for the current page
displaying the current page in bold
If you don't understand what exactly the include file is doing under the covers, read my blog post - I explained it there, in great detail (in the section "The recursive include file").
3. In your main layout file, embed the include file:
{% include nav.html nav=site.data.menu %}
This will display the navigation there.
Note that I'm passing the complete data file from step 1 to the include.
That's all!
As I said in the beginning:
The only disadvantage of this approach is that each time you create a new page, you also need to insert the page's title and URL into the data file.
But on the other hand, this makes it very easy to exclude some pages from the navigation: you just don't add them to the data file.