This question is related to What are some good ways to implement breadcrumbs on a Jekyll site? and I need to get the position from the loop. <meta itemprop="position" content="">
<nav class="breadcrumbs bootstrap hidden-sm-down">
<ol class="breadcrumb list-unstyled" itemscope itemtype="https://schema.org/BreadcrumbList">
<li class="breadcrumb-item" itemprop="itemListElement" itemscope
itemtype="http://schema.org/ListItem"><a itemprop="item" href="/"><span itemprop="name">Home</span></a><meta itemprop="position" content="1"></li>
{% assign crumbs = page.url | split: '/' %}
{% assign crumbs_total = crumbs | size | minus: 1 %}
{% for crumb in crumbs offset: 1 %}
{% if forloop.index == crumbs_total %}
<li class="breadcrumb-item active"itemprop="itemListElement" itemscope
itemtype="http://schema.org/ListItem"><meta itemprop="item" content="{{ site.url }}{{ page.url | relative_url }}"><span itemprop="name">{{ page.crumbtitle }}</span><meta itemprop="position" content=""></li>
{% else %}
<li class="breadcrumb-item" itemprop="itemListElement" itemscope
itemtype="http://schema.org/ListItem"><a itemprop="item" href="{% assign crumb_limit = forloop.index | plus: 1 %}{% for crumb in crumbs limit: crumb_limit %}{{ crumb | append: '/' }}{% endfor %}"><span itemprop="name">{{ crumb | replace:'-',' ' | upcase }}</span></a><meta itemprop="position" content=""></li>
{% endif %}
{% endfor %}
</ol>
</nav>
On line #12 Just add one. <meta itemprop="position" content="{{ crumbs_total | plus:1 }}">
Line # 16 already has the var, {% assign crumb_limit = forloop.index | plus: 1 %}
So, on line # 18 you only need <meta itemprop="position" content="{{ crumb_limit }}">
{% if page.layout != 'home' %}
<nav class="breadcrumbs bootstrap hidden-sm-down">
<ol class="breadcrumb list-unstyled" itemscope itemtype="https://schema.org/BreadcrumbList">
<li class="breadcrumb-item" itemprop="itemListElement" itemscope
itemtype="http://schema.org/ListItem"><a itemprop="item" href="/"><span itemprop="name">Home</span></a><meta itemprop="position" content="1"></li>
{% assign crumbs = page.url | split: '/' %}
{% assign crumbs_total = crumbs | size | minus: 1 %}
{% for crumb in crumbs offset: 1 %}
{% if forloop.index == crumbs_total %}
<li class="breadcrumb-item active"itemprop="itemListElement" itemscope
itemtype="http://schema.org/ListItem"><meta itemprop="item" content="{{ site.url }}{{ page.url | relative_url }}"><span itemprop="name">{{ page.crumbtitle }}</span><meta itemprop="position" content="{{ crumbs_total | plus:1 }}"></li>
{% else %}
{% assign crumbs_position = 1 %}
<li class="breadcrumb-item" itemprop="itemListElement" itemscope
itemtype="http://schema.org/ListItem"><a itemprop="item" href="{% assign crumb_limit = forloop.index | plus: 1 %}{% for crumb in crumbs limit: crumb_limit %}{{ crumb | append: '/' }}{% endfor %}"><span itemprop="name">{{ crumb | replace:'-',' ' | upcase }}</span></a>{% assign crumbs_postion = crumbs_position | plus:1 %}<meta itemprop="position" content="{{ crumb_limit }}"></li>
{% endif %}
{% endfor %}
</ol>
</nav>
{% endif %}
Related
This is in regards to the Shopify Debut theme!
So my main nav has two links, About us and Shop. When one clicks on Shop, one is directed to "https://myshop.com/collections". At this stage the Shop link gets the class site-nav--active and changes color to be visibly active.
My problem:
The moment I click on a collection I am directed to https://myshop.com/collections/collection-name, but the Shop link for some reason does not stay active. How can I change that? I need to the Shop link be active the moment the URL has collections in it, and also when on the cart page. Any ideas?
I think i need to change something in this block of code in the site-nav.liquid file.
{% comment %}
Renders a list of menu items
Accepts:
- linklist: {Object} Linklist Liquid object (required)
- wrapper_class: {String} CSS wrapper class for the navigation (optional)
Usage:
{% include 'site-nav', linklist: section.settings.main_linklist, wrapper_class: 'site-nav--centered' %}
{% endcomment %}
<ul class="site-nav list--inline{% if wrapper_class != blank %} {{ wrapper_class }}{% endif %}" id="SiteNav">
{% for link in linklists[linklist].links %}
{%- assign child_list_handle = link.title | handleize -%}
{% comment %}
Check if third-level nav exists on each parent link.
{% endcomment %}
{%- assign three_level_nav = false -%}
{% if link.links != blank %}
{% if link.levels == 2 %}
{%- assign three_level_nav = true -%}
{% endif %}
{% endif %}
{% if link.links != blank %}
<li class="site-nav--has-dropdown{% if three_level_nav %} site-nav--has-centered-dropdown{% endif %}{% if link.active %} site-nav--active{% endif %}" data-has-dropdowns>
<button class="site-nav__link site-nav__link--main site-nav__link--button{% if link.child_active %} site-nav__link--active{% endif %}" type="button" aria-expanded="false" aria-controls="SiteNavLabel-{{ child_list_handle }}">
<span class="site-nav__label">{{ link.title | escape }}</span>{% include 'icon-chevron-down' %}
</button>
<div class="site-nav__dropdown{% if three_level_nav %} site-nav__dropdown--centered{% endif %}" id="SiteNavLabel-{{ child_list_handle }}">
{% if three_level_nav %}
<div class="site-nav__childlist">
<ul class="site-nav__childlist-grid">
{% if link.links != blank %}
{% for childlink in link.links %}
<li class="site-nav__childlist-item">
<a href="{{ childlink.url }}"
class="site-nav__link site-nav__child-link site-nav__child-link--parent"
{% if childlink.current %} aria-current="page"{% endif %}
>
<span class="site-nav__label">{{ childlink.title | escape }}</span>
</a>
{% if childlink.links != blank %}
<ul>
{% for grandchildlink in childlink.links %}
<li>
<a href="{{ grandchildlink.url }}"
class="site-nav__link site-nav__child-link"
{% if grandchildlink.current %} aria-current="page"{% endif %}
>
<span class="site-nav__label">{{ grandchildlink.title | escape }}</span>
</a>
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
{% endif %}
</ul>
</div>
{% else %}
<ul>
{% for childlink in link.links %}
<li>
<a href="{{ childlink.url }}"
class="site-nav__link site-nav__child-link{% if forloop.last %} site-nav__link--last{% endif %}"
{% if childlink.current %} aria-current="page"{% endif %}
>
<span class="site-nav__label">{{ childlink.title | escape }}</span>
</a>
</li>
{% endfor %}
</ul>
{% endif %}
</div>
</li>
{% else %}
<li {% if link.active %} class="site-nav--active"{% endif %}>
<a href="{{ link.url }}"
class="site-nav__link site-nav__link--main{% if link.active %} site-nav__link--active{% endif %}"
{% if link.current %} aria-current="page"{% endif %}>
<span class="site-nav__label">{{ link.title | escape }}</span>
</a>
</li>
{% endif %}
{% endfor %}
</ul>
Below are two screenshot, which I hope will help you understand my problem.
Shop link active:
Shop link not active
The link.active
Returns true if the link object is active, or false if the link object is inactive.
So the current page URL needs to match the URL in that link.
In your case:
I need to the Shop link be active the moment the URL has collections in it, and also when on the cart page.
This should do the trick:
{%
if link.active or
request.page_type == "collection" or
request.page_type == "cart"
%}
{% assign link_active_class = "site-nav--active" %}
{% endif %}
<li class="{{ link_active_class }}">
<a href="{{ link.url }}"
class="site-nav__link site-nav__link--main{% if link.active %} site-nav__link--active{% endif %}"
{% if link.current %} aria-current="page"{% endif %}>
<span class="site-nav__label">{{ link.title | escape }}</span>
</a>
</li>
This code expand on what you had before, so if the exact "Shop" link is active OR the page type is a "collection" or "cart", the link is going to be active. If none of the conditions are met the link_active_class won't be defined and class will be empty class="".
Just make sure that this code is only applied to the "Shop" link otherwise all links will be active on collections or the cart page.
Add this code
{% assign link_active_class = "" %}
{% liquid
if link.active
assign link_active_class = "site-nav--active"
elsif link.title == "shop" and request.page_type == "collection"
assign link_active_class = "site-nav--active"
elsif link.title == "shop" and request.page_type == "cart"
assign link_active_class = "site-nav--active"
endif
%}
If link is active then it's business as usual, if not
We check if the link title is "shop" and the current page type is of the desired types then we add the active class.
Make sure that the link title case matches the case of the string we are checking against, in our case "shop", if it's "Shop", adjust the code, for the sake of simplicity I didn't want to add a filter to adjust the link.title case.
We should be able to merge the elsif lines into one line, however for the sake of readability and clarity I left them as two lines.
Above this line of code
<li class="site-nav--has-dropdown{% if three_level_nav %} site-nav--has-centered-dropdown{% endif %}{% if link.active %} site-nav--active{% endif %}" data-has-dropdowns>
Replace {% if link.active %} site-nav--active{% endif %} in the line above, with {{ link_active_class }}.
Now, it should look like this
<li class="site-nav--has-dropdown{% if three_level_nav %} site-nav--has-centered-dropdown{% endif %} {{ link_active_class }}" data-has-dropdowns>
I didn't test this however in theory it should do the trick!
I'm working on my Shopify using the Brooklyn theme. I need help with my footer adjustments. I can't seem to get the footer to be shorter in height. There's so much empty space in there. In the attached photo, you can see I have two columnns. The one on the left has two piece of content and the one on the right has one. How can I push all three of these out to the edge? I tried to set the padding and margins to 0...but it doesn't work. I want it closer to the outside rather than leaving a big space on both sides.
Thank you!
Footer Image
<footer class="site-footer small--text-left" role="contentinfo">
<div class="grid">
{% comment %}
Default to 1 footer column (copyright/powered_by/payment_types)
{% endcomment %}
{% comment %} Added by Ludo S on July 16 2018 {% endcomment %}
{% if section.settings.footer_newsletter_enable %}
{% assign num_footer_columns = 0 %}
{% else %}
{% assign num_footer_columns = 1 %}
{% endif %}
{% if section.settings.footer_newsletter_enable %}
{% assign num_footer_columns = num_footer_columns | plus: 1 %}
{% endif %}
{% comment %}
Create an extra menu column if link list has more than 5 links
{% endcomment %}
{% if linklists[section.settings.footer_link_list].links.size > 0 %}
{% comment %}
We have a Footer menu that isn't empty, we will need another column
{% endcomment %}
{% assign num_footer_columns = num_footer_columns | plus: 1 %}
{% assign extra_footer_linklist_column = false %}
{% assign footer_linklist_count = linklists[section.settings.footer_link_list].links.size %}
{% if footer_linklist_count > 5 %}
{% assign extra_footer_linklist_column = true %}
{% comment %}
We split the links so we'll need another column
{% endcomment %}
{% assign num_footer_columns = num_footer_columns | plus: 1 %}
{% endif %}
{% comment %}
If we have an odd amount of links, we need to show 1 more link in 1st column
{% endcomment %}
{% assign extra_link = footer_linklist_count | modulo: 2 %}
{% comment %}
We start with a 2nd column after first column is filled up.
{% endcomment %}
{% assign footer_linklist_split = footer_linklist_count | divided_by: 2 | plus: extra_link | plus: 1 %}
{% endif %}
{% comment %}
Determine whether there are social links
{% endcomment %}
{% assign footer_social_enable = false %}
{% if
settings.social_twitter_link != blank
or settings.social_facebook_link != blank
or settings.social_pinterest_link != blank
or settings.social_google_plus_link != blank
or settings.social_instagram_link != blank
or settings.social_tumblr_link != blank
or settings.social_youtube_link != blank
or settings.social_vimeo_link != blank
or settings.social_fancy_link != blank
or settings.social_snapchat_link != blank
%}
{% assign footer_social_enable = true %}
{% endif %}
{% comment %}
Calculate the number of footer columns shown. Default to 1.
{% endcomment %}
{% if footer_social_enable %}
{% assign num_footer_columns = num_footer_columns | plus: 1 %}
{% endif %}
{% case num_footer_columns %}
{% when 0 %}
{% when 1 %}
{% assign footer_column_width = '' %}
{% when 2 %}
{% assign footer_column_width = 'one-half small--one-whole' %}
{% when 3 %}
{% assign footer_column_width = 'one-third small--one-whole' %}
{% when 4 %}
{% assign footer_column_width = 'large--one-quarter medium--one-half' %}
{% endcase %}
{% if linklists[section.settings.footer_link_list].links.size > 0 %}
<div class="grid grid__item {% if num_footer_columns == 1 %} one-half push--large--one-quarter push--medium--one-quarter small--one-whole{% else %} {{ footer_column_width }}{% endif %}">
<ul class="no-bullets site-footer__linklist">
{% for link in linklists[section.settings.footer_link_list].links %}
{% comment %}
Create a second column
{% endcomment %}
{% if extra_footer_linklist_column and forloop.index == footer_linklist_split %}
</ul>
</div>
<div class="grid grid__item {% if num_footer_columns == 1 %} one-half push--large--one-quarter push--medium--one-quarter small--one-whole{% else %} {{ footer_column_width }}{% endif %}">
<ul class="no-bullets site-footer__linklist">
{% endif %}
<li>{{ link.title }}</li>
{% endfor %}
</ul>
</div>
{% endif %}
{% if footer_social_enable %}
{% comment %} Added the if statement for the class and made the div a grid item by Ludo S on July 16 2018 {% endcomment %}
<div class="grid grid__item {% if num_footer_columns == 1 %} one-half push--large--one-quarter push--medium--one-quarter small--one-whole{% else %} {{ footer_column_width }}{% endif %}">
<ul class="no-bullets social-icons">
{% if settings.social_instagram_link != blank %}
<li>
<a href="{{ settings.social_instagram_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Instagram' }}">
<span class="icon icon-instagram" aria-hidden="true"></span>
Instagram
</a>
</li>
{% endif %}
{% if settings.social_facebook_link != blank %}
<li>
<a href="{{ settings.social_facebook_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Facebook' }}">
<span class="icon icon-facebook" aria-hidden="true"></span>
Facebook
</a>
</li>
{% endif %}
{% if settings.social_twitter_link != blank %}
<li>
<a href="{{ settings.social_twitter_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Twitter' }}">
<span class="icon icon-twitter" aria-hidden="true"></span>
Twitter
</a>
</li>
{% endif %}
{% if settings.social_pinterest_link != blank %}
<li>
<a href="{{ settings.social_pinterest_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Pinterest' }}">
<span class="icon icon-pinterest" aria-hidden="true"></span>
Pinterest
</a>
</li>
{% endif %}
{% if settings.social_snapchat_link != blank %}
<li>
<a href="{{ settings.social_snapchat_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Snapchat' }}">
<span class="icon icon-snapchat" aria-hidden="true"></span>
Snapchat
</a>
</li>
{% endif %}
{% if settings.social_google_plus_link != blank %}
<li>
<a href="{{ settings.social_google_plus_link | escape }}" rel="publisher" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Google Plus' }}">
<span class="icon icon-google_plus" aria-hidden="true"></span>
Google Plus
</a>
</li>
{% endif %}
{% if settings.social_tumblr_link != blank %}
<li>
<a href="{{ settings.social_tumblr_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Tumblr' }}">
<span class="icon icon-tumblr" aria-hidden="true"></span>
Tumblr
</a>
</li>
{% endif %}
{% if settings.social_youtube_link != blank %}
<li>
<a href="{{ settings.social_youtube_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'YouTube' }}">
<span class="icon icon-youtube" aria-hidden="true"></span>
YouTube
</a>
</li>
{% endif %}
{% if settings.social_vimeo_link != blank %}
<li>
<a href="{{ settings.social_vimeo_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Vimeo' }}">
<span class="icon icon-vimeo" aria-hidden="true"></span>
Vimeo
</a>
</li>
{% endif %}
{% if settings.social_fancy_link != blank %}
<li>
<a href="{{ settings.social_fancy_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Fancy' }}">
<span class="icon icon-fancy" aria-hidden="true"></span>
Fancy
</a>
</li>
{% endif %}
</ul>
</div>
{% endif %}
{% comment %} Added by Ludo S on July 16 2018 {% endcomment %}
{% if section.settings.footer_newsletter_enable %}
<div class="customNewsletter grid__item{% if num_footer_columns == 1 %} one-half push--large--one-quarter push--medium--one-quarter small--one-whole{% else %} {{ footer_column_width }}{% endif %}{% if num_footer_columns == 4 %} narrow-newsletter{% endif %}">
{% form 'customer' %}
{{ form.errors | default_errors }}
{% if form.posted_successfully? %}
<div class="newsletter--form">
<div class="note form-success">{{ 'general.newsletter_form.newsletter_confirmation' | t }}</div>
</div>
{% else %}
<label for="Email" class="newsletter__label hidden-label">{{ 'general.newsletter_form.newsletter_email' | t }}</label>
<input type="hidden" name="contact[tags]" value="newsletter">
<div class="newsletter--form">
<p class="h2" style="color:{{ section.settings.newsletter_text_color }}">Stay in touch!</p><br>
<p class="h6" style="color:{{ section.settings.newsletter_text_color }}">Get updates on our newest styles.</p>
<div class="input-group">
<input type="email" value="{% if customer %}{{ customer.email }}{% endif %}" placeholder="{{ 'general.newsletter_form.newsletter_email' | t }}" name="contact[email]" id="Email" class="input-group-field newsletter__input" autocorrect="off" autocapitalize="off">
<span class="input-group-btn">
<button type="submit" class="btn newsletter__submit" name="commit" id="Subscribe">
<span class="newsletter__submit-text--large">{{ 'general.newsletter_form.submit' | t }}</span>
<span class="newsletter__submit-text--small">
<span class="icon icon-arrow-right" aria-hidden="true"></span>
</span>
</button>
</span>
</div>
</div>
{% endif %}
{% endform %}
</div>
{% endif %}
<div class="grid grid__item one-half push--large--one-quarter push--medium--one-quarter small--one-whole">
<p style="color:white">© {{ 'now' | date: '%Y' }}, {{ shop.name | link_to: '/' }}<br>Powered by Caffeine + Doggie Kisses</p></p>
{%- if section.settings.show_payment_icons -%}
{%- unless shop.enabled_payment_types == empty -%}
<span class="visually-hidden">{{ 'general.payment.method' | t }}</span>
<ul class="inline-list payment-icons">
{%- for type in shop.enabled_payment_types -%}
<li>
{{ type | payment_type_svg_tag: class: 'icon' }}
</li>
{%- endfor -%}
</ul>
{%- endunless -%}
{%- endif -%}
</div>
</div>
I am trying to hide a filter section if there are no tags to show for the current collection.
Here is my current code:
{% assign tags = 'Blue, Grey, Black, Oak, Bronze, Pewter, Gunmetal, Utile, Mahogany' | split: ',' %}
{% assign colour = tags | size %}
<ul class="subnav clearfix" {% if colour <= 0 %} style="display: none;" {% endif %}>
<li class="coll-filter filter-heading clearfix">
<label>Colour</label>
<hr class="hr--sidebar">
{% for t in tags %}
{% assign tag = t | strip %}
{% if current_tags contains tag %}
<li class="selection{% unless current_tag %} active{% endunless%}">
<span>{{ tag | link_to_remove_tag: tag }}</span>
</li>
{% elsif collection.tags contains tag %}
<li class="selection{% unless current_tag %} active{% endunless%}">
<div id="swatch-{{ tag }}" class="colour-filter"> </div>
<span> {{ tag | link_to_tag: tag }}</span>
</li>
{% endif %}
{% endfor %}
</li>
</ul>
{% assign tags = 'Egyptian Cotton, Silk, Satin, Salt' | split: ',' %}
{% assign material = tags | size %}
<ul class="subnav clearfix" {% if material <= 0 %} style="display: none;" {% endif %}>
<li class="coll-filter filter-heading clearfix">
<label>Material</label>
<hr class="hr--sidebar">
{% for t in tags %}
{% assign tag = t | strip %}
{% if current_tags contains tag %}
<li {% unless current_tag %}class="active"{% endunless%}>
{{ tag | link_to_remove_tag: tag }}
</li>
{% elsif collection.tags contains tag %}
<li>
{{ tag | link_to_tag: tag }}
</li>
{% endif %}
{% endfor %}
</li>
</ul>
{% assign tags = 'Small, Medium, Large' | split: ',' %}
{% assign size = tags | size %}
<ul class="subnav clearfix" {% if size <= 0 %} style="display: none;" {% endif %}>
<li class="coll-filter filter-heading clearfix">
<label>Size</label>
<hr class="hr--sidebar">
{% for t in tags %}
{% assign tag = t | strip %}
{% if current_tags contains tag %}
<li {% unless current_tag %}class="active"{% endunless%}>
{{ tag | link_to_remove_tag: tag }}
</li>
{% elsif collection.tags contains tag %}
<li>
{{ tag | link_to_tag: tag }}
</li>
{% endif %}
{% endfor %}
</li>
</ul>
{% assign tags = 'Under £5, £15-£100, £100-£250, £250-£750, £750-1000£, £1000' | split: ',' %}
{% assign price-range = tags | size %}
<ul class="subnav clearfix" {% if price-range <= 0 %} style="display: none;" {% endif %}>
<li class="coll-filter filter-heading clearfix">
<label>Price Range</label>
<hr class="hr--sidebar">
{% for t in tags %}
{% assign tag = t | strip %}
{% if current_tags contains tag %}
<li {% unless current_tag %}class="active"{% endunless%}>
{{ tag | link_to_remove_tag: tag }}
</li>
{% elsif collection.tags contains tag %}
<li>
{{ tag | link_to_tag: tag }}
</li>
{% endif %}
{% endfor %}
</li>
</ul>
My code has been updated based on the answers below.
Currently still not working.
I was sure if the fact that I have multiple filters and then assigned size, colour, material and price-range to tags was making it not work?
Thanks in advance.
Check if the tags collection is less than or equal to zero and then apply the display:none style.
{% if tags <= 0 %}
Try this
{% assign tags = 'Egyptian Cotton, Silk, Satin' | split: ',' %}
{% assign count = 0 %}
{% for t in tags %}
{% assign tag = t | strip %}
{% if current_tags contains tag or collection.all_tags contains tag %}
{% increment count %}
{% endif %}
{% endfor %}
<ul class="subnav clearfix" {% if count <= 0 %} style="display:none" {% endif %} >
<li class="coll-filter clearfix{% unless current_tags %} active{% endunless %}">
<label>Material</label>
<hr class="hr--sidebar">
{% for t in tags %}
{% assign tag = t | strip %}
{% if current_tags contains tag %}
<li {% unless current_tag %}class="active"{% endunless%}>
{{ tag | link_to_remove_tag: tag }}
</li>
{% elsif collection.all_tags contains tag %}
<li>
{{ tag | link_to_tag: tag }}
</li>
{% endif %}
{% endfor %}
</li>
</ul>
I'm making a website on jekyll and I use this code for the menu:
{% for page in site.pages %}
<li>{{ page.title }}</li>
{% endfor %}
But it adds to my menu an empty item of home page, that I don't need:
<li></li>
How can I remove it?
Original jekyll does :
{% for my_page in site.pages %}
{% if my_page.title %}
<a class="page-link" href="{{ my_page.url | prepend: site.baseurl }}">{{ my_page.title }}</a>
{% endif %}
{% endfor %}
But your can test on any page variable.
If you want to discriminate page depending on a type, you can set a front matter variable like type: toto and then generate your menu like this :
{% for my_page in site.pages %}
{% if my_page.type == 'toto' %}
<a class="page-link" href="{{ my_page.url | prepend: site.baseurl }}">{{ my_page.title }}</a>
{% endif %}
{% endfor %}
I'm using Hyde theme (it's version 2.0)
Having trouble with making sidebar's 'About' link to work.
It's hosted at Github's Pages. (my github repositiory)
Here's the default code that's in sidebar.html. How do I make the 'About' link work?
<div class="sidebar">
<div class="container sidebar-sticky">
<div class="sidebar-about">
<h1>{{ site.title }}</h1>
<p class="lead">{{ site.description }}</p>
</div>
<ul class="sidebar-nav">
<li class="sidebar-nav-item{% if page.title == "Home" %} active{% endif %}">
Home
</li>
{% comment %}
The code below dynamically generates a sidebar nav of pages with
`layout: page` in the front-matter. See readme for usage.
{% endcomment %}
{% assign pages_list = site.pages %}
{% for node in pages_list %}
{% if node.title != null %}
{% if node.layout == "page" %}
<li class="sidebar-nav-item{% if page.url == node.url %} active{% endif %}">
{{ node.title }}
</li>
{% endif %}
{% endif %}
{% endfor %}
<li class="sidebar-nav-item">About</li>
<li class="sidebar-nav-item">Download</li>
<li class="sidebar-nav-item">GitHub project</li>
<li class="sidebar-nav-item">Currently v{{ site.version }}</li>
</ul>
<p>© {{ site.time | date: '%Y' }}. All rights reserved.</p>
Just {{ site.baseurl }} missing in from your links.
{% assign pages_list = site.pages %}
{% for node in pages_list %}
{% if node.title != null %}
{% if node.layout == "page" %}
<li class="sidebar-nav-item{% if page.url == node.url %} active{% endif %}">
{{ node.title }}
</li>
{% endif %}
{% endif %}
{% endfor %}
<li class="sidebar-nav-item">About</li>
Markdown will be rendered to html, it should be:
<li class="sidebar-nav-item">About</li>
I just forked your repo, see here:
http://www.madhur.co.in/MapExplorer/about/