I have the below folder structure in my Jekyll site:
...
_machine-learning
|- my-first-post.md
|- index.html
...
I wanted to arrange my site, such that when someone visits http://example.com/machine-learning/, they can see all of the collection pages neatly listed.
To do that, I added the following to my index.html:
<h1 class="page-heading">Machine Learning</h1>
<ul class="post-list">
{% for item in site.machine-learning %}
{{ item.title }}
{% endfor %}
</ul>
This works fine, but the only issue is that it displays my index.html in there as well, making everything look like a mess.
Am I doing something wrong here? How do I iterate through my collection, skipping over index?
I just changed the folder structure, moving the index.html file from inside the machine-learning/ collection to the root folder as machine-learning.html. The URL remains the same (example.com/machine-learning) and it doesn't show up in the site.machine-learning list.
Before:
...
_machine-learning
|- my-first-post.md
|- index.html
...
After:
...
machine-learning.html
_machine-learning
|- my-first-post.md
...
Related
I'm making a site using this theme: Github repo; theme demo.
The theme is built with the blog feed on the homepage (index.html). What I would like to do instead is:
make a static homepage (i.e. no blog feed on the homepage), and
have the blog feed live on a separate page called "Blog", with the link "/blog" or "/blog.html".
The code for the blog feed lives in _includes/blog.html and is included in the home layout using {% include blog.html %}.
What I've tried
changed the layout of index.html to a static layout like page, and created a new page in the root called blog.html with the layout home - this succeeded in creating a static homepage, but the blog page yields a home-like header but no blog feed (essentially a page with no content).
created a new page in the root called blog.html with the layout default, and pasted the content of the home layout (including {% include blog.html %}) into that page - this yielded the same result as above.
created a new layout called blog, which is a copy of the current home layout. I deleted the line {% include blog.html %} from the home layout. Then I gave index.html the home layout and created a new page in the root called blog.html with the layout blog. This yielded the same result as above.
In short, it seems like the blog feed isn't able to generate in any file other than index.html, and I haven't been able to figure out why. Is it something I'm missing in the theme's configuration? Apologies if this turns out to be a dumb question - I'm rather new to this. Thank you for any help you can give me!
EDIT: Turns out it was an issue with the paginator, which by default paginates from home.
The index.html uses the home layout:
---
layout: home
---
This lives in _layouts/home.html and contains a header and includes blog.html. It looks like this:
---
layout: default
---
<div class="home">
<div id="main" class="call-out"
style="background-image: url('{{ site.header_feature_image | relative_url }}')">
<h1> {{ site.header_text | default: "Change <code>header_text</code> in <code>_config.yml</code>"}} </h1>
</div>
{% include blog.html %}
</div>
The blog.html file loops over all (blog) posts:
<div class="posts">
{% for post in paginator.posts %}
...
To solve your issue, you need to define your own home page as an include like this:
Create your-custom-homepage.html with html of your choice.
Include it in home.html as {% include your-custom-homepage.html %} instead of {% include blog.html %}. Just replace the line in _layouts/home.html.
Then it will contain the header and your content.
The Jekyll documentation, e.g. https://jekyllrb.com/docs/step-by-step/04-layouts/ and https://jekyllrb.com/docs/includes/ will hopefully explain the details.
Big thanks to anyone who looks at this! I think the question is straightforward. It is only long because I wanted to be very thorough/ well-documented. I have taken the following example code from the jekyll documentation and edited it only so that I can find it with a permalink:
---
food: Pizza
permalink: "/pizza"
---
<h1>{{ page.food }}</h1>
When I run jekyll serve, the variable is outputted as it should be, but it has no layout. When I try to add a layout that I wrote to the page, the variable no longer outputs, as seen here.
Ultimately, I want to write an archive page that loops through categories, exactly like this code in the documentation:
{% for category in site.categories %}
<h3>{{ category[0] }}</h3>
<ul>
{% for post in category[1] %}
<li>{{ post.title }}</li>
{% endfor %}
</ul>
{% endfor %}
But, because the liquid variables are not working, I cannot make the archive without either putting in in the _layouts directory or manually copy-pasting my layout to the archive page.
Sorry if I'm coming across as a jekyll newbie (I am) or if the answer is in the docs somewhere and I could not find it, but here are my questions:
Why is this behavior happening? Is it something about how jekyll works or is it my layout that is causing this?
What would be the best practice for writing the archive/ correcting this error?
The github repository for this entire project is here
It looks like you are using the wrong liquid tag for trying to get the content. When injecting the page content, use {{ content }} not {{ page.content }}. You can see an example in the docs.
Looking at your includes for post_body.html and body.html, you just need to fix the above and it should work.
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 have a Jekyll project setup using multiple collections to group documents together. My _config.yml looks like this:
collections:
course001:
output: true
title: "Theme structure"
relative_url: "/theme-structure" # The subpath of the the site,
permalink: /theme-structure/:name
The directory structure of the course001 collection looks like this:
course001/
index.md
figures/
figure01.jpg
The the generated HTML looks like this:
_site/
figure01.jpg
theme-structure/
index.html
Instead of the expected:
_site/
theme-structure/
index.html
figure01.jpg
Why does the image appear in the site root folder? I do not want the images to appear in the root folder due to potential for name collision. This is only a problem for images, not documents which end up in the expected place.
Thanks for any help!
I don't know if this it's what you really looking for. Anyway, I propose you a new structure for your project supposing that you are going to create a lot of courses each with its own lectures. If you have also sub-lectures the code is easy to expand and handle them.
The first thing is your _config.yml file. You should create two collections for courses and lectures (unfortunately Jekyll doesn't handle sub-collections).
collections:
courses:
output: true
lectures:
output: true
You have to create both _courses and _lectures folders.
In the _lecture folder you should put the markdown files of your lectures. Each lecture should have a tag for the course it belongs to. I also add a tag for the lecture to facilitate the handling of paths. This is an example of a lecture file with an image.
---
layout: lecture
title: My first lecture
course: 001
lecture: my-first-lecture
---
This is my first lecture!!
![fish][fish]
[fish]: assets/img/{{page.lecture}}/fish.png
As you can see you need a folder assets in your _lecture folder. You could use the file lecture.html in your _layout folder to contain your template. The following one is just an example and basically is the same as a page layout.
---
layout: default
---
<article class="post">
<header class="post-header">
<h1 class="post-title">{{ page.title | escape }}</h1>
</header>
<div class="post-content">
{{ content }}
</div>
</article>
Now you need to group them by courses. Unfortunately, as I previously stated, Jekyll doesn't handle nested collection so we check the tag course in each lecture to see what are the lecture in each course. Thus if you want to type a list of lectures at the beginning of each course page then you should have a file _layout/course.html similar to
---
layout: default
---
<article class="post">
<header class="post-header">
<h1 class="post-title">{{ page.title | escape }}</h1>
</header>
<div class="post-content">
<ol>
{% for lecture in site.lectures %}
{% if lecture.course == page.course %}
<li>{{lecture.title}}</li>
{% endif %}
{% endfor %}
</ol>
{{ content }}
</div>
</article>
A typical markdown file for a course should be stored in _courses and will be similar to
---
layout: course
title: My first course
course: 001
---
This is my first course!!
The only thing left is a page to show the list of your courses. You could create a coursed.md file in your project folder with this content.
---
layout: page
title: Courses
permalink: /courses/
---
These are my courses:
<ol>
{% for course in site.courses %}
<li>{{course.title}}</li>
{% endfor %}
</ol>
I know that this probably is more than what you asked in your question and you still wonder why the strange behavior. I think that this is due to the fact that you should store the files that you want in your built site in an assets folder. This is the only way (I think, but maybe I'm wrong). I'm not referring only to the assets folder in your main directory but also to the assets folders in your collection's directories.
Following the Jekyll Collections documentation, I wrote the following code in _config.yml
_config.yml
collections:
- popular_posts
So when I print {{ site.collections }}, the output is "popular_posts".
I also made a folder called "_popular_posts" at the same level as "_posts".
_popular_posts contains two .md files with some YAML front matter, same as a post.
However, if I print {{ site.popular_posts }} or {{ site.collections.popular_posts }}, there is no output.
How do I have Jekyll recognize the .md files in that directory so that the following code will work?
{% for popular_post in site.popular_posts %}
<a href="{{ popular_post.link }}">
<h1>{{ popular_post.title }}</h1>
<img class="pop-img" src="{{ popular_post.image_url }}">
</a>
<span id="pop-order"><span class="pop-current-popular_post-number">{{ popular_post.number }}</span>/5</span>
{% endfor %}
It's quite easy! You're on the right track. In your _config.yml:
collections:
- popular_posts
This will tell Jekyll to read in all the files in _popular_posts.
If you want each of those two files to have a corresponding output file (like how _posts works now), you'll want to change your _config.yml to:
collections:
popular_posts:
output: true
This will produce files at /popular_posts/filename1.html and /popular_posts/filename2.html, one page for each post.
Collections are only recently up on GitHub Pages so if you were trying this there, it would have failed.
Check out jekyll-help for more help if you need it!