diff --git a/CHANGELOG.md b/CHANGELOG.md index 45f85e85..fc94c55a 100644 --- 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 index c79a0d54..e431a34f 100644 --- 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 index 1cba7d4d..17218188 100644 --- 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 new file mode 100644 index 00000000..9f087afd --- /dev/null +++ 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 index c5c468e2..5d1d827c 100644 --- 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 index 4de6ed58..1098c3fc 100644 --- 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 index 14959909..38e0b894 100644 --- 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 index ffca8cfa..0ab87e03 100644 --- 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,40 +10,20 @@ 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'] & { @@ -51,14 +31,6 @@ } } - 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 index fa85c2d0..7554899c 100644 --- 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 index 0d757f0d..6ac5e31c 100644 --- 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 index 308ba3c2..6399c8a0 100644 --- 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 index 65321799..230c0b2d 100644 --- 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 index 1c4dbef8..1eb452f0 100644 --- 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 index 3c98b1f7..0b73bab6 100644 --- 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 index 598cdd80..93203933 100644 --- 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; diff --git a/assets/css/_partials/_single/_toc.scss b/assets/css/_partials/_single/_toc.scss index 3bc99cbf..e4c03a65 100644 --- a/assets/css/_partials/_single/_toc.scss +++ b/assets/css/_partials/_single/_toc.scss @@ -50,14 +50,16 @@ #toc-auto { display: block; position: sticky; - top: $header-height + 0.5rem; - padding-left: 1rem; - padding-right: 1rem; - @include overflow-wrap(break-word); + top: var(--#{$prefix}scroll-mt); box-sizing: border-box; visibility: hidden; - + @include overflow-wrap(break-word); @include blur; + @extend .print-d-none; + + [data-header-desktop='normal'] & { + --#{$prefix}scroll-mt: #{$global-scroll-margin-top}; + } .toc-title { margin: 0.5rem 0; diff --git a/assets/css/_partials/_widgets/_fixed-button.scss b/assets/css/_partials/_widgets/_fixed-button.scss index 4e973d77..6a0a3783 100644 --- a/assets/css/_partials/_widgets/_fixed-button.scss +++ b/assets/css/_partials/_widgets/_fixed-button.scss @@ -9,8 +9,8 @@ background-color: $header-background-color; @include border-radius(1.25rem); @include transition(color 0.4s ease); - @include blur; + @extend .print-d-none; &:hover, &:active { diff --git a/assets/css/_partials/_widgets/_github-corner.scss b/assets/css/_partials/_widgets/_github-corner.scss index 157eecab..cb156688 100644 --- a/assets/css/_partials/_widgets/_github-corner.scss +++ b/assets/css/_partials/_widgets/_github-corner.scss @@ -17,6 +17,7 @@ position: fixed; top: 0; z-index: 150; + @extend .print-d-none; :hover .octo-arm { animation: octocat-wave 560ms ease-in-out; diff --git a/assets/css/_variables.scss b/assets/css/_variables.scss index ae08bb12..45a283bc 100644 --- a/assets/css/_variables.scss +++ b/assets/css/_variables.scss @@ -12,6 +12,9 @@ $global-font-size: 16px !default; $global-font-weight: 400 !default; $global-line-height: 1.5rem !default; +// scroll-margin-top of content anchor +$global-scroll-margin-top: 0.5rem; + // Radius of the border $global-border-radius: 5px !default; diff --git a/config.toml b/config.toml index 19506684..45c98fd6 100644 --- a/config.toml +++ b/config.toml @@ -157,6 +157,12 @@ # whether to use typeit animation for subtitle name typeit = false + # FixIt 0.2.18 | NEW Breadcrumb config + [params.breadcrumb] + enable = false + sticky = false + showHome = false + # Footer config [params.footer] enable = true @@ -822,4 +828,4 @@ [module] [module.hugoVersion] extended = true - min = "0.93.0" + min = "0.109.0" diff --git a/docs b/docs index 2559efb6..f2521a1b 160000 --- a/docs +++ b/docs @@ -1 +1 @@ -Subproject commit 2559efb6e6fe6f4076aa22ae151343d1fec79305 +Subproject commit f2521a1b6cb9dd39c08fd4e0444fdab416455d17 diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 01d2eb8f..b08a33ca 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -3,7 +3,7 @@ - {{ if (eq .Kind "home") | and (ne .Site.Params.disableThemeInject true) }} + {{ if .IsHome | and (ne .Site.Params.disableThemeInject true) }} {{ end }} @@ -19,11 +19,13 @@ {{- /* Check theme isDark before body rendering */ -}} {{- $theme := .Site.Params.defaulttheme -}} + {{- /* Body wrapper */ -}} -
+
{{- partial "header.html" . -}} + {{- partial "breadcrumb.html" . -}} {{- $toc := .Scratch.Get "toc" -}} -
+
{{- block "content" . }}{{ end -}}
{{- partial "footer.html" . -}} diff --git a/layouts/partials/breadcrumb.html b/layouts/partials/breadcrumb.html new file mode 100644 index 00000000..8689c159 --- /dev/null +++ b/layouts/partials/breadcrumb.html @@ -0,0 +1,12 @@ +{{- if (gt (len .Ancestors.Reverse) 1) | and (eq .Site.Params.breadcrumb.enable true) -}} + +{{- end -}} diff --git a/layouts/posts/single.html b/layouts/posts/single.html index 47e51196..f3a5671e 100644 --- a/layouts/posts/single.html +++ b/layouts/posts/single.html @@ -25,7 +25,7 @@

{{- /* Title */ -}}

- {{ $repost := $params.repost | default dict }} + {{- $repost := $params.repost | default dict -}} {{- with $repost -}} {{- if eq .Enable true -}} {{- $icon := dict "Class" "fa-solid fa-share fa-fw" -}} diff --git a/theme.toml b/theme.toml index fb6ea5b2..68f3e795 100644 --- a/theme.toml +++ b/theme.toml @@ -7,7 +7,7 @@ licenselink = "https://github.com/hugo-fixit/FixIt/blob/master/LICENSE" description = "A Clean, Elegant but Advanced Hugo Theme for Hugo." homepage = "https://github.com/hugo-fixit/FixIt" demosite = "https://fixit.lruihao.cn" -min_version = "0.93.0" +min_version = "0.109.0" tags = [ "blog",