fukunee/Hugo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor footer layout and styling for improved structure

Browse Source 
Reorganize footer HTML with consistent spacing, refined typography, and
separated copyright/powered-by section. Add footer column layout CSS
with
constrained brand column width and padding adjustments.
This commit is contained in:
fukunee
2026-05-26 12:55:45 +08:00
parent 8fb8c9e852
commit 36d28cb013
2 changed files with 109 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/custom.css
+13
View File
@@ -172,3 +172,16 @@ figcaption.post-caption {
grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-columns: repeat(3, minmax(0, 1fr));
} }
} }
/* Footer brand column — extra breathing room */
.footer-brand .hx\:whitespace-pre-line {
max-width: 18rem;
}
.footer-nav {
padding-left: 1rem;
padding-right: 1rem;
}
.footer-links {
padding-left: 2rem;
}
.footer-roadmap { padding: 1rem; }
layouts/_partials/footer.html
+96 -51
View File
@@ -1,61 +1,106 @@
{{- $enableFooterSwitches := .Store.Get "enableFooterSwitches" | default false -}} {{- $enableFooterSwitches := .Store.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) -}} -}} {{- $footerSwitchesVisible := and $enableFooterSwitches (or
{{- $copyrightSectionVisible := or (.Site.Params.footer.displayPoweredBy | default true) .Site.Params.footer.displayCopyright -}} hugo.IsMultilingual $displayThemeToggle) -}} {{- $copyrightSectionVisible := or
{{- $copyright := (T "copyright") | default "© 2024 Hextra." -}} (.Site.Params.footer.displayPoweredBy | default true)
{{- $poweredBy := (T "poweredBy") | default "Powered by Hextra" -}} .Site.Params.footer.displayCopyright -}} {{- $copyright := (T "copyright") |
{{- $columns := .Site.Params.footer.columns -}} default "© 2024 Hextra." -}} {{- $poweredBy := (T "poweredBy") | default
<footer class="hextra-footer hx:bg-gray-100 hx:pb-[env(safe-area-inset-bottom)] hx:dark:bg-neutral-900 hx:print:bg-transparent"> "Powered by Hextra" -}} {{- $columns := .Site.Params.footer.columns -}}
{{- if $footerSwitchesVisible -}} <footer
<div class="hx:mx-auto hx:flex hx:gap-2 hx:py-2 hx:px-4 hextra-max-footer-width"> class="hextra-footer hx:bg-gray-100 hx:pb-[env(safe-area-inset-bottom)] hx:dark:bg-neutral-900 hx:print:bg-transparent"
{{- partial "language-switch.html" (dict "context" .) -}} >
{{- with $displayThemeToggle }}{{ partial "theme-toggle.html" }}{{ end -}} {{- if $footerSwitchesVisible -}}
<div
class="hx:mx-auto hx:flex hx:gap-2 hx:py-2 hx:px-4 hextra-max-footer-width"
>
{{- partial "language-switch.html" (dict "context" .) -}} {{- with
$displayThemeToggle }}{{ partial "theme-toggle.html" }}{{ end -}}
</div> </div>
{{- if or hugo.IsMultilingual $displayThemeToggle -}} {{- if or hugo.IsMultilingual $displayThemeToggle -}}
<hr class="hx:border-gray-200 hx:dark:border-neutral-800" /> <hr class="hx:border-gray-200 hx:dark:border-neutral-800" />
{{- end -}} {{- end -}} {{- end -}} {{- if $columns -}}
{{- end -}} <div
{{- if $columns -}} class="hextra-max-footer-width hx:mx-auto hx:grid hx:grid-cols-1 footer-grid hx:gap-8 hx:py-12 hx:px-6 hx:border-t hx:border-gray-200 hx:dark:border-neutral-800"
<div class="hextra-max-footer-width hx:mx-auto hx:grid hx:grid-cols-1 footer-grid hx:gap-8 hx:py-12 hx:px-6 hx:text-gray-600 hx:dark:text-gray-400"> >
{{- range $columns -}} {{- range $columns -}}
<div> <div class="footer-roadmap">
<div class="hx:font-semibold hx:text-gray-800 hx:dark:text-gray-200 hx:mb-3">{{ .title }}</div> <div
{{- with .desc -}} class="hx:font-medium hx:text-gray-900 hx:dark:text-gray-100 hx:mb-3"
<div class="hx:text-sm hx:leading-relaxed hx:whitespace-pre-line">{{ . }}</div> >
{{- end -}} {{ .title }}
{{- with .links -}} </div>
{{- with .desc -}}
<div
class="hx:text-sm hx:leading-relaxed hx:text-gray-600 hx:dark:text-gray-400 hx:whitespace-pre-line"
>
{{ . }}
</div>
{{- end -}} {{- with .links -}}
<ul class="hx:space-y-2"> <ul class="hx:space-y-2">
{{- range . -}} {{- range . -}} {{- $isExternal := strings.HasPrefix .url "http"
{{- $isExternal := strings.HasPrefix .url "http" -}} -}}
<li><a href="{{ .url }}" class="hx:text-sm hx:hover:text-gray-900 hx:dark:hover:text-gray-100 hx:transition-colors"{{ if $isExternal }} target="_blank" rel="noopener noreferrer"{{ end }}>{{ .name }}</a></li> <li>
{{- end -}} <a
href="{{ .url }}"
class="hx:text-sm hx:text-gray-600 hx:hover:text-gray-900 hx:dark:text-gray-400 hx:dark:hover:text-gray-100 hx:transition-colors"
{{
if
$isExternal
}}
target="_blank"
rel="noopener noreferrer"
{{
end
}}
>{{ .name }}</a
>
</li>
{{- end -}}
</ul> </ul>
{{- end -}} {{- end -}}
</div> </div>
{{- end -}} {{- end -}}
</div> </div>
{{- end -}} {{- end -}} {{- if $copyrightSectionVisible -}}
<div class="hextra-custom-footer hextra-max-footer-width hx:mx-auto hx:pl-[max(env(safe-area-inset-left),1.5rem)] hx:pr-[max(env(safe-area-inset-right),1.5rem)] hx:text-gray-600 hx:dark:text-gray-400"> <div
{{- partial "custom/footer.html" (dict "context" . "switchesVisible" $footerSwitchesVisible "copyrightVisible" $copyrightSectionVisible) -}} class="hextra-max-footer-width hx:mx-auto hx:border-t hx:border-gray-200 hx:dark:border-neutral-800 hx:flex hx:flex-col hx:sm:flex-row hx:justify-between hx:items-start hx:sm:items-center hx:gap-2 hx:py-4 hx:px-6 hx:text-xs hx:text-gray-500 hx:dark:text-gray-500"
</div> >
{{- if $copyrightSectionVisible -}} <div class="hx:flex hx:flex-wrap hx:gap-x-2 hx:gap-y-1 hx:items-center">
<div class="hextra-max-footer-width 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 hx:dark:text-gray-400 hx:md:justify-start"> {{- if .Site.Params.footer.displayCopyright }}<span
<div class="hx:flex hx:w-full hx:flex-col hx:items-center hx:sm:items-start"> >{{ $copyright | markdownify }}</span
{{- if (.Site.Params.footer.displayPoweredBy | default true) }}<div class="hx:font-semibold">{{ template "theme-credit" $poweredBy }}</div>{{- end -}} >{{- end -}} {{- if and .Site.Params.footer.displayCopyright
{{- if .Site.Params.footer.displayCopyright }}<div class="hx:mt-6 hx:text-xs">{{ $copyright | markdownify }}</div>{{- end -}} (.Site.Params.footer.displayPoweredBy | default true) }}<span
{{- with .Site.Params.footer.icp }}<div class="hx:mt-2 hx:text-xs"><a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener noreferrer" style="color:inherit;text-decoration:none">{{ . }}</a></div>{{- end -}} class="hx:text-gray-300 hx:dark:text-neutral-700"
{{- with .Site.Params.footer.gongan }}<div class="hx:mt-2 hx:text-xs"><a href="https://beian.mps.gov.cn/" target="_blank" rel="noopener noreferrer" style="color:inherit;text-decoration:none">{{ . }}</a></div>{{- end -}} >|</span
</div> >{{- end -}} {{- if (.Site.Params.footer.displayPoweredBy | default
true) }}<span>{{ template "theme-credit" $poweredBy }}</span>{{- end
-}}
</div>
<div class="hx:flex hx:flex-wrap hx:gap-x-3 hx:gap-y-1">
{{- with .Site.Params.footer.icp }}<a
href="https://beian.miit.gov.cn/"
target="_blank"
rel="noopener noreferrer"
class="hx:hover:text-gray-700 hx:dark:hover:text-gray-300 hx:transition-colors"
>{{ . }}</a
>{{- end -}}/ {{- with .Site.Params.footer.gongan }}<a
href="https://beian.mps.gov.cn/"
target="_blank"
rel="noopener noreferrer"
class="hx:hover:text-gray-700 hx:dark:hover:text-gray-300 hx:transition-colors"
>{{ . }}</a
>{{- end -}}
</div>
</div> </div>
{{- end -}} {{- end -}}
</footer> </footer>
{{- define "theme-credit" -}} {{- define "theme-credit" -}}
<a class="hx:flex hx:text-sm hx:items-center hx:gap-1 hx:text-current" target="_blank" rel="noopener noreferrer" title="Hextra GitHub Homepage" href="https://github.com/imfing/hextra"> <a
<span> class="hx:hover:text-gray-700 hx:dark:hover:text-gray-300 hx:transition-colors"
{{- . | markdownify -}} target="_blank"
{{- if strings.Contains . "Hextra" -}} rel="noopener noreferrer"
{{- partial "utils/icon.html" (dict "name" "hextra" "attributes" `height=1em class="hx:inline-block hx:ltr:ml-1 hx:rtl:mr-1 hx:align-[-2.5px]"`) -}} title="Hextra GitHub Homepage"
{{- end -}} href="https://github.com/imfing/hextra"
</span> >{{ . | markdownify }}</a
</a> >
{{- end -}} {{- end -}}