hugo-book
Code Issues

Re-implement columns shortcode as markdown list

Browse Source
This commit is contained in:
Alex Shpak
2025-08-05 13:29:30 +02:00
parent 5f2dbb76fa
commit 2c8c093a30
3 changed files with 69 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/_shortcodes.scss
+16
View File
@@ -77,6 +77,22 @@
min-width: $body-min-width * 0.66; min-width: $body-min-width * 0.66;
padding: 0 $padding-16; padding: 0 $padding-16;
} }
>ul {
list-style: none;
display: flex;
padding: 0;
flex-wrap: wrap;
>li {
@extend .markdown-inner;
flex: 1 1;
margin: $padding-16 0;
padding: 0 $padding-16;
min-width: $body-min-width * 0.66;
}
}
} }
// {{< button >}} // {{< button >}}
exampleSite/content.en/docs/shortcodes/columns.md
+41 -56
View File
@@ -1,80 +1,65 @@
# Columns # Columns
Columns help organize shorter pieces of content horizontally for readability. Columns help organize shorter pieces of content horizontally for readability. `columns` shortcode styles markdown list as up to 3 columns.
## Example ## Example
```html ```tpl
{{%/* columns [ratio="1:1"] [class="..."] */%}} <!-- begin columns block --> {{%/* columns [ratio="1:1"] [class="..."] */%}}
# Left Content - ### Left Content
Lorem markdownum insigne... Lorem markdownum insigne...
<---> <!-- magic separator, between columns --> - ### Mid Content
Lorem markdownum insigne...
# Mid Content - ### Right Content
Lorem markdownum insigne... Lorem markdownum insigne...
<---> <!-- magic separator, between columns -->
# Right Content
Lorem markdownum insigne...
{{%/* /columns */%}} {{%/* /columns */%}}
``` ```
{{% columns %}} {{% columns %}}
### Left Content - ### Left Content
Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa
protulit, sed sed aere valvis inhaesuro Pallas animam: qui _quid_, ignes. protulit, sed sed aere valvis inhaesuro Pallas animam: qui _quid_, ignes.
Miseratus fonte Ditis conubia. Miseratus fonte Ditis conubia.
<---> - ### Mid Content
Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
stringit, frustra Saturnius uteroque inter!
### Mid Content - ### Right Content
Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
stringit, frustra Saturnius uteroque inter! stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa
protulit, sed sed aere valvis inhaesuro Pallas animam: qui _quid_, ignes.
<---> Miseratus fonte Ditis conubia.
### Right Content
Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa
protulit, sed sed aere valvis inhaesuro Pallas animam: qui _quid_, ignes.
Miseratus fonte Ditis conubia.
{{% /columns %}} {{% /columns %}}
## Settings size ratio for columns ## Settings size ratio for columns
```html ```tpl
{{%/* columns ratio="1:2" */%}} <!-- begin columns block --> {{%/* columns ratio="1:2" */%}}
- ## x1 Column
## x1 Column Lorem markdownum insigne...
Lorem markdownum insigne...
<---> <!-- magic separator, between columns -->
## x2 Column
Lorem markdownum insigne...
- ## x2 Column
Lorem markdownum insigne...
{{%/* /columns */%}} {{%/* /columns */%}}
``` ```
{{% columns ratio="1:2" %}} {{% columns ratio="1:2" %}}
### x1 Column - ### x1 Column
Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa
protulit, sed sed aere valvis inhaesuro Pallas animam: qui _quid_, ignes. protulit, sed sed aere valvis inhaesuro Pallas animam: qui _quid_, ignes.
Miseratus fonte Ditis conubia. Miseratus fonte Ditis conubia.
<--->
### x2 Column
Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
stringit, frustra Saturnius uteroque inter!
Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa
protulit, sed sed aere valvis inhaesuro Pallas animam: qui _quid_, ignes.
Miseratus fonte Ditis conubia.
- ### x2 Column
Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
stringit, frustra Saturnius uteroque inter!
Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa
protulit, sed sed aere valvis inhaesuro Pallas animam: qui _quid_, ignes.
Miseratus fonte Ditis conubia.
{{% /columns %}} {{% /columns %}}
layouts/_shortcodes/columns.html
+12
View File
@@ -1,4 +1,6 @@
{{- $ratio := (split (.Get "ratio") ":") -}} {{- $ratio := (split (.Get "ratio") ":") -}}
{{- if strings.Contains .InnerDeindent "<--->" -}}
{{ warnf "Columns shortcode seprator '<--->' is deprecated, use markdown list instead." -}}
<div class="book-columns flex flex-wrap{{ with .Get "class" }} {{ . }}{{ end }}"> <div class="book-columns flex flex-wrap{{ with .Get "class" }} {{ . }}{{ end }}">
{{ range $index, $content := split .InnerDeindent "<--->" }} {{ range $index, $content := split .InnerDeindent "<--->" }}
{{- $grow := default 1 (index $ratio $index) -}} {{- $grow := default 1 (index $ratio $index) -}}
@@ -7,3 +9,13 @@
</div> </div>
{{ end }} {{ end }}
</div> </div>
{{ else }}
<div class="book-columns book-columns-{{ .Ordinal }} {{ with .Get "class" }}{{ . }}{{ end }}">
<style>{{- range $index, $grow := $ratio -}}
.book-columns-{{ $.Ordinal }}>ul>li:nth-child({{ $index | add 1 }}){
flex-grow: {{ $grow }};
}
{{ end -}}</style>
{{ .Inner | safeHTML }}
</div>
{{ end -}}