mirror of
https://github.com/hugo-fixit/FixIt.git
synced 2026-08-25 07:48:54 +00:00
🎉 Feat: add breadcrumb navigation (#309)
⬆️ Required Hugo versions above 0.109.0
This commit is contained in:
Cell
+2
-1
@@ -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
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
# FixIt Theme | Hugo
|
||||
|
||||
[](https://github.com/hugo-fixit/FixIt/releases)
|
||||
[](https://gohugo.io/)
|
||||
[](https://gohugo.io/)
|
||||
[](/LICENSE)
|
||||
|
||||
👉 English README | [简体中文说明](README.zh-cn.md)
|
||||
|
||||
+1
-1
@@ -1,7 +1,7 @@
|
||||
# FixIt 主题 | Hugo
|
||||
|
||||
[](https://github.com/hugo-fixit/FixIt/releases)
|
||||
[](https://gohugo.io/)
|
||||
[](https://gohugo.io/)
|
||||
[](/LICENSE)
|
||||
|
||||
👉 [English README](README.md) | 简体中文说明
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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";
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -100,6 +100,12 @@ pre {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.ellipses,
|
||||
.edit,
|
||||
.copy {
|
||||
@extend .print-d-none;
|
||||
}
|
||||
|
||||
.code-title {
|
||||
width: 100%;
|
||||
padding: 0.4rem;
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
>#comments {
|
||||
padding: 2rem 0;
|
||||
@extend .print-d-none;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
.post-reward {
|
||||
padding: 1rem;
|
||||
text-align: center;
|
||||
@extend .print-d-none;
|
||||
|
||||
&~.post-footer {
|
||||
margin-top: 0;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
|
||||
+7
-1
@@ -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"
|
||||
|
||||
+1
-1
Submodule docs updated: 2559efb6e6...f2521a1b6c
@@ -3,7 +3,7 @@
|
||||
<!DOCTYPE html>
|
||||
<html itemscope itemtype="http://schema.org/WebPage" lang="{{ .Site.LanguageCode }}">
|
||||
<head>
|
||||
{{ if (eq .Kind "home") | and (ne .Site.Params.disableThemeInject true) }}
|
||||
{{ if .IsHome | and (ne .Site.Params.disableThemeInject true) }}
|
||||
<meta name="theme" content='FixIt {{ .Scratch.Get "version" }}'>
|
||||
{{ end }}
|
||||
<meta charset="utf-8">
|
||||
@@ -19,11 +19,13 @@
|
||||
{{- /* Check theme isDark before body rendering */ -}}
|
||||
{{- $theme := .Site.Params.defaulttheme -}}
|
||||
<script>(window.localStorage?.getItem('theme') ? localStorage.getItem('theme') === 'dark' : ('{{ $theme }}' === 'auto' ? window.matchMedia('(prefers-color-scheme: dark)').matches : '{{ $theme }}' === 'dark')) && document.body.setAttribute('data-theme', 'dark');</script>
|
||||
|
||||
{{- /* Body wrapper */ -}}
|
||||
<div class="wrapper">
|
||||
<div class="wrapper" data-page-style="{{ (.Scratch.Get `params`).pageStyle | default `normal` }}">
|
||||
{{- partial "header.html" . -}}
|
||||
{{- partial "breadcrumb.html" . -}}
|
||||
{{- $toc := .Scratch.Get "toc" -}}
|
||||
<main class="container{{ if (eq $toc.enable true) | and (eq $toc.position `left`) }} container-reverse{{ end }}" data-page-style="{{ (.Scratch.Get `params`).pageStyle | default `normal` }}">
|
||||
<main class="container{{ if (eq $toc.enable true) | and (eq $toc.position `left`) }} container-reverse{{ end }}">
|
||||
{{- block "content" . }}{{ end -}}
|
||||
</main>
|
||||
{{- partial "footer.html" . -}}
|
||||
|
||||
@@ -0,0 +1,12 @@
|
||||
{{- if (gt (len .Ancestors.Reverse) 1) | and (eq .Site.Params.breadcrumb.enable true) -}}
|
||||
<nav aria-label="breadcrumb" class="breadcrumb-container{{ if .Site.Params.breadcrumb.sticky }} sticky{{ end }}">
|
||||
<ol class="breadcrumb">
|
||||
{{- range .Ancestors.Reverse -}}
|
||||
{{- if or .Site.Params.breadcrumb.showHome (not .IsHome) -}}
|
||||
<li class="breadcrumb-item"><a href="{{ .RelPermalink }}" title="{{ with .Description }}{{ . }}{{ else }}{{ if .IsPage | and .Summary }}{{ .Summary }}{{ else }}{{ .Title }}{{ end }}{{ end }}">{{ cond (and .Site.Params.breadcrumb.showHome .IsHome) (T "single.home") .Title }}</a></li>
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
<li class="breadcrumb-item active" aria-current="page">{{ .Title }}</li>
|
||||
</ol>
|
||||
</nav>
|
||||
{{- end -}}
|
||||
@@ -25,7 +25,7 @@
|
||||
<div class="header">
|
||||
{{- /* Title */ -}}
|
||||
<h1 class="single-title animate__animated animate__flipInX">
|
||||
{{ $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" -}}
|
||||
|
||||
+1
-1
@@ -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",
|
||||
|
||||
Reference in New Issue
Block a user