I am trying to create a navigation bar displaying all the categories and then by clicking on each category, it then links to all the posts in that category.
I tried below, it displays all the categories but not as a link.
{% for category in site.categories %}
<div class= "categories-title"><a name="{{ category | first }}">{{ category | first }}</a></div>
{% endfor %}
I also tried jekyll-category-archive-plugin as below, but it gives Error: Unknown tag 'category'.
{% for category in site categories %}
{% category link category %}This is a link to {{category}} {% endcategorylink %}
{% endfor %}
Can anyone give me some tips how to best do this?
Thanks a lot.
Jing
There's another solution that works on GitHub Pages:
One single page that contains all posts for all categories.
I answered a similar question here where I showed how to do this:
An easy way to support tags in a jekyll blog
In my answer, I'm using tags instead of categories, but as far as I know, both work exactly the same way.
(so you can just take my code and replace site.tags by site.categories)
The generated HTML for each tag will look something like this:
<h3 id="jekyll">jekyll</h3>
<ul>
<li>
Newest Jekyll post
</li>
<li>
Older Jekyll post
</li>
</ul>
That was the page which displays all posts for each category.
Now to the categories list in the navigation bar.
Again, take a look at the HTML above:
Thanks to the id="jekyll" part, you can use the link /tags/#jekyll to load the /tags/ page and directly jump to the Jekyll tag.
On my site, I'm using this everywhere where I'm linking to the /tags/ page.
To create these links in your navigation bar as well, you just need to take the first example code from your question and change this:
<a name="{{ category | first }}">
...to this:
<a href="/tags/#{{ category | first }}">
(I'll just assume that your categories page is under the URL /tags/ as well, like in my example)
So the complete code will look like that:
{% for category in site.categories %}
<div class="categories-title">{{ category | first }}</div>
{% endfor %}
The generated HTML will have a link like the following, for each category:
<div class="categories-title">jekyll</div>
EDIT:
You wrote in a comment:
I see that you have all tags with posts on one page. I have created a categories page and I would like to use this page as a template. While clicking each category in the navigation bar, I would like it to link to its own page.
In the meantime, I wrote a blog post about building separate category pages without a plugin:
Separate pages per tag/category with Jekyll (without plugins)
Jekyll doesn't render archive pages automatically like category pages by default. You have to create category pages yourself or use a plugin like »Category archive plugin for Jekyll«. But I guess this won't work, if you use GitHub Pages with Jekyll.
Related
I may be searching the wrong terms but I can't seem to find an obvious way to make easy links to page section ids.
Lets say I have a _widgets.md file with a section id=section-1 so I want to generate a link to: /widgets/#section-1
I found this for links:
Jekyll link within page
So an same page link is as simple as [Section 1](#section-1) but I can't seem to find how to add the anchor to links from another page like this [Widgets - Section 1]({% link _docs/widgets.md%}).
You can use the capture tag, see jekyll or shopify
In HTML
{% capture link_with_anchor %}{% link _pages/links.md %}#foobar{% endcapture %}
Links
In Markdown
{% capture link_with_anchor %}{% link _pages/links.md %}#foobar{% endcapture %}
[Links]({{ link_with_anchor }})
You can benefit from the link features (check if page exists) and can add the anchor, e.g. foobar.
One cool way to manage links is to have a central include file that defines the links by name, which is then referenced by each document.
For example you have a file in the _includes directory called "links.md" which defines all the cross-document links in your site:
[Section 1]: {% link widgets/page.md %}#section1
[Section 2]: {% link widgets/page2.md %}#section2
etc
Then in your markdown you can just say:
This is a link to [Section 1] isn't that nice.
... other content
{% include links.md %}
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.
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.
I would like to make a single-large-page with a menu on the side that links directly to sections inside this single page. Similar to the bootstrap manual pages.
I would like to write the page content in markdown. How can I make jekyll automatically create the navigation menu from the headers in the markdown page? I.e. loop/iterate over the headers to insert menu items?
I believe this can only be done with an extra plugin. Because you are running on GitHub pages, you can't use plugins.
This method is not automatic, but you achieve the same result.
_config.yml
nav:
- page: Header One
permalink: #header-one
- page: Header Two
permalink: #header-two
default.html
{% for n in site.nav %}
<li>{{ n.page }}</li>
{% endfor %}