mirror of
https://github.com/imfing/hextra.git
synced 2025-07-06 01:18:12 -04:00
Compare commits
5 Commits
v0.9.1
...
f98e9c3394
Author | SHA1 | Date | |
---|---|---|---|
f98e9c3394 | |||
06eb8a66a1 | |||
081ad8b84f | |||
7593ef4ae4 | |||
b70d729283 |
@ -1,8 +1,43 @@
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
scrollToActiveItem();
|
||||
enableCollapsibles();
|
||||
initializeSidebar();
|
||||
});
|
||||
|
||||
function initializeSidebar() {
|
||||
const sidebarScrollbar = document.querySelector("aside.sidebar-container > .hextra-scrollbar");
|
||||
if (!sidebarScrollbar) return;
|
||||
|
||||
enableCollapsibles();
|
||||
restoreSidebarPosition(sidebarScrollbar);
|
||||
|
||||
const debouncedSave = debounce((position) => {
|
||||
saveSidebarPosition(position);
|
||||
}, 150);
|
||||
|
||||
sidebarScrollbar.addEventListener('scroll', function() {
|
||||
debouncedSave(this.scrollTop);
|
||||
});
|
||||
|
||||
document.querySelectorAll('a').forEach(link => {
|
||||
if (link.hostname === window.location.hostname) {
|
||||
link.addEventListener('click', function(e) {
|
||||
saveSidebarPosition(sidebarScrollbar.scrollTop);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function debounce(func, wait) {
|
||||
let timeout;
|
||||
return function executedFunction(...args) {
|
||||
const later = () => {
|
||||
clearTimeout(timeout);
|
||||
func(...args);
|
||||
};
|
||||
clearTimeout(timeout);
|
||||
timeout = setTimeout(later, wait);
|
||||
};
|
||||
}
|
||||
|
||||
function enableCollapsibles() {
|
||||
const buttons = document.querySelectorAll(".hextra-sidebar-collapsible-button");
|
||||
buttons.forEach(function (button) {
|
||||
@ -16,21 +51,16 @@ function enableCollapsibles() {
|
||||
});
|
||||
}
|
||||
|
||||
function scrollToActiveItem() {
|
||||
const sidebarScrollbar = document.querySelector("aside.sidebar-container > .hextra-scrollbar");
|
||||
const activeItems = document.querySelectorAll(".sidebar-active-item");
|
||||
const visibleActiveItem = Array.from(activeItems).find(function (activeItem) {
|
||||
return activeItem.getBoundingClientRect().height > 0;
|
||||
});
|
||||
|
||||
if (!visibleActiveItem) {
|
||||
return;
|
||||
function saveSidebarPosition(scrollPosition) {
|
||||
localStorage.setItem('sidebarScrollPosition', scrollPosition);
|
||||
}
|
||||
|
||||
const yOffset = visibleActiveItem.clientHeight;
|
||||
const yDistance = visibleActiveItem.getBoundingClientRect().top - sidebarScrollbar.getBoundingClientRect().top;
|
||||
sidebarScrollbar.scrollTo({
|
||||
behavior: "instant",
|
||||
top: yDistance - yOffset
|
||||
function restoreSidebarPosition(sidebarScrollbar) {
|
||||
const savedPosition = localStorage.getItem('sidebarScrollPosition');
|
||||
|
||||
if (savedPosition !== null) {
|
||||
requestAnimationFrame(() => {
|
||||
sidebarScrollbar.scrollTop = parseInt(savedPosition);
|
||||
});
|
||||
}
|
||||
}
|
@ -119,7 +119,6 @@ The following classes can be used to customize various parts of the theme.
|
||||
#### Footer
|
||||
|
||||
- `hextra-footer` - The footer element
|
||||
- `hextra-custom-footer` - The custom footer section container
|
||||
|
||||
#### Search
|
||||
|
||||
@ -185,21 +184,6 @@ You may add custom scripts to the end of the head for every page by adding the f
|
||||
layouts/partials/custom/head-end.html
|
||||
```
|
||||
|
||||
## Custom Footer Section
|
||||
|
||||
You can add a custom section the footer between the language/theme buttons and the "Copyright"/"Powered By" section by creating a file `layouts/partials/custom/footer.html` in your site.
|
||||
|
||||
```html {filename="layouts/partials/custom/footer.html"}
|
||||
<!-- Your footer element here -->
|
||||
```
|
||||
|
||||
Available variables in the footer section are:
|
||||
|
||||
- `.switchesVisible`: `true` if the language/theme button(s) are visible above the footer along with a horizontal separator.
|
||||
- `.copyrightVisible`: `true` if the "Copyright" and "Powered By" text are visible at the bottom of the footer.
|
||||
|
||||
_Note: The custom footer inherits the default footer background color text color and the `width` setting in `hugo.yaml#footer` section._
|
||||
|
||||
## Custom Layouts
|
||||
|
||||
The layouts of the theme can be overridden by creating a file with the same name in the `layouts` directory of your site.
|
||||
|
@ -173,4 +173,3 @@ params:
|
||||
# emitMetadata: 0
|
||||
# inputPosition: top
|
||||
# lang: en
|
||||
# theme: noborder_dark
|
||||
|
@ -228,7 +228,6 @@
|
||||
"hextra-code-block",
|
||||
"hextra-code-copy-btn",
|
||||
"hextra-code-copy-btn-container",
|
||||
"hextra-custom-footer",
|
||||
"hextra-feature-card",
|
||||
"hextra-feature-grid",
|
||||
"hextra-filetree",
|
||||
|
@ -8,17 +8,8 @@
|
||||
* This solution was created with reference to:
|
||||
* https://github.com/giscus/giscus/issues/336#issuecomment-1214366281
|
||||
*/
|
||||
function getHugoTheme() {
|
||||
return localStorage.getItem("color-theme");
|
||||
}
|
||||
|
||||
function getGiscusTheme() {
|
||||
let giscusTheme = "{{ (string .theme) | default `light` }}";
|
||||
if(getHugoTheme() == 'light') {
|
||||
return giscusTheme.replace('dark', 'light');
|
||||
} else {
|
||||
return giscusTheme.replace('light', 'dark');
|
||||
}
|
||||
return localStorage.getItem("color-theme");
|
||||
}
|
||||
|
||||
function setGiscusTheme() {
|
||||
|
@ -1,7 +1,5 @@
|
||||
{{- $enableFooterSwitches := .Scratch.Get "enableFooterSwitches" | default false -}}
|
||||
{{- $displayThemeToggle := site.Params.theme.displayToggle | default true -}}
|
||||
{{- $footerSwitchesVisible := and $enableFooterSwitches (or hugo.IsMultilingual $displayThemeToggle) -}}
|
||||
{{- $copyrightSectionVisible := or (.Site.Params.footer.displayPoweredBy | default true) .Site.Params.footer.displayCopyright -}}
|
||||
|
||||
{{- $copyright := (T "copyright") | default "© 2024 Hextra." -}}
|
||||
{{- $poweredBy := (T "poweredBy") | default "Powered by Hextra" -}}
|
||||
@ -17,7 +15,7 @@
|
||||
|
||||
|
||||
<footer class="hextra-footer hx-bg-gray-100 hx-pb-[env(safe-area-inset-bottom)] dark:hx-bg-neutral-900 print:hx-bg-transparent">
|
||||
{{- if $footerSwitchesVisible -}}
|
||||
{{- if and $enableFooterSwitches (or hugo.IsMultilingual $displayThemeToggle) -}}
|
||||
<div class="hx-mx-auto hx-flex hx-gap-2 hx-py-2 hx-px-4 {{ $footerWidth }}">
|
||||
{{- partial "language-switch.html" (dict "context" .) -}}
|
||||
{{- with $displayThemeToggle }}{{ partial "theme-toggle.html" }}{{ end -}}
|
||||
@ -26,21 +24,14 @@
|
||||
<hr class="dark:hx-border-neutral-800" />
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
<div
|
||||
class="hextra-custom-footer {{ $footerWidth }} hx-pl-[max(env(safe-area-inset-left),1.5rem)] hx-pr-[max(env(safe-area-inset-right),1.5rem)] hx-text-gray-600 dark:hx-text-gray-400"
|
||||
>
|
||||
{{- partial "custom/footer.html" (dict "context" . "switchesVisible" $footerSwitchesVisible "copyrightVisible" $copyrightSectionVisible) -}}
|
||||
</div>
|
||||
{{- if $copyrightSectionVisible -}}
|
||||
<div
|
||||
class="{{ $footerWidth }} hx-mx-auto hx-flex hx-justify-center hx-py-12 hx-pl-[max(env(safe-area-inset-left),1.5rem)] hx-pr-[max(env(safe-area-inset-right),1.5rem)] hx-text-gray-600 dark:hx-text-gray-400 md:hx-justify-start"
|
||||
>
|
||||
<div class="hx-flex hx-w-full hx-flex-col hx-items-center sm:hx-items-start">
|
||||
{{- if (.Site.Params.footer.displayPoweredBy | default true) }}<div class="hx-font-semibold">{{ template "theme-credit" $poweredBy }}</div>{{- end -}}
|
||||
{{- if .Site.Params.footer.displayCopyright }}<div class="hx-mt-6 hx-text-xs">{{ $copyright | markdownify }}</div>{{- end -}}
|
||||
{{- if (.Site.Params.footer.displayPoweredBy | default true) }}<div class="hx-font-semibold">{{ template "theme-credit" $poweredBy }}</div>{{ end }}
|
||||
{{- if .Site.Params.footer.displayCopyright }}<div class="hx-mt-6 hx-text-xs">{{ $copyright | markdownify }}</div>{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
{{- end -}}
|
||||
</footer>
|
||||
|
||||
{{- define "theme-credit" -}}
|
||||
|
Reference in New Issue
Block a user