Skip to content

Instantly share code, notes, and snippets.

@wendeehsu

wendeehsu/header.hbs

Last active March 5, 2023 22:35
Show Gist options
  • Save wendeehsu/50fbea8f32d4e9abf32e4caa021d8662 to your computer and use it in GitHub Desktop.
Save wendeehsu/50fbea8f32d4e9abf32e4caa021d8662 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
header.hbs
{{!-- {{#if @site.navigation}}
{{navigation}}
{{/if}}
{{#if @site.secondary_navigation}}
<li class="more">
<span>
<a href="javascript:void(0);" class="js-open-secondary-menu">
{{t "More"}}
<span class="icon-chevron-down" aria-hidden="true"></span>
</a>
</span>
</li>
{{/if}} --}}
{{!-- note: get all tags --}}
{{#get "tags"}}
{{#foreach tags}}
{{!-- note: create a button for each tag. When button is clicked, trigger function `showDropdown` --}}
<div class="dropdown">
<button class="dropbtn" onclick="showDropdown('{{name}}')">{{name}}
<span class="icon-chevron-down" style="font-size: 1rem;position: relative; top: 3px;" aria-hidden="true"></span>
</button>
{{!-- note: `showDropdown` will display the following dropdown menu, listing all corresponding posts --}}
<div class="dropdown-content" id="tag-content-{{name}}">
{{!-- note: get posts filtered by current tag. Each post's title is a clickable link. --}}
{{#get "posts" filter="tags:{{name}}" order="published_at desc"}}
{{#foreach posts}}
<a href="{{url}}">{{title}}</a>
{{/foreach}}
{{/get}}
</div>
</div>
{{/foreach}}
{{/get}}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment