Compare commits

...

3 Commits

Author SHA1 Message Date
XUE
3fec36f917 Merge b70d729283 into f65aca556d 2024-11-03 21:50:39 +08:00
XUE
b70d729283 fix: restore the sidebar position to make the selected entry showed 2024-11-03 21:47:31 +08:00
f65aca556d fix: typo in ref="noreferrer" (#489)
Some checks failed
Deploy Hugo site to Pages / build (push) Has been cancelled
Deploy Hugo site to Pages / deploy (push) Has been cancelled
2024-11-01 10:12:14 +00:00
4 changed files with 27 additions and 20 deletions

View File

@ -1,5 +1,5 @@
document.addEventListener("DOMContentLoaded", function () { document.addEventListener("DOMContentLoaded", function () {
scrollToActiveItem(); restoreSidebarPosition();
enableCollapsibles(); enableCollapsibles();
}); });
@ -16,21 +16,28 @@ function enableCollapsibles() {
}); });
} }
function scrollToActiveItem() { function saveSidebarPosition() {
const sidebarScrollbar = document.querySelector("aside.sidebar-container > .hextra-scrollbar"); const sidebarScrollbar = document.querySelector("aside.sidebar-container > .hextra-scrollbar");
const activeItems = document.querySelectorAll(".sidebar-active-item"); if (sidebarScrollbar) {
const visibleActiveItem = Array.from(activeItems).find(function (activeItem) { const scrollPosition = sidebarScrollbar.scrollTop;
return activeItem.getBoundingClientRect().height > 0; sessionStorage.setItem('sidebarScrollPosition', scrollPosition);
});
if (!visibleActiveItem) {
return;
} }
const yOffset = visibleActiveItem.clientHeight;
const yDistance = visibleActiveItem.getBoundingClientRect().top - sidebarScrollbar.getBoundingClientRect().top;
sidebarScrollbar.scrollTo({
behavior: "instant",
top: yDistance - yOffset
});
} }
function restoreSidebarPosition() {
const sidebarScrollbar = document.querySelector("aside.sidebar-container > .hextra-scrollbar");
if (sidebarScrollbar) {
const savedPosition = sessionStorage.getItem('sidebarScrollPosition');
if (savedPosition !== null) {
sidebarScrollbar.scrollTo({
top: parseInt(savedPosition),
behavior: 'instant'
});
}
sidebarScrollbar.addEventListener('scroll', function() {
saveSidebarPosition();
});
}
}

View File

@ -42,7 +42,7 @@
{{/* Display icon menu item */}} {{/* Display icon menu item */}}
{{- if .Params.icon -}} {{- if .Params.icon -}}
{{- $rel := cond (eq .Params.icon "mastodon") "noreferer me" "noreferer" }} {{- $rel := cond (eq .Params.icon "mastodon") "noreferrer me" "noreferrer" }}
<a class="hx-p-2 hx-text-current" {{ if $external }}target="_blank" rel="{{ $rel }}"{{ end }} href="{{ $link }}" title="{{ or (T .Identifier) .Name | safeHTML }}"> <a class="hx-p-2 hx-text-current" {{ if $external }}target="_blank" rel="{{ $rel }}"{{ end }} href="{{ $link }}" title="{{ or (T .Identifier) .Name | safeHTML }}">
{{- partial "utils/icon.html" (dict "name" .Params.icon "attributes" "height=24") -}} {{- partial "utils/icon.html" (dict "name" .Params.icon "attributes" "height=24") -}}
<span class="hx-sr-only">{{ or (T .Identifier) .Name | safeHTML }}</span> <span class="hx-sr-only">{{ or (T .Identifier) .Name | safeHTML }}</span>
@ -53,7 +53,7 @@
<a <a
title="{{ or (T .Identifier) .Name | safeHTML }}" title="{{ or (T .Identifier) .Name | safeHTML }}"
href="{{ $link }}" href="{{ $link }}"
{{ if $external }}target="_blank" rel="noreferer"{{ end }} {{ if $external }}target="_blank" rel="noreferrer"{{ end }}
class="hx-text-sm contrast-more:hx-text-gray-700 contrast-more:dark:hx-text-gray-100 hx-relative -hx-ml-2 hx-hidden hx-whitespace-nowrap hx-p-2 md:hx-inline-block {{ $activeClass }}" class="hx-text-sm contrast-more:hx-text-gray-700 contrast-more:dark:hx-text-gray-100 hx-relative -hx-ml-2 hx-hidden hx-whitespace-nowrap hx-p-2 md:hx-inline-block {{ $activeClass }}"
> >
<span class="hx-text-center">{{ or (T .Identifier) .Name | safeHTML }}</span> <span class="hx-text-center">{{ or (T .Identifier) .Name | safeHTML }}</span>

