Commit 0474bf19 authored by epsi sayidina's avatar epsi sayidina

Tutor-04: Simple Template Inheritance

parent 3409201e
......@@ -120,6 +120,8 @@ Comparation with other static site generator
> Add Pure Bulma CSS Framework
* Layout Inheritance (simple): columns-double
* Configuration: Move main configuration to above.
* Standard Header (jquery or vue) and Footer
......
......@@ -11,6 +11,5 @@ module.exports = function(collection) {
}
});
// returning an array in addCollection works in Eleventy 0.5.3
return [...tagSet];
};
......@@ -2,6 +2,8 @@
> Add Pure Bulma CSS Framework
* Layout Inheritance (simple): columns-double
* Configuration: Move main configuration to above.
* Standard Header (jquery or vue) and Footer
......
document.addEventListener("DOMContentLoaded", function(event) {
// Check for click events on the navbar burger icon
const navbarBurger = document.getElementsByClassName("navbar-burger")[0];
const navbarBulma = document.getElementById("navbarBulma");
// Toggle if navbar menu is open or closed
function toggleMenu() {
navbarBurger.classList.toggle("is-active");
navbarBulma.classList.toggle("is-active");
console.log('Toggle is-active class in navbar burger menu');
}
// Event listeners
navbarBurger.addEventListener('click', toggleMenu, false);
});
module.exports = function(collection) {
let tagSet = new Set();
collection.getAll().forEach(function(item) {
if( "tags" in item.data ) {
let tags = item.data.tags;
tags = tags.filter(function(item) {
switch(item) {
// this list should match the `filter` list in tags.njk
case "all":
case "nav":
case "post":
case "posts":
return false;
}
return true;
});
for (const tag of tags) {
tagSet.add(tag);
}
}
});
// returning an array in addCollection works in Eleventy 0.5.3
return [...tagSet];
};
{% extends "layouts/base.njk" %}
{% extends "layouts/columns-double.njk" %}
{% block main %}
<main role="main"
class="column is-two-thirds">
<article class="blog-post box">
<h2 class="title is-4"
>{{ renderData.title or title or metadata.title }}</h2>
{{ content | safe }}
</article>
</main>
{% endblock %}
{% block aside %}
<aside class="column is-one-thirds">
<div class="box">
This is an archive kind layout.
</div>
</aside>
{% block aside_body %}
This is an archives kind layout.
{% endblock %}
{% extends "layouts/base.njk" %}
{% block main %}
<main role="main"
class="column is-two-thirds">
<article class="blog-post box">
{% block main_header %}
<h2 class="title is-4"
>{{ renderData.title or title or metadata.title }}</h2>
{{ content | safe }}
{% endblock %}
</article>
</main>
{% endblock %}
{% block aside %}
<aside class="column is-one-thirds">
<div class="box">
{% block aside_body %}
This is a default kind layout.
{% endblock %}
</div>
</aside>
{% endblock %}
{% extends "layouts/base.njk" %}
{% extends "layouts/columns-double.njk" %}
{% block main %}
<main role="main"
class="column is-two-thirds">
<article class="blog-post box">
<h2 class="title is-4"
>{{ renderData.title or title or metadata.title }}</h2>
{{ content | safe }}
</article>
</main>
{% endblock %}
{% block aside %}
<aside class="column is-one-thirds">
<div class="box">
This is a tag-name kind layout.
</div>
</aside>
{% block aside_body %}
This is a tag-name kind layout.
{% endblock %}
{% extends "layouts/base.njk" %}
{% extends "layouts/columns-double.njk" %}
{% block main %}
<main role="main"
class="column is-two-thirds">
<article class="blog-post box">
<h2 class="title is-4"
>{{ renderData.title or title or metadata.title }}</h2>
{{ content | safe }}
</article>
</main>
{% endblock %}
{% block aside %}
<aside class="column is-one-thirds">
<div class="box">
This is a tags kind layout.
</div>
</aside>
{% block aside_body %}
This is a tags kind layout.
{% endblock %}
<nav role="navigation" aria-label="main navigation"
class="navbar is-fixed-top is-dark maxwidth">
<div class="navbar-brand">
<a class="navbar-item"
href="{{ "/" | url }}">
<img src="{{ "/assets/images/logo-gear.png" | url }}"
alt="Home" />
</a>
<a class="navbar-item"
href="{{ "/pages/" | url }}">
Blog
</a>
<a role="button" class="navbar-burger burger"
aria-label="menu" aria-expanded="false" data-target="navbarBulma">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="navbarBulma" class="navbar-menu">
<div class="navbar-start">
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">
Archives
</a>
<div class="navbar-dropdown">
<a class="navbar-item"
href="{{ "/tags/" | url }}">
By Tags
</a>
<hr class="navbar-divider">
<a class="navbar-item"
href="{{ "#" | url }}">
By Chronology
</a>
</div>
</div>
<a class="navbar-item"
href="{{ "/pages/about/" | url }}">
About
</a>
</div>
<div class="navbar-end">
<form class="is-marginless" action="/pages/search/" method="get">
<div class="navbar-item">
<input class="" type="text" name="q"
placeholder="Search..." aria-label="Search">
&nbsp;
<button class="button is-light"
type="submit">Search</button>
</div>
</form>
</div>
</div>
</nav>
<!-- JavaScript at end of body for optimized loading -->
<script src="{{ "/assets/js/bulma-burger-plain.js" | url }}"></script>
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment