Files
fukunee 36d28cb013 Refactor footer layout and styling for improved structure
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.
2026-05-26 12:55:45 +08:00

107 lines
4.6 KiB
HTML

{{- $enableFooterSwitches := .Store.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" -}} {{- $columns := .Site.Params.footer.columns -}}
<footer
class="hextra-footer hx:bg-gray-100 hx:pb-[env(safe-area-inset-bottom)] hx:dark:bg-neutral-900 hx:print:bg-transparent"
>
{{- 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>
{{- if or hugo.IsMultilingual $displayThemeToggle -}}
<hr class="hx:border-gray-200 hx:dark:border-neutral-800" />
{{- end -}} {{- end -}} {{- if $columns -}}
<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:border-t hx:border-gray-200 hx:dark:border-neutral-800"
>
{{- range $columns -}}
<div class="footer-roadmap">
<div
class="hx:font-medium hx:text-gray-900 hx:dark:text-gray-100 hx:mb-3"
>
{{ .title }}
</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">
{{- range . -}} {{- $isExternal := strings.HasPrefix .url "http"
-}}
<li>
<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>
{{- end -}}
</div>
{{- end -}}
</div>
{{- end -}} {{- if $copyrightSectionVisible -}}
<div
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 class="hx:flex hx:flex-wrap hx:gap-x-2 hx:gap-y-1 hx:items-center">
{{- if .Site.Params.footer.displayCopyright }}<span
>{{ $copyright | markdownify }}</span
>{{- end -}} {{- if and .Site.Params.footer.displayCopyright
(.Site.Params.footer.displayPoweredBy | default true) }}<span
class="hx:text-gray-300 hx:dark:text-neutral-700"
>|</span
>{{- 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>
{{- end -}}
</footer>
{{- define "theme-credit" -}}
<a
class="hx:hover:text-gray-700 hx:dark:hover:text-gray-300 hx:transition-colors"
target="_blank"
rel="noopener noreferrer"
title="Hextra GitHub Homepage"
href="https://github.com/imfing/hextra"
>{{ . | markdownify }}</a
>
{{- end -}}