As mentioned in the Jekyll docs here, I have the following in my _config.yml as:
collections:
sections:
order:
- introduction.md
- battery-state.md
- vibe.md
- references.md
To render the content of each file within the HTML, I have the following:
{% for section in site.sections %}
{{ section.content }}
{% endfor %}
However, the content order is not presented as what I defined in the config file. How do I display the content in the order I defined in the config file?
Manually ordering documents in a collection was introduced in Jekyll 4.0
To use this feature, make sure that you're using Jekyll 4.0
For a site deployed on GitHub Pages, that would mean having to build the site outside GitHub Pages environment and upload the contents of the destination directory (_site).
You can also choose to add the sections to the front matter of the page. This is useful when you are not using Jekyll v4 or you want the user to be able to edit the order in CloudCannon, Netlify CMS, Forestry or another CMS with front matter editor.
sections:
- introduction
- battery-state
- vibe
- references
And the use a layout like this:
{% for s in page.sections %}
{% for section in site.sections %}
{% if s == section.slug %}
...
{% endif %}
{% endfor %}
{% endfor %}
Related
I have a Jekyll setup that looks like this:
_config.yml
_records
a.html
b.html
c.html
...
I want to create a home page that links to each record. However, I want to render a.html and b.html to /records/, but I don't want to render c.html to /records/, as that HTML will be provided to my server from a different process altogether.
I tried setting the following in _config.yml:
exclude:
_records/c.html
But this also removes c.html from site.records, which is not what I want. The best solution I have right now is to prevent my deploy script from deploying _site/records/c.html, but I'd much rather prevent _site/records/c.html from being generated in the first place.
Is it possible to include c.html in site.records to create the links on the home page but not render /records/c.html? Any help others can offer with this question would be greatly appreciated!
Here's how I did this. Inside _records/c.html, set in the front matter:
permalink: '_'
route: /records/c.html
That will make it so that we render the page's html content to _site/_.html, a route that won't ever get visited.
Then in index.html to create the link to the route attribute of this page, use:
{% for record in site.records %}
{% if record.route %}
{% assign url = record.route %}
{% else %}
{% assign url = record.url %}
{% endif %}
<a href='{{ url }}'>{{ record.title }}</a>
{% endfor %}
I'm trying to build a static website using the GRAV CMS. So far, I've been creating *.html.twig files and associating a single page to the individual template.
This is how my pages look:
{% block header%}
{% include 'partials/bhss-default-header.html.twig' %}
{% endblock %}
#CONTENT
{% block footer%}
{% include 'partials/bhss-default-footer.html.twig' %}
{% endblock %}
However, my purpose is to have an editor creating pages from the admin interface and adding HTML blocks similar to the custom fields or shortcodes in WordPress. I want this blocks to be filled with text.
I need to mention that my website is built with Semantic-UI, so I'm not using any theme provided by GRAV.
How can I replicate this behavior and what choices do I have ? The website is small at this time, so I can remake every page.
Thank you!
If you want to use editor, you need to build your header and footer as Grav pages in Markdown, not Grav theme's template file in Twig. Example:
{% block header%}
{{ pages.find('/my-header').content }}
{% endblock %}
#CONTENT
{% block footer%}
{{ pages.find('/my-footer').content }}
{% endblock %}
my-header and my-footer are 2 pages. You can unpublish these pages to hide them from your menu and forbid direct access to them.
I have a Jekyll website and everything works fine, just it doesn't parse <h2> tags in markdown (I also tried putting the actual HTML and still doesn't work. Example: here or here. When I test it with a local server everything works though.
Source code for the /apps page:
---
layout: page
title: My Apps
---
Here's a list of all my published apps, sorted by platform.
[If you need Support and would like to open a ticket, please go to the Support page.](/support)
Most applications are available in English, Italian and Polish so far.
[Click here to take a look at the Patch Notes](/apps/patchnotes)
{% for member in site.data.apps %}
{% if member.link %}
##{% if member.fontAwesome %}{% for image in member.fontAwesome %}<i class="fa fa-{{ image }}"></i> {% endfor %}{% endif %}{{ member.name }}
<br><br>
{{ member.description }}
{% if member.bundleName %}Included in [{{ member.bundleName }}]({{bundleLink }}) bundle.{% endif %}
{% endif %}
{% endfor %}
[Source for app/patchnotes - Page Layout]
Try this:
## {% if member.fontAwesome %}
I just added a whitespace between ## and {℅
Let me know if it works, yeah?
Your Gemfile includes some dependencies like bourbon or time-to-read. Those are not supported plugins/gems (list of gh-pages supported gems/plugins).
If you leave only github-pages gem in your Gemfile and build or serve locally, it fails.
I think that Github pages is also failing but more gracefully.
If you want to work with "exotics" gems, you will have to generate locally and push the generates site on github.
I have a GitHub pages site running Jekyll. I want to write a code block in a blog post, with the following content:
{% include file.html %}
Unfortunately Jekyll is reading this literally and including the referenced files content, i.e. the content of file.html. How do I explicitly tell Jekyll that this line should not be executed?
Use the raw tag.
{% raw %}{% include file.html %}{% endraw %}
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.