From 72158d4464be12139633216de99889d37083b564 Mon Sep 17 00:00:00 2001 From: Florian Date: Mon, 17 Mar 2025 00:49:38 +0100 Subject: [PATCH] Add breadcrumb navigation and enhance button functionality --- _includes/footer.html | 8 ++++++++ _includes/header.html | 23 +++++++++++++++++++++-- _layouts/home.html | 6 +++++- _sass/_layout.scss | 17 ++++++++++++++++- 4 files changed, 50 insertions(+), 4 deletions(-) diff --git a/_includes/footer.html b/_includes/footer.html index aa423e9..70232d3 100644 --- a/_includes/footer.html +++ b/_includes/footer.html @@ -9,4 +9,12 @@ var sidenavElems = document.querySelectorAll('.sidenav'); var sidenavInstances = M.Sidenav.init(sidenavElems, {}); }); + + document.querySelectorAll("button").forEach(button => { + const href = button.getAttribute("data-href"); + if (!href) return; + button.addEventListener("click", () => { + window.location.href = button.getAttribute("data-href"); + }); + }); diff --git a/_includes/header.html b/_includes/header.html index 82b227e..6663ab2 100644 --- a/_includes/header.html +++ b/_includes/header.html @@ -16,14 +16,14 @@ + + +
+ Home + + {% assign segments = page.url | split: "/" %} + {% assign path = "" %} + + {% for segment in segments offset: 1 %} + {% assign path = path | append: "/" | append: segment %} + {% assign breadcrumb_page = site.pages | where: "url", path | first %} + + {% if breadcrumb_page and breadcrumb_page.title %} + › {{ breadcrumb_page.title }} + {% else %} + › {{ segment }} + {% endif %} + {% endfor %} +
diff --git a/_layouts/home.html b/_layouts/home.html index ae310c3..8cedf62 100644 --- a/_layouts/home.html +++ b/_layouts/home.html @@ -7,7 +7,11 @@ layout: default

{{ post.title }}

{{ post.date | date: "%d.%m.%Y" }}

{{ post.excerpt }}

- Weiterlesen... +
{% endfor %} diff --git a/_sass/_layout.scss b/_sass/_layout.scss index a5ac631..6d36ec8 100644 --- a/_sass/_layout.scss +++ b/_sass/_layout.scss @@ -4,9 +4,24 @@ body { } main { - height: calc(100vh - 124px); + height: calc(100vh - 180px); overflow-y: scroll; display: flex; flex-direction: column; align-items: center; } + +.breadcrumb { + font-size: 14px; + color: #ffcc00; + padding: 5px 10px; +} + +.breadcrumb a { + color: #ff003c; + text-decoration: none; +} + +.breadcrumb span { + color: #888; +}