🎉 Feat: add breadcrumb navigation (#309)

⬆️ Required Hugo versions above 0.109.0
hugo-fixit · Mar 24, 2023 · 0f5e602 · 0f5e602
1 parent 913b79b
commit 0f5e602
Show file tree

Hide file tree

Showing 25 changed files with 170 additions and 82 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -14,6 +14,7 @@ All notable changes to this project will be documented in this file.
 > Snapshot: <>
 
 - :tada: Feat: add natively support mermaid with code fences ([#230](https://github.com/hugo-fixit/FixIt/issues/230))
+- :tada: Feat: add breadcrumb navigation ([#309](https://github.com/hugo-fixit/FixIt/pull/309))
 - :sparkles: Feat: add instant page (@Mejituu [#279](https://github.com/hugo-fixit/FixIt/pull/279))
 - :sparkles: Feat: add `force` option value to `params.page.lightgallery`
 - :sparkles: Feat: add loop paramter for typeit ([#303](https://github.com/hugo-fixit/FixIt/pull/303))
@@ -36,7 +37,7 @@ All notable changes to this project will be documented in this file.
 - :art: Style: adjust the mobile header style and fix the bug that scrolling is invalid when there are too many menus on mobile ([#289](https://github.com/hugo-fixit/FixIt/issues/289))
 - :art: Perf: optimize the scroll bar style of body and toc-auto elements
 - :memo: Docs: refactor the theme documentation
-- :wrench: Chore: change the theme minimum supported Hugo versions above **0.93.0**
+- :wrench: Chore: change the theme minimum supported Hugo versions above **0.109.0**
 - :arrow_up: Chore(libs):
   - Update Update @waline/client from 2.10.0 to 2.14.7 (@Mejituu [#279](https://github.com/hugo-fixit/FixIt/pull/279))
   - Update typeit from 8.7.0 to 8.7.1

diff --git a/README.md b/README.md
@@ -1,7 +1,7 @@
 # FixIt Theme | Hugo
 
 [![GitHub release (latest by date)](https://img.shields.io/github/v/release/hugo-fixit/FixIt?style=flat)](https://github.com/hugo-fixit/FixIt/releases)
-[![Hugo](https://img.shields.io/badge/Hugo-%5E0.93.0-ff4088?style=flat&logo=hugo)](https://gohugo.io/)
+[![Hugo](https://img.shields.io/badge/Hugo-%5E0.109.0-ff4088?style=flat&logo=hugo)](https://gohugo.io/)
 [![License](https://img.shields.io/github/license/hugo-fixit/FixIt?style=flat)](/LICENSE)
 
 👉 English README | [简体中文说明](README.zh-cn.md)

diff --git a/README.zh-cn.md b/README.zh-cn.md
@@ -1,7 +1,7 @@
 # FixIt 主题 | Hugo
 
 [![GitHub release (latest by date)](https://img.shields.io/github/v/release/hugo-fixit/FixIt?style=flat)](https://github.com/hugo-fixit/FixIt/releases)
-[![Hugo](https://img.shields.io/badge/Hugo-%5E0.93.0-ff4088?style=flat&logo=hugo)](https://gohugo.io/)
+[![Hugo](https://img.shields.io/badge/Hugo-%5E0.109.0-ff4088?style=flat&logo=hugo)](https://gohugo.io/)
 [![License](https://img.shields.io/github/license/hugo-fixit/FixIt?style=flat)](/LICENSE)
 
 👉 [English README](README.md) | 简体中文说明

diff --git a/assets/css/_core/_breadcrumb.scss b/assets/css/_core/_breadcrumb.scss
@@ -0,0 +1,46 @@
+.breadcrumb-container {
+  padding-inline: 1rem;
+  font-size: 0.75rem;
+  z-index: 100;
+  @extend .print-d-none;
+
+  &.sticky {
+    position: sticky;
+    top: $header-height;
+  }
+
+  .breadcrumb {
+    display: flex;
+    flex-wrap: wrap;
+    padding: 0.5rem 0;
+    margin: 0 auto;
+    list-style: none;
+    border-bottom: 1px inset $global-border-color;
+    background-color: $global-background-color;
+    @extend %page-style;
+
+    [data-theme='dark'] & {
+      border-bottom-color: $global-border-color-dark;
+      background-color: $global-background-color-dark;
+    }
+
+    .breadcrumb-item {
+      display: flex;
+
+      +.breadcrumb-item::before {
+        content: "/";
+        display: inline-block;
+        padding-inline: 0.5rem;
+        color: $global-font-secondary-color;
+
+        [data-theme='dark'] & {
+          color: $global-font-secondary-color-dark;
+        }
+      }
+
+      &.active {
+        @extend .text-secondary;
+      }
+    }
+  }
+}
diff --git a/assets/css/_core/_footer.scss b/assets/css/_core/_footer.scss
@@ -13,6 +13,10 @@ footer {
     .footer-line {
       width: 100%;
 
+      &:not(.powered):not(.copyright) {
+        @extend .print-d-none;
+      }
+
       .footer-divider:not(:first-child)::before {
         content: '|';
         margin-left: 0.25rem;

diff --git a/assets/css/_core/_header.scss b/assets/css/_core/_header.scss
@@ -3,6 +3,7 @@ header {
   z-index: 150;
   background-color: $header-background-color;
   @include transition(box-shadow 0.3s ease);
+  @extend .print-d-none;
 
   [data-theme='dark'] & {
     background-color: $header-background-color-dark;

diff --git a/assets/css/_core/_layout.scss b/assets/css/_core/_layout.scss
@@ -8,9 +8,15 @@
   main {
     flex: 1 0 auto;
 
-    aside:first-child {
-      order: 2;
+    aside {
+      flex: 1;
+      padding-inline: 0.5rem;
+
+      &:first-child {
+        order: 2;
+      }
     }
+
 
     &.container {
       display: flex;
@@ -30,5 +36,6 @@
 }
 
 @import "_core/header";
+@import "_core/breadcrumb";
 @import "_core/footer";
 @import "_core/pagination";
diff --git a/assets/css/_core/_media.scss b/assets/css/_core/_media.scss
@@ -1,5 +1,5 @@
 @media only screen and (min-width: 1441px) {
-  .page {
+  %page-style {
     width: 60%;
 
     [data-page-style='wide'] & {
@@ -10,55 +10,27 @@
       max-width: 800px;
     }
   }
-
-  aside {
-    width: 20%;
-
-    [data-page-style='wide'] & {
-      width: 18%;
-    }
-
-    [data-page-style='narrow'] & {
-      width: calc(50% - 400px);
-    }
-  }
 }
 
 @media only screen and (max-width: 1440px) {
-  .page {
+  %page-style {
     width: 56%;
 
     [data-page-style='wide'] & {
       width: 60%;
     }
   }
-
-  aside {
-    width: 22%;
-
-    [data-page-style='wide'] & {
-      width: 20%;
-    }
-  }
 }
 
 @media only screen and (max-width: 1200px) {
-  .page {
+  %page-style {
     width: 52%;
 
     [data-page-style='wide'] & {
       width: 56%;
     }
   }
 
-  aside {
-    width: 24%;
-
-    [data-page-style='wide'] & {
-      width: 22%;
-    }
-  }
-
   #header-desktop .header-wrapper {
     padding-right: 1rem;
   }
@@ -69,6 +41,10 @@
 }
 
 @media only screen and (max-width: 960px) {
+  %page-style {
+    width: 80% !important;
+  }
+
   aside {
     display: none !important;
   }
@@ -77,15 +53,28 @@
     display: block;
   }
 
-  .page {
-    width: 80% !important;
-  }
-
   #header-desktop .header-wrapper {
     padding-left: 1rem;
   }
 }
 
+
+@media only screen and (min-width: 681px) {
+  .breadcrumb-container.sticky {
+    body:not([data-header-desktop='sticky']) & {
+      top: 0;
+    }
+    // adjust the scroll margin top of the content anchors on the page
+    body:not([data-header-desktop='auto']) &+.container .content [id] {
+      scroll-margin-top: calc(var(--#{$prefix}scroll-mt) + var(--#{$prefix}breadcrumb-offset));
+    }
+  }
+
+  [data-header-desktop='normal'] .page .content [id] {
+    --#{$prefix}scroll-mt: #{$global-scroll-margin-top};
+  }
+}
+
 @media only screen and (max-width: 680px) {
   #header-desktop {
     display: none;
@@ -100,17 +89,25 @@
     display: none !important;
   }
 
-  .page {
-    width: 100% !important;
-
-    .content {
-      [id] {
-        [data-header-mobile='normal'] & {
-          scroll-margin-top: 0;
-        }
-      }
+  .breadcrumb-container.sticky {
+    body:not([data-header-mobile='sticky']) & {
+      top: 0;
+    }
+    // adjust the scroll margin top of the content anchors on the page
+    body:not([data-header-mobile='auto']) &+.container .content [id] {
+      scroll-margin-top: calc(var(--#{$prefix}scroll-mt) + var(--#{$prefix}breadcrumb-offset));
     }
+  }
+
+  [data-header-mobile='normal'] .page .content [id] {
+    --#{$prefix}scroll-mt: #{$global-scroll-margin-top};
+  }
+
+  %page-style {
+    width: 100% !important;
+  }
 
+  .page {
     .categories-card {
       .card-item {
         width: 100%;
@@ -155,21 +152,7 @@
     }
   }
 
-  .print-d-none,
-  header,
-  footer .footer-line:not(.powered):not(.copyright),
-  #toc-auto,
-  .comment-visitors,
-  .comment-count,
-  .code-header>.ellipses,
-  .code-header>.edit,
-  .code-header>.copy,
-  .post-info-share,
-  .post-info-more section:last-child,
-  .post-nav,
-  .fixed-buttons,
-  .single>#comments,
-  .github-corner {
+  .print-d-none {
     display: none !important;
   }
 }
diff --git a/assets/css/_core/_root.scss b/assets/css/_core/_root.scss
@@ -8,4 +8,8 @@
   @each $color, $value in $theme-colors {
     --#{$prefix}#{$color}-dark: #{darken($value, 5%)};
   }
+
+  // Scroll margin top and Stack sticky top related
+  --#{$prefix}scroll-mt: calc(#{$header-height} + #{$global-scroll-margin-top});
+  --#{$prefix}breadcrumb-offset: 2.5rem;
 }
diff --git a/assets/css/_page/_index.scss b/assets/css/_page/_index.scss
@@ -1,13 +1,10 @@
 .page {
   position: relative;
+  @extend %page-style;
 
   .content {
     [id] {
-      scroll-margin-top: $header-height;
-
-      [data-header-desktop='normal'] & {
-        scroll-margin-top: 0;
-      }
+      scroll-margin-top: var(--#{$prefix}scroll-mt);
     }
   }
 

diff --git a/assets/css/_page/_single.scss b/assets/css/_page/_single.scss
@@ -32,6 +32,11 @@
     font-size: 0.875rem;
     color: $global-font-secondary-color;
 
+    .comment-visitors,
+    .comment-count {
+      @extend .print-d-none;
+    }
+
     span {
       display: inline-block;
     }

diff --git a/assets/css/_partials/_single/_code.scss b/assets/css/_partials/_single/_code.scss
@@ -100,6 +100,12 @@ pre {
         cursor: pointer;
       }
 
+      .ellipses,
+      .edit,
+      .copy {
+        @extend .print-d-none;
+      }
+
       .code-title {
         width: 100%;
         padding: 0.4rem;

diff --git a/assets/css/_partials/_single/_comment.scss b/assets/css/_partials/_single/_comment.scss
@@ -1,3 +1,4 @@
 >#comments {
   padding: 2rem 0;
+  @extend .print-d-none;
 }
diff --git a/assets/css/_partials/_single/_footer.scss b/assets/css/_partials/_single/_footer.scss
@@ -53,6 +53,7 @@
       }
 
       .post-info-share {
+        @extend .print-d-none;
         a * {
           vertical-align: text-bottom;
         }
@@ -65,6 +66,10 @@
     display: flex;
     justify-content: space-between;
     font-size: 0.9rem;
+
+    section:last-child {
+      @extend .print-d-none;
+    }
   }
 
   .post-tags {
@@ -86,6 +91,7 @@
     display: flex;
     justify-content: space-between;
     gap: 1.5rem;
+    @extend .print-d-none;
 
     .post-nav-item {
       flex: 1;

diff --git a/assets/css/_partials/_single/_reward.scss b/assets/css/_partials/_single/_reward.scss
@@ -1,6 +1,7 @@
 .post-reward {
   padding: 1rem;
   text-align: center;
+  @extend .print-d-none;
 
   &~.post-footer {
     margin-top: 0;