I can not seem to get Jekyll to recognize that a collection exists!
I have my folder structure like so
_posts
_includes
_layouts
_sass
_site
_portfolio
assets
index.html
_portfolio is the collection
I have it in my _config.yml file as so
colletions:
portfolio:
output: true
And I'm trying to show it in a list here (this snippet is from my default layout which is being used in my index.html)
{% for item in site.portfolio %}
<a href="{{ item.url | relative_url }}" class="portfolio-item-link">
<div class="portfolio-item" style="background: url('{{ site.url }}/assets/img/{{ item.image }}'); background-size: cover; background-position: center;">
<h1 class="portfolio-item-title">{{ item.title }}</h1>
</div>
</a>
{% endfor %}
The problem is Jekyll isn't even adding anything to the collection! If I do {{ site.portfolio | inspect }} it returns nil. I've also tried generating the site on my Ubuntu system (my current system is windows). If anyone has any ideas I'd really appreciate it!
So I misspelled "collections" in my _config.yml file. Don't do that. It works now.
I would like to add a clickable map to my jekyll site on github.
For example, a map of the US which I click to reach an anchor tag
containing text related to the state clicked.
An example of what I hope to end up with is at:
http://wilsonmar.github.io/museums-roadtrip-usa/
There are two different approaches: HTML and CSS.
Are there examples of either for jekyll hosted on github pages?
In order to generate an html image-map with Jekyll, you can use collections.
file: _us-states/alaska.md
---
name: Alaska
abbrev: AK
coord: "52,249,42,253,..."
---
Your text here
An you generate your image-map like this :
<img src="image.png" alt="Us states" usemap="#us-states" />
<map name="us-states">
{% for s in site.collections['us-states'] %}
<area shape="poly" coords="{{ s.map.coord }}"
href="{{ site.baseurl }}{{ s.url }}"
alt="{{ s.name }}" title="{{ s.name }}" >
{% endfor %}
</map>
I wrote my posts and added <!-- more --> to where I want to stop the content from showing. After this, octopress shows a "read on" link, I want this not to show. I think this snippet (inside _includes/article.html file) is the key:
{% if excerpted == 'true' %}
<footer>
<a rel="full-article" href="{{ root_url }}{{ post.url }}">{{ site.excerpt_link }}</a>
</footer>
{% endif %}
I tried to delete this snippet and the link still shows. Tried to delete excerpt_link from `_config.ylm' and the html is still generated for the link.
This is the way to do it. Be sure to do it in sources/_includes/article.html and not within .themes/themeName.
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.
I'm simply just trying to make a "Next Page" link button for my BigCartel theme. I can't seem to find the variable on BigCartel's site to do this. Could anybody give me the variable or just a code that would do this?
If you're paginating through products, the easiest thing to do is use the default_pagination filter, like so:
{% paginate products from products.all by 10 %}
<p>{{ product.name }}</p>
{{ paginate | default_pagination }}
{% endpaginate %}
However, if you're making a product page link to the "next product", you can do that using the product.next_product variable, like so:
{{ product.next_product | link_to: "Next >" }}