View File

@ -160,7 +160,7 @@
hx-text-gray-500 hover:hx-bg-gray-100 hover:hx-text-gray-900 contrast-more:hx-border contrast-more:hx-border-transparent contrast-more:hx-text-gray-900 contrast-more:hover:hx-border-gray-900 dark:hx-text-neutral-400 dark:hover:hx-bg-primary-100/5 dark:hover:hx-text-gray-50 contrast-more:dark:hx-text-gray-50 contrast-more:dark:hover:hx-border-gray-50 hx-text-gray-500 hover:hx-bg-gray-100 hover:hx-text-gray-900 contrast-more:hx-border contrast-more:hx-border-transparent contrast-more:hx-text-gray-900 contrast-more:hover:hx-border-gray-900 dark:hx-text-neutral-400 dark:hover:hx-bg-primary-100/5 dark:hover:hx-text-gray-50 contrast-more:dark:hx-text-gray-50 contrast-more:dark:hover:hx-border-gray-50
{{- end -}}" {{- end -}}"
href="{{ .link }}" href="{{ .link }}"
{{ if $external }}target="_blank" rel="noreferer"{{ end }} {{ if $external }}target="_blank" rel="noreferrer"{{ end }}
> >
{{- .title -}} {{- .title -}}
{{- with .context }} {{- with .context }}

View File

@ -38,7 +38,7 @@
{{- $editURL = urls.JoinPath $editURL $sourceDir $path -}} {{- $editURL = urls.JoinPath $editURL $sourceDir $path -}}
{{- end -}} {{- end -}}
{{- end -}} {{- end -}}
<a class="hx-text-xs hx-font-medium hx-text-gray-500 hover:hx-text-gray-900 dark:hx-text-gray-400 dark:hover:hx-text-gray-100 contrast-more:hx-text-gray-800 contrast-more:dark:hx-text-gray-50" href="{{ $editURL }}" target="_blank" rel="noreferer">{{ $editThisPage }}</a> <a class="hx-text-xs hx-font-medium hx-text-gray-500 hover:hx-text-gray-900 dark:hx-text-gray-400 dark:hover:hx-text-gray-100 contrast-more:hx-text-gray-800 contrast-more:dark:hx-text-gray-50" href="{{ $editURL }}" target="_blank" rel="noreferrer">{{ $editThisPage }}</a>
{{- end -}} {{- end -}}
{{/* Scroll To Top */}} {{/* Scroll To Top */}}
<button aria-hidden="true" id="backToTop" onClick="scrollUp();" class="hx-transition-all hx-duration-75 hx-opacity-0 hx-text-xs hx-font-medium hx-text-gray-500 hover:hx-text-gray-900 dark:hx-text-gray-400 dark:hover:hx-text-gray-100 contrast-more:hx-text-gray-800 contrast-more:dark:hx-text-gray-50"> <button aria-hidden="true" id="backToTop" onClick="scrollUp();" class="hx-transition-all hx-duration-75 hx-opacity-0 hx-text-xs hx-font-medium hx-text-gray-500 hover:hx-text-gray-900 dark:hx-text-gray-400 dark:hover:hx-text-gray-100 contrast-more:hx-text-gray-800 contrast-more:dark:hx-text-gray-50">