I am trying to simply style my active links in Jekyll but have been unsuccessful in getting them working.
Here is the site that I am trying to get them working on: http://concisecss.github.io/concise.css, which you can see the source code for here: https://github.com/ConciseCSS/concise.css/tree/gh-pages.
I am putting this YAML code in my _config.yml to define my top-level navigation:
# Main Navigation
nav:
- text: Welcome
url: /concise.css/
- text: Why Concise
url: /concise.css/why-concise/
- text: Get Started
url: /concise.css/get-started/
- text: Documentation
url: /concise.css/documentation/layout/container/
- text: Add-Ons
url: /concise.css/add-ons/
Then in my header.html include, which is where my navigation is, I have:
{% for link in site.nav %}
<li>
<a {% if link.url == page.url %}class="active"{% endif %} href="{{ link.url }}">{{ link.text }}</a>
</li>
{% endfor %}
However, whenever I am on one of those navigation links, the active class is not added (the link should be pinkish when you are on it.
Everything else is working fine, so I'm assuming it might just be a small issue I'm running into.
Edit: Here is what the front-matter on one of my pages looks like:
---
layout: why-concise
title: Why Concise
permalink: /why-concise/
---
I just did the same thing in my blog project which is not alive yet to show you, but it works like this:
1. create a data file nav.yml file and write your nav text and URLs within a folder _data.
nav.yml
- text: Welcome
url: /concise.css/
- text: Why Concise
url: /concise.css/why-concise/
- text: Get Started
url: /concise.css/get-started/
- text: Documentation
url: /concise.css/documentation/layout/container/
- text: Add-Ons
url: /concise.css/add-ons/
2. In your html page you're going to create a loop through your data menu list from yml file.
{% for nav in site.data.nav %}
<li{% if nav.url == page.url %} class="active"{% endif %}>{{ nav.text }}</li>
{% endfor %}
Just remember to make sure your permalink is the same written in your nav.yml if you have set url:/concise.css/why-concise/ in your nav.yml so your permalink should be the same in the front-matter.
---
layout: why-concise
title: Why Concise
permalink: /concise.css/why-concise/
---
UPDATE:
#Keenan here is an example http://adrianorosa.com, that I told you before.
The source can be found at https://github.com/adrianorsouza/adrianorosa.com
Related
I have a strange problem where adding collections and collections_dir allows me to get one result where I can view the collection results on the ML Projects page that you can see in the sidebar of my website but it prevents any posts in _posts from rendering.
After doing some research I learned that posts is a collection by default, but I'm not sure how this helps me. I tried moving the _posts directory into the _projects directory, which is my collections_dir, but that does not work.
To replicate issue:
Clone the repo at https://github.com/luke-anglin/lukes_site
Build and serve the site, noting that posts do render
Go to _config.yml and remove the comments on line 26-29 which specify the collection and the collections_dir
Rebuild and see that the posts disappear, but the collection things work.
config.yml
# Dependencies
markdown: kramdown
# Permalinks
permalink: pretty
# Setup
title: Luke Anglin
tagline: Computer Science and Engineering Student
description: Software Engineering, DevOps, Data Science
url: http://localhost:4000/
baseurl: /
author:
name: Luke Anglin
# url: https://twitter.com/mdo
plugins:
- jekyll-paginate
paginate: 5
paginate_path: 'page:num'
# Custom vars
# Collections
# collections:
# - ml
# collections_dir: _projects
version: 2.1.0
github:
repo: https://github.com/luke-anglin/lukes_site
defaults:
- scope:
path: 'static/assets/media'
values:
image: true
index.html where the posts are supposed to be looped through
---
layout: default
title: Home
---
<div class="posts">
{% for post in paginator.posts %}
<div class="post">
<h1 class="post-title">
<a href="{{ post.url }}">
{{ post.title }}
</a>
</h1>
<span class="post-date">{{ post.date | date_to_string }}</span>
{{ post.content }}
</div>
{% endfor %}
</div>
<div class="pagination">
{% if paginator.next_page %}
<a class="pagination-item older" href="{{ site.baseurl }}page{{paginator.next_page}}">Older</a>
{% else %}
<span class="pagination-item older">Older</span>
{% endif %}
{% if paginator.previous_page %}
{% if paginator.page == 2 %}
<a class="pagination-item newer" href="{{ site.baseurl }}">Newer</a>
{% else %}
<a class="pagination-item newer" href="{{ site.baseurl }}page{{paginator.previous_page}}">Newer</a>
{% endif %}
{% else %}
<span class="pagination-item newer">Newer</span>
{% endif %}
</div>
Any other info can be found in the repo. Let me know if there are any other questions.
Try to remove the leading '_' from '_projects' directory. The 'collections_dir:' isn't allowed to have this character in the name of the target folder.
See: https://jekyllrb.com/docs/collections/
Particularly the red notice labeled 'Be sure to move drafts and posts into custom collections directory'. At the end it mentions 'Note that, the name of your collections directory cannot start with an underscore (_).'
Hope this helps.
when I create the port on Jekyll admin
title: layout:
page comments: true
social-share: true
show-avatar:true
use_math: true
I want to create this as default how should I do it?
Copy paste into your new post. Most CMS editors do that for you (like CloudCannon).
The real solution would be to transform them into site variables, by adding them to _config.yml and calling them using {{ site.social-share }} instead of {{ page.social-share }}.
An advanced solution would be to check if there are page variables, like this:
{% if page.social-share != nil %}
{{ page.social-share }}
{% else %}
{{ site.social-share }}
{% endif %}
I have the following in my _config.yml file:
collections:
nr_qa:
output: true
permalink: /:collection/:name
title: 'Node-RED Questions and Answers'
descriptions: 'Node-RED is a flow-based (visual) programming tool. These pages have some information that may be currently missing from the documentaiton.'
github_pages:
title: 'GitHub Pages and Jekyll/Liquid'
description: 'Hints and tips on using Jekyll for publishing to GitHub Pages.'
output: true
permalink: /:collection/:name
and I want to create an automatic index for my collections. So I use code like this:
## {{ site.collections.github_pages.title }}
{{ site.collections.github_pages.description }}
<ul>
{% for item in site.github_pages %}
<li>
{{ item.title | replace:'_',' ' }}
<p>{% if item.description %}
{{ item.description }}
{% else %}
{{ item.excerpt | strip_html }}
{% endif %}</p>
</li>
{% endfor %}
</ul>
And yes, I know I've rather mixed up my markdown and html there. Not relevant to this question.
The problem is that {{ site.collections.github_pages.title }} and {{ site.collections.github_pages.description }} don't render anything even though I think they should.
Can anyone point out my mistake please?
The problem is that title and description should be included in each collection, and not in _config.yml.
Check out Accessing Collection AttributesPermalink for further details.
update
title can be present in each collection metadata in _config.yml. The problem is how you are accessing those variables.
One approach is to have a specific layout for each collection, then you can access them like:
{% assign col = site.collections | where: 'label','github_pages' | first%}.
TITLE: {{ col.title }}.
DESCRIPTION: {{ col.description }}.
I'm trying to write a static site with Jekyll that has a few layers to it. What's the best way to generate links to all subpages within a section?
For example, if I have a site structure like this:
landing
- Topic A
- Content 1
- Content 2
- Content 3
- Topic B
- Content 1
- Content 2
- Content 3
What would be the best way to create links to each of the Content pages from its Topic page? And, is there a simple way to link to all the Topic pages from the landing?
These are not posts, just static pages. It would be really great if I could just do {% for topic.each %} ...etc. and print the links out.
I would not use posts for this purpose (as yaitloutou suggests). I would read the hierarchy from the directory structure (solution 1) or create two seperate collections (solution 2). You can let the collections from solution 2 share the same layout if you want that.
1. Using pages
Create a directory structure with index.md pages and loop over the Jekyll veriable called 'site.pages' to create the menu.
index.md
topic-a/index.md
content-1/index.md
content-2/index.md
content-3/index.md
topic-b/index.md
content-1/index.md
content-2/index.md
content-3/index.md
And loop over all pages like this:
<ul>
{% assign sitepages = site.pages | sort: 'order' %}
{% for sitepage in sitepages %}
<li {% if page.url == sitepage.url %} class="active"{% endif %}>
{{ sitepage.title }}
</li>
{% endfor %}
</ul>
If you want the nested structure, you can do something like this. Or if you want only the results for Topic A, you can do this:
<ul>
{% assign sitepages = site.pages | sort: 'order' %}
{% for sitepage in sitepages %}
{% if sitepage.url contains 'topic-a' %}
<li {% if page.url == sitepage.url %} class="active"{% endif %}>
{{ sitepage.title }}
</li>
{% endif %}
{% endfor %}
</ul>
2. Using collections (simplest solution and quickest build)
Create a collection Topic A and create another collection Topic B. Your config file should look like this:
collections:
topic-a:
output: true
permalink: /topic-a/:path/
topic-b:
output: true
permalink: /topic-b/:path/
Outputting the items of one topic goes like this:
{% assign atopics = site.topic-a | sort: 'order' %}
{% for atopic in atopics %}
<li {% if page.url == atopic.url %} class="active"{% endif %}>
{{ atopic.title }}
</li>
{% endfor %}
</ul>
You should create a _topic-a and a _topic-b directory with your content-1.md, content-2.md, etc. files.
Note that both solutions have YML variables called 'order', to determine the order of appearance of the items/pages. This looks like this:
---
title: mytitle
layout: mylayout
order: 50
---
mycontent
I'll propose here 2 ways, you can determine the "best" according to your specific needs/situation, and which one sound more adapted to them.
first of all, "posts" and "pages" are basically just collections of md/html files. with some variables associated to each one.
to generate files with this structure, you can:
1. Using _posts and page.categories
put all the sub-files in _posts (the 2017-01-01- is just a place holder)
_posts/
- 2017-01-01-content-a-1.md
- 2017-01-01-content-a-2.md
- 2017-01-01-content-a-3.md
- 2017-01-01-content-b-1.md
- 2017-01-01-content-b-2.md
- 2017-01-01-content-b-3.md
add appropriate categories to each file:
2.1. for posts caontent-a-* add category: topic-a (in this order) by adding this line in the yaml front matter at top of each of them:
---
layout: page # or any appropriate layout
category: topic-a
---
2.2. for posts caontent-b-* add category: topic-b
set a premalink to ignore the date, and create the desired structure, by adding the following line to _config.yml:
defaults:
-
scope:
path: "_posts" # to all the file in posts
values:
permalink: /landing/:categories/:title.html # set this as default permalink value
you still can specify a permalinks per post in its front matter, or just add the permalink line to each md folder front matter.
the above will generate the desired structure.
loop through all the
{% for entry in site.posts %}
{% if entry.category == type-a %}
<!-- do A stuff -->
{% elsif entry.category == type-b %}
<!-- do B stuff -->
{% endif %}
{% endfor %}
2. Using collections:
it's similar to the above, but instead of using the already existent _postscollection you'll start by creating a new collection (one advantage is that you'll not need to add a date )
any of the approaches above will generate this structure inside _site
landing/
type-a/
content-a-1/
index.html
content-a-2/
index.html
...
type-b/
...
I'm building a static website on gh-pages using jekyll liquid. I'm properly generating a simple, two-level navigation from a data file. My problem is that I am stuck trying to do two things:
Apply a "selected" class to the current page link item.
Apply an "open" class to the parent list item when a sublink menu is present.
Here's the format I'm using in my _data/nav.yml file
- title: Top Level Nav Item
url: level-1/
sublinks:
- title: Child Nav Item 1
url: child-1/
- title: Child Nav Item 2
url: child-2/
Here's how I'm building my navigation:
{% assign current_page = page.url | remove: 'index.html' %}
<ul class="-nav">
{% for nav in include.nav %}
{% assign current = null %}
{% if nav.url == current_page %}
{% assign current = ' _selected' %}
{% endif %}
{% if nav.url contains current_page %}
{% assign open = ' _open' %}
{% endif %}
<li class="-item{{ current }}{{ open }}">
{{ nav.title }}
{% if nav.sublinks and current_page contains nav.url %}
{% include navigation.html nav=nav.sublinks%}
{% endif %}
</li>
{% endfor %}
</ul>
Again this builds my navigation correctly, but it doesn't apply either the selected or open class.
Here's what I'm would like it to look like in the end:
What am I doing wrong?
Finally got this working. I solved it by adding an item to the front matter of my page called permalink where I specified the desired page permalink.
---
layout: default
title: Example
permalink: url/example/
---
I use this permalink to check against the current page.url to add the desired _selected class on the <li> element.
I made one modification to my example data file, adding in the parent url_part into the child's url. I'm not sure why, but I had trouble printing the entire URL correctly otherwise.
- title: Top Level Nav Item
url: level-1/
sublinks:
- title: Child Nav Item 1
url: level-1/child-1/
- title: Child Nav Item 2
url: level-1/child-2/
Lastly for my navigation.html include, here's how I'm creating my main menu, rendering sub-menus if they exist and should be shown, and properly selecting the active link:
{% assign current_page = page.url | remove: 'index.html' %}
<ul class="-nav">
{% for nav in include.nav %}
{% assign current = null %}
{% if nav.url == page.permalink %}
{% assign current = ' _selected' %}
{% endif %}
<li class="-item{{ current }}">
{{ nav.title }}
{% if nav.sublinks and current_page contains nav.url %}
{% include navigation.html nav=nav.sublinks%}
{% endif %}
</li>
{% endfor %}
</ul>
The big difference between this and the snippet I originally posted is I dropped the {{ open }} stuff for now. One problem at a time. The other thing is that I'm checking to see if nav.url equals page.permalink. Before I was checking against page.url and this always failed for me.
It's probably not the prettiest, but I finally got a jekyll liquid menu to generate (semi-)dynamically and properly select the active link.