Files
FixIt/layouts/_partials/plugin/image.html
Cell 658f03d1e5 refactor(params)!: flatten [params.page] to [params], snake_case keys, more page-level params support (#805)
* refactor(params)!: snake_case config + eliminate params.page + use .Param

BREAKING CHANGE: All params keys renamed from camelCase to snake_case,
[params.page] section eliminated (moved to [params] level), and users
must update their hugo.toml and front matter accordingly.

Key changes:
- All camelCase config keys → snake_case (e.g., defaultTheme → default_theme)
- [params.page] flat keys and sub-sections moved to [params] level
- Removed function/params.html (manual merge), replaced with Hugo .Param
- New function/param.html partial for page-level section params with
  shorthand boolean support and site defaults merging
- New function/camel-case.html for string conversion
- snake2camel.html renamed to camel-case-keys.html
- New function/get-cover.html for cover image resolution
- Deprecation warnings in detection-deprecated.html for old config keys
- Front matter only params (subtitle, featured_image, password, repost,
  weight, message) use .Params.xxx instead of .Param
- Page-level sections use param.html partial
- Simplified patch.html (siteTime only) and init/index.html

Refs: camel-case-keys.html#29 (planned v1.0 breaking change)

* refactor(params)!: move params.link to page-level, simplify link guard

- Move [params.link] and [params.link.guard] to page-level section
- link.html: .Page optional, use param.html when available for
  page-level override, fall back to site config without .Page
- Remove $guardConfig variable, use $config.guard directly
- Remove unnecessary .Page from callers that don't need page override
- friends.html: use param.html for link guard instead of link_guard

* refactor(params)!: move image/codeblock/json_viewer/filetree to page-level

- Move [params.image], [params.codeblock], [params.json_viewer],
  [params.filetree] to page-level sub-sections
- Templates use param.html for merged config (page override + site defaults)
- image.html: .Page optional, falls back to site config without .Page
- Add v1- prefix to all deprecation warnidf IDs
- Fix camelCase key access in image.html (blackList, cacheRemote)
- Fix Hugo-lowered camelCase keys in code-block-wrapper.html
- Add deprecation warnings for codeblock camelCase Markdown attributes
- Add deprecation warnings for file-tree camelCase Markdown attributes
- Update render-codeblock-toggle.html for snake_case attribute names

* style: standardize @param comment style across all HTML templates

- PascalCase types: {string} → {String}, {boolean} → {Boolean},
  {int} → {Int}, {map} → {Map}, {array} → {Array}
- Add missing ` - ` separator between param name and description
- Remove extra alignment spaces between type and param name

* refactor(params)!: move params.mermaid to page-level, extract gen/ templates

- Move [params.mermaid] to page-level sub-sections
- Mermaid config injected into window.config (per-page override support)
- mermaid.ts reads config from window.config.mermaid instead of parameter
- Create _partials/gen/ directory for JS content generators
- Move mermaid-bootstrap.html from plugin/ to gen/
- Extract window.config JS generation into gen/config.html
- mermaid.html uses param.html for wrapper config

* refactor(params)!: consolidate link_to_* into params.post_link section

- Move link_to_markdown/source/edit/report/vscode into [params.post_link]
- Rename keys: markdown, source, edit, report (bool), editor (string)
- editor defaults to "vscode", supports "trae" etc. via protocol template
- footer.html uses .Param "post_link" for all link toggles
- Remove link_to_* from deprecated keys list

* fix: add fallback for deprecated camelCase attributes and expand deprecation warnings

- render-codeblock-file-tree.html: folderSlash attribute fallback
- render-codeblock-toggle.html: lineNosToggler/lineWrapToggler fallback + warnings
- code-block-wrapper.html: maxShownLines/wrapperClass fallback
- detection-deprecated.html: add nested key warnings for 13 sections
  (header, breadcrumb, navigation, watermark, busuanzi, image, mermaid,
  codeblock, filetree, math.katex, math.mathjax.options, post_summary, footer)
- detection-deprecated.html: add link_guard front matter deprecation warning

* fix(mermaid): fix rendering in hidden tab panels and neutral layer scheduling

- isRenderContextActive: check tab-panel visibility via getBoundingClientRect
  instead of panel.hidden (tab-container uses slot-based hiding, not hidden attr)
- bindTabContainerChanged: render neutral layers when switching tabs so
  print/fallback scenarios work correctly
2026-07-01 22:27:08 +08:00

124 lines
5.8 KiB
HTML

{{- /*
Image resource plugin.
Handles page resources, global resources, and remote images.
Supports optimisation, srcset generation, black list filtering, and remote caching.
Pass .Page when the caller needs page-level config override (e.g., content images).
Omit .Page for decorative/site-level images (e.g., logos, avatars, badges).
@param {String} .Src - Image path (page resource, global resource, or remote URL)
@param {Object} [.Resources] - Page resources (.Resources), required for page resources
@param {Array} [.OptimConfig] - srcset processing config, e.g.:
slice (dict "Process" "resize 800x webp" "descriptor" "800w")
See https://gohugo.io/content-management/image-processing/
@param {String} [.Alt] - Alt text
@param {String} [.Title] - Title attribute
@param {String} [.Caption] - Caption for lightgallery
@param {Int} [.Width] - Intrinsic width in pixels
@param {Int} [.Height] - Intrinsic height in pixels
@param {String} [.Loading] - "eager" or "lazy" (default: "lazy")
@param {String} [.Class] - CSS classes
@param {String} [.Sizes] - srcset sizes attribute
@param {Array} [.Matches] - Resource match names, e.g. ["featured-image-preview", "featured-image"]
@param {Boolean} [.Linked] - Wrap in lightgallery link
@param {Object} [.Rel] - rel attribute
@param {String} [.Decoding] - decoding attribute
@param {String} [.Referrerpolicy] - referrerpolicy attribute
@param {Boolean} [.Optimise] - Override site param to enable optimisation
@param {Boolean} [.CacheRemote] - Override site param to enable remote caching
@param {Array} [.BlackList] - Override site param black list
@param {Object} [.Page] - Page context for page-level image config override
@example
{{- dict "Src" "cover.jpg" "Resources" .Resources | partial "plugin/image.html" -}}
{{- dict "Src" "logo.png" "Class" "logo" "Width" 32 "Height" 32 | partial "plugin/image.html" -}}
Thanks @HEIGE-PCloud for the original code in the DoIt theme.
*/ -}}
{{- $config := partial "function/camel-case-keys.html" site.Params.image -}}
{{- with .Page -}}
{{- $config = dict "Page" . "Key" "image" "ToCamel" true | partial "function/param.html" -}}
{{- end -}}
{{- $Resources := .Resources | default page.Resources -}}
{{- $isInline := strings.HasPrefix .Src "data:image" -}}
{{- $isRemote := urls.Parse .Src | partial "function/is-url-remote.html" -}}
{{- $resource := dict -}}
{{- /* Get local image resource */ -}}
{{- if not $isRemote | and (not $isInline) -}}
{{- /* Try to get resource by matched names */ -}}
{{- $matchNames := .Matches | default (slice (strings.TrimPrefix "./" (urls.Parse .Src).Path)) -}}
{{- range $matchNames -}}
{{- $resource = $Resources.GetMatch . -}}
{{- if $resource -}}{{- break -}}{{- end -}}
{{- end -}}
{{- /* Try to get resource from page or global resources */ -}}
{{- $resource = $resource | default ($Resources.Get .Src) | default (resources.Get .Src) -}}
{{- end -}}
{{- /* Check if the image is blocked from optimisation */ -}}
{{- $blackList := .BlackList | default $config.blackList | default slice -}}
{{- $isBlocked := false -}}
{{- $regex := "" -}}
{{- $disableImageTypes := slice "svg" "gif" "avif" -}}
{{- with $blackList -}}
{{- $regex = replace (delimit . "|") "." "\\." -}}
{{- $regex = replace $regex "*" ".*" -}}
{{- $isBlocked = gt (findRE $regex $.Src | len) 0 -}}
{{- end -}}
{{- /* Get remote image resource (skip if blocked by black_list) */ -}}
{{- $cacheRemote := .CacheRemote | default $config.cacheRemote | default false -}}
{{- if not $resource | and $cacheRemote | and (not $isBlocked) -}}
{{- with partial "function/get-remote-image.html" (dict "Src" .Src) -}}
{{- $resource = . -}}
{{- end -}}
{{- end -}}
{{- /* raster graphics */ -}}
{{- $rasterTypes := slice "svg" "avif" -}}
{{- $isRaster := false -}}
{{- if $resource -}}
{{- if $regex | and (not $isBlocked) -}}
{{- $isBlocked = gt (findRE $regex $resource.Name | len) 0 -}}
{{- end -}}
{{- if not $isBlocked -}}
{{- $isBlocked = in $disableImageTypes $resource.MediaType.SubType -}}
{{- end -}}
{{- $isRaster = in $rasterTypes $resource.MediaType.SubType -}}
{{- end -}}
{{- /* Optimise image and generate srcset processing */ -}}
{{- $optim := .OptimConfig -}}
{{- $optimise := .Optimise | default $config.optimise | default false -}}
{{- $srcset := "" -}}
{{- if $optim | and $resource | and $optimise | and (not $isBlocked) -}}
{{ $srcsetSlice := slice -}}
{{- range $optim -}}
{{- if .Process -}}
{{- $processed := $resource.Process .Process -}}
{{- $srcsetSlice = $srcsetSlice | append (printf "%s %s" $processed.RelPermalink .descriptor) -}}
{{- end -}}
{{- end -}}
{{- $srcset = delimit $srcsetSlice ", " -}}
{{- end -}}
{{- $src := $resource.RelPermalink | default .Src -}}
{{- $alt := .Alt | default $src -}}
{{- $caption := .Caption | default $alt -}}
{{- $height := .Height -}}
{{- $width := .Width -}}
{{- if not $isRaster -}}
{{- $height = $height | default $resource.Height | default "" -}}
{{- $width = $width | default $resource.Width | default "" -}}
{{- end -}}
{{- if .Linked -}}
<a class="lightgallery" target="_blank" href="{{ $src }}" title="{{ .Title | default $alt }}" data-thumbnail="{{ $src }}"{{ with $caption }} data-sub-html="<h2>{{ . }}</h2>{{ with $.Title }}<p>{{ . }}</p>{{ end }}"{{ end }}{{ with .Rel }} rel="{{ . }}"{{ end }}>
{{- end -}}
<img {{- with .Class }} class="{{ . }}"{{ end }}{{ with .Loading }} loading="{{ . }}"{{ end }} {{ printf "src='%v'" $src | safeHTMLAttr }}{{ with $srcset }} srcset="{{ . }}"{{ end }}{{ with .Sizes }} sizes="{{ . }}"{{ end }}{{ with $alt }} alt="{{ . }}"{{ end }}{{ with $height }} height="{{ . }}"{{ end }}{{ with $width }} width="{{ . }}"{{ end }}{{ with .Decoding }} decoding="{{ . }}"{{ end }}{{ with .Referrerpolicy }} referrerpolicy="{{ . }}"{{ end }}>
{{- if .Linked -}}
</a>
{{- end -}}