blogs/hugo
1
0
Fork 0
mirror of https://github.com/gohugoio/hugo.git synced 2026-08-24 15:28:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

theme: Implement blockquote render hook

Browse Source 
Supports basic alert syntax:

> [!NOTE]
> Useful information that users should know, even when skimming content.

> [!TIP]
> Helpful advice for doing things better or more easily.

> [!IMPORTANT]
> Key information users need to know to achieve their goal.

> [!WARNING]
> Urgent info that needs immediate user attention to avoid problems.

> [!CAUTION]
> Advises about risks or negative outcomes of certain actions.
This commit is contained in:
Joe Mooring
2025-03-07 18:34:50 -08:00
committed by Joe Mooring
parent ddefbefaaf
commit bd46ef6265
4 changed files with 67 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
layouts/_default/_markup/render-blockquote.html
+33
View File
@@ -0,0 +1,33 @@
{{- if eq .Type "alert" }}
{{- $alerts := dict
"caution" (dict "color" "red" "icon" "exclamation-triangle")
"important" (dict "color" "blue" "icon" "exclamation-circle")
"note" (dict "color" "blue" "icon" "information-circle")
"tip" (dict "color" "green" "icon" "light-bulb")
"warning" (dict "color" "yellow" "icon" "exclamation-triangle")
}}
{{- $alertTypes := slice }}
{{- range $k, $_ := $alerts }}
{{- $alertTypes = $alertTypes | append $k }}
{{- end }}
{{- $alertTypes = $alertTypes | sort }}
{{- $alertType := strings.ToLower .AlertType }}
{{- if in $alertTypes $alertType }}
{{- partial "layouts/blocks/alert.html" (dict
"color" (or ((index $alerts $alertType).color) "blue")
"icon" (or ((index $alerts $alertType).icon) "information-circle")
"text" .Text
"title" .AlertTitle
"class" .Attributes.class
)
}}
{{- else }}
{{- errorf `Invalid blockquote alert type. Received %s. Expected one of %s (case-insensitive). See %s.` .AlertType (delimit $alertTypes ", " ", or ") .Page.String }}
{{- end }}
{{- else }}
<blockquote {{- with .Attributes.class }}class="{{ . }}"{{- end }}>
{{ .Text }}
</blockquote>
{{- end }}
layouts/partials/layouts/blocks/alert.html
+1 -1
View File
@@ -1,6 +1,6 @@
{{- $title := .title | default "" }}
{{- $color := .color | default "yellow" }}
{{- $icon := .icon | default "exclamation" }}
{{- $icon := .icon | default "exclamation-triangle" }}
{{- $text := .text | default "" }}
{{- $class := .class | default "mt-6 mb-8" }}
<div
layouts/partials/layouts/icons.html
+31 -14
View File
@@ -22,16 +22,6 @@
</symbol>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="icon--exclamation" viewBox="0 0 24 24">
<path
fill-rule="evenodd"
d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495ZM10 5a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 10 5Zm0 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
clip-rule="evenodd" />
</symbol>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="icon--copy" viewBox="0 0 24 24">
<path
@@ -45,9 +35,36 @@
</symbol>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="icon--github" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C6.477 2 2 6.463 2 11.97c0 4.404 2.865 8.14 6.839 9.458.5.092.682-.216.682-.48 0-.236-.008-.864-.013-1.695-2.782.602-3.369-1.337-3.369-1.337-.454-1.151-1.11-1.458-1.11-1.458-.908-.618.069-.606.069-.606 1.003.07 1.531 1.027 1.531 1.027.892 1.524 2.341 1.084 2.91.828.092-.643.35-1.083.636-1.332-2.22-.251-4.555-1.107-4.555-4.927 0-1.088.39-1.979 1.029-2.675-.103-.252-.446-1.266.098-2.638 0 0 .84-.268 2.75 1.022A9.607 9.607 0 0 1 12 6.82c.85.004 1.705.114 2.504.336 1.909-1.29 2.747-1.022 2.747-1.022.546 1.372.202 2.386.1 2.638.64.696 1.028 1.587 1.028 2.675 0 3.83-2.339 4.673-4.566 4.92.359.307.678.915.678 1.846 0 1.332-.012 2.407-.012 2.734 0 .267.18.577.688.48 3.97-1.32 6.833-5.054 6.833-9.458C22 6.463 17.522 2 12 2Z"></path>
</symbol>
<symbol id="icon--github" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C6.477 2 2 6.463 2 11.97c0 4.404 2.865 8.14 6.839 9.458.5.092.682-.216.682-.48 0-.236-.008-.864-.013-1.695-2.782.602-3.369-1.337-3.369-1.337-.454-1.151-1.11-1.458-1.11-1.458-.908-.618.069-.606.069-.606 1.003.07 1.531 1.027 1.531 1.027.892 1.524 2.341 1.084 2.91.828.092-.643.35-1.083.636-1.332-2.22-.251-4.555-1.107-4.555-4.927 0-1.088.39-1.979 1.029-2.675-.103-.252-.446-1.266.098-2.638 0 0 .84-.268 2.75 1.022A9.607 9.607 0 0 1 12 6.82c.85.004 1.705.114 2.504.336 1.909-1.29 2.747-1.022 2.747-1.022.546 1.372.202 2.386.1 2.638.64.696 1.028 1.587 1.028 2.675 0 3.83-2.339 4.673-4.566 4.92.359.307.678.915.678 1.846 0 1.332-.012 2.407-.012 2.734 0 .267.18.577.688.48 3.97-1.32 6.833-5.054 6.833-9.458C22 6.463 17.522 2 12 2Z"></path>
</symbol>
</svg>
{{/* https://heroicons.com/mini exclamation-circle */}}
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="icon--exclamation-circle" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-8-5a.75.75 0 0 1 .75.75v4.5a.75.75 0 0 1-1.5 0v-4.5A.75.75 0 0 1 10 5Zm0 10a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" clip-rule="evenodd" />
</symbol>
</svg>
{{/* https://heroicons.com/mini exclamation-triangle */}}
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="icon--exclamation-triangle" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495ZM10 5a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 10 5Zm0 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" clip-rule="evenodd" />
</symbol>
</svg>
{{/* https://heroicons.com/mini information-circle */}}
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="icon--information-circle" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-7-4a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM9 9a.75.75 0 0 0 0 1.5h.253a.25.25 0 0 1 .244.304l-.459 2.066A1.75 1.75 0 0 0 10.747 15H11a.75.75 0 0 0 0-1.5h-.253a.25.25 0 0 1-.244-.304l.459-2.066A1.75 1.75 0 0 0 9.253 9H9Z" clip-rule="evenodd" />
</symbol>
</svg>
{{/* https://heroicons.com/mini light-bulb */}}
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="icon--light-bulb" viewBox="0 0 24 24" aria-hidden="true">
<path d="M10 1a6 6 0 0 0-3.815 10.631C7.237 12.5 8 13.443 8 14.456v.644a.75.75 0 0 0 .572.729 6.016 6.016 0 0 0 2.856 0A.75.75 0 0 0 12 15.1v-.644c0-1.013.762-1.957 1.815-2.825A6 6 0 0 0 10 1ZM8.863 17.414a.75.75 0 0 0-.226 1.483 9.066 9.066 0 0 0 2.726 0 .75.75 0 0 0-.226-1.483 7.553 7.553 0 0 1-2.274 0Z" />
</symbol>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.5 KiB

After

Width:  |  Height:  |  Size: 5.0 KiB

layouts/shortcodes/note.html
+1 -1
View File
@@ -10,7 +10,7 @@ Renders a callout.
{{- $text := .Inner | strings.TrimSpace | .Page.RenderString (dict "display" "block") }}
{{- partial "layouts/blocks/alert.html" (dict
"color" "blue"
"icon" "exclamation"
"icon" "exclamation-triangle"
"text" $text
)
}}