Compare commits

..

3 Commits

Author SHA1 Message Date
db1706c0ed Merge 0c2c148f5e into bc778ee243 2024-12-17 10:21:33 +00:00
0c2c148f5e Merge branch 'main' into custom-footer 2024-12-17 10:21:27 +00:00
aea9235285 Add support for custom footer 2024-12-16 17:58:47 +00:00
7 changed files with 30 additions and 158 deletions

View File

@ -44,129 +44,6 @@ The primary color of the theme can be customized by setting the `--primary-hue`,
} }
``` ```
### Further Theme Customization
The theme can be further customized by overriding the default styles via the exposed css classes. An example for customizing the footer element:
```css {filename="assets/css/custom.css"}
.hextra-footer {
/* Styles will be applied to the footer element */
}
.hextra-footer:is(html[class~="dark"] *) {
/* Styles will be applied to the footer element in dark mode */
}
```
The following classes can be used to customize various parts of the theme.
#### General
- `hextra-scrollbar` - The scrollbar element
- `content` - Page content container
#### Shortcodes
##### Badge
- `hextra-badge` - The badge element
##### Card
- `hextra-card` - The card element
- `hextra-card-image` - The card image element
- `hextra-card-icon` - The card icon element
- `hextra-card-subtitle` - The card subtitle element
##### Cards
- `hextra-cards` - The cards grid container
##### Jupyter Notebook
- `hextra-jupyter-code-cell` - The Jupyter code cell container
- `hextra-jupyter-code-cell-outputs-container` - The Jupyter code cell outputs container
- `hextra-jupyter-code-cell-outputs` - The Jupyter code cell output div element
##### PDF
- `hextra-pdf` - The PDF container element
##### Steps
- `steps` - The steps container
##### Tabs
- `hextra-tabs-panel` - The tabs panel container
- `hextra-tabs-toggle` - The tabs toggle button
##### Filetree
- `hextra-filetree` - The filetree container
##### Folder
- `hextra-filetree-folder` - The filetree folder container
#### Navbar
- `nav-container` - The navbar container
- `nav-container-blur` - The navbar container in blur element
- `hamburger-menu` - The hamburger menu button
#### Footer
- `hextra-footer` - The footer element
- `hextra-custom-footer` - The custom footer section container
#### Search
- `search-wrapper` - The search wrapper container
- `search-input` - The search input element
- `search-results` - The search results list container
#### Table of Contents
- `hextra-toc` - The table of contents container
#### Sidebar
- `mobile-menu-overlay` - The overlay element for the mobile menu
- `sidebar-container` - The sidebar container
- `sidebar-active-item` - The active item in the sidebar
#### Language Switcher
- `language-switcher` - The language switcher button
- `language-options` - The language options container
#### Theme Toggle
- `theme-toggle` - The theme toggle button
#### Cody Copy Button
- `hextra-code-copy-btn-container` - The code copy button container
- `hextra-code-copy-btn` - The code copy button
#### Code Block
- `hextra-code-block` - The code block container
#### Feature Card
- `hextra-feature-card` - The feature card link element
#### Feature Grid
- `hextra-feature-grid` - The feature grid container
#### Breadcrumbs
No specific class is available for breadcrumbs.
### Syntax Highlighting ### Syntax Highlighting
List of available syntax highlighting themes are available at [Chroma Styles Gallery](https://xyproto.github.io/splash/docs/all.html). The stylesheet can be generated using the command: List of available syntax highlighting themes are available at [Chroma Styles Gallery](https://xyproto.github.io/splash/docs/all.html). The stylesheet can be generated using the command:
@ -185,20 +62,26 @@ You may add custom scripts to the end of the head for every page by adding the f
layouts/partials/custom/head-end.html layouts/partials/custom/head-end.html
``` ```
## Custom Footer Section ## Custom Footer
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. You can replace the footer completely - excluding the language and theme buttons - by creating a file `layouts/partials/custom/footer.html` in your site __and__ setting `custom: true` in the `footer` section of your `hugo.yaml`:
```html {filename="layouts/partials/custom/footer.html"} ```yaml {filename="hugo.yaml"}
<!-- Your footer element here --> footer:
enable: true
custom: true
# These settings are ignored by the custom footer
displayCopyright: false
displayPoweredBy: true
# This setting is respected by the custom footer
with: "wide"
``` ```
Available variables in the footer section are: Variables available in the footer are:
- `.switchesVisible`: `true` if the language/theme button(s) are visible above the footer along with a horizontal separator. - `{{ .footerButtonColor }}` - The color/background color of a footer button
- `.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._ _Note: The custom footer inherits the default footer background color and text color._
## Custom Layouts ## Custom Layouts

View File

@ -95,7 +95,7 @@ Open source projects powered by Hextra
>}} >}}
{{< card {{< card
link="https://github.com/remysheppard/lutheran-confessions" link="https://lutheranconfessions.org/"
title="LutheranConfessions" title="LutheranConfessions"
image="https://github.com/imfing/hextra/assets/5097752/ad6625e4-88cd-4cad-b102-5399997d0359" image="https://github.com/imfing/hextra/assets/5097752/ad6625e4-88cd-4cad-b102-5399997d0359"
imageStyle="object-fit:cover; aspect-ratio:16/9;" imageStyle="object-fit:cover; aspect-ratio:16/9;"

View File

@ -173,4 +173,3 @@ params:
# emitMetadata: 0 # emitMetadata: 0
# inputPosition: top # inputPosition: top
# lang: en # lang: en
# theme: noborder_dark

View File

@ -228,7 +228,6 @@
"hextra-code-block", "hextra-code-block",
"hextra-code-copy-btn", "hextra-code-copy-btn",
"hextra-code-copy-btn-container", "hextra-code-copy-btn-container",
"hextra-custom-footer",
"hextra-feature-card", "hextra-feature-card",
"hextra-feature-grid", "hextra-feature-grid",
"hextra-filetree", "hextra-filetree",

View File

@ -8,17 +8,8 @@
* This solution was created with reference to: * This solution was created with reference to:
* https://github.com/giscus/giscus/issues/336#issuecomment-1214366281 * https://github.com/giscus/giscus/issues/336#issuecomment-1214366281
*/ */
function getHugoTheme() {
return localStorage.getItem("color-theme");
}
function getGiscusTheme() { function getGiscusTheme() {
let giscusTheme = "{{ (string .theme) | default `light` }}"; return localStorage.getItem("color-theme");
if(getHugoTheme() == 'light') {
return giscusTheme.replace('dark', 'light');
} else {
return giscusTheme.replace('light', 'dark');
}
} }
function setGiscusTheme() { function setGiscusTheme() {

View File

@ -1,7 +1,5 @@
{{- $enableFooterSwitches := .Scratch.Get "enableFooterSwitches" | default false -}} {{- $enableFooterSwitches := .Scratch.Get "enableFooterSwitches" | default false -}}
{{- $displayThemeToggle := site.Params.theme.displayToggle | default true -}} {{- $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." -}} {{- $copyright := (T "copyright") | default "© 2024 Hextra." -}}
{{- $poweredBy := (T "poweredBy") | default "Powered by 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"> <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 }}"> <div class="hx-mx-auto hx-flex hx-gap-2 hx-py-2 hx-px-4 {{ $footerWidth }}">
{{- partial "language-switch.html" (dict "context" .) -}} {{- partial "language-switch.html" (dict "context" .) -}}
{{- with $displayThemeToggle }}{{ partial "theme-toggle.html" }}{{ end -}} {{- with $displayThemeToggle }}{{ partial "theme-toggle.html" }}{{ end -}}
@ -26,21 +24,23 @@
<hr class="dark:hx-border-neutral-800" /> <hr class="dark:hx-border-neutral-800" />
{{- end -}} {{- end -}}
{{- end -}} {{- end -}}
{{- if .Site.Params.footer.custom -}}
<div <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" class="{{ $footerWidth }} hx-pl-[max(env(safe-area-inset-left),0rem)] hx-pr-[max(env(safe-area-inset-right),0rem)] hx-text-gray-600 dark:hx-text-gray-400"
> >
{{- partial "custom/footer.html" (dict "context" . "switchesVisible" $footerSwitchesVisible "copyrightVisible" $copyrightSectionVisible) -}} {{ partial "custom/footer.html" (dict "context" . "footerButtonColor" "hx-rounded-md hx-transition-colors hover:hx-bg-gray-100 hover:hx-text-gray-900 dark:hover:hx-bg-primary-100/5 dark:hover:hx-text-gray-50" ) }}
</div> </div>
{{- if $copyrightSectionVisible -}} {{- else -}}
<div <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" 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"> <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.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.displayCopyright }}<div class="hx-mt-6 hx-text-xs">{{ $copyright | markdownify }}</div>{{ end }}
</div>
</div> </div>
{{- end -}} </div>
{{- end -}}
</footer> </footer>
{{- define "theme-credit" -}} {{- define "theme-credit" -}}