Is there any way to modify Hugo Admonition Shortcode to Support Obsidian Format

In Hugo, I want to set up a shortcode for admonitions. The initial HTML template code is as follows:

{{- $inner := .Inner | .Page.RenderString -}}

{{- $iconMap := dict "note" "fas fa-pencil-alt fa-fw" -}}
{{- $iconMap  = dict "abstract" "fas fa-list-ul fa-fw" | merge $iconMap -}}
{{- $iconMap  = dict "info" "fas fa-info-circle fa-fw" | merge $iconMap -}}
{{- $iconMap  = dict "tip" "fas fa-lightbulb fa-fw" | merge $iconMap -}}
{{- $iconMap  = dict "success" "fas fa-check-circle fa-fw" | merge $iconMap -}}
{{- $iconMap  = dict "question" "fas fa-question-circle fa-fw" | merge $iconMap -}}
{{- $iconMap  = dict "warning" "fas fa-exclamation-triangle fa-fw" | merge $iconMap -}}
{{- $iconMap  = dict "failure" "fas fa-times-circle fa-fw" | merge $iconMap -}}
{{- $iconMap  = dict "danger" "fas fa-skull-crossbones fa-fw" | merge $iconMap -}}
{{- $iconMap  = dict "bug" "fas fa-bug fa-fw" | merge $iconMap -}}
{{- $iconMap  = dict "example" "fas fa-list-ol fa-fw" | merge $iconMap -}}
{{- $iconMap  = dict "quote" "fas fa-quote-right fa-fw" | merge $iconMap -}}

{{- $iconDetails := "fas fa-angle-right fa-fw" -}}

{{- if .IsNamedParams -}}
    {{- $type := .Get "type" | default "note" -}}
    <div class="details admonition {{ $type }}{{ if .Get `open` | ne false }} open{{ end }}">
        <div class="details-summary admonition-title">
            <i class="icon {{ index $iconMap $type | default (index $iconMap "note") }}" aria-hidden="true"></i>{{ .Get "title" | default (T $type) }}<i class="details-icon {{ $iconDetails }}" aria-hidden="true"></i>
        </div>
        <div class="details-content">
            <div class="admonition-content">
                {{- $inner -}}
            </div>
        </div>
    </div>
{{- else -}}
    {{- $type := .Get 0 | default "note" -}}
    <div class="details admonition {{ $type }}{{ if .Get 2 | ne false }} open{{ end }}">
        <div class="details-summary admonition-title">
            <i class="icon {{ index $iconMap $type | default (index $iconMap "note") }}" aria-hidden="true"></i>{{ .Get 1 | default (T $type) }}<i class="details-icon {{ $iconDetails }}" aria-hidden="true"></i>
        </div>
        <div class="details-content">
            <div class="admonition-content">
                {{- $inner -}}
            </div>
        </div>
    </div>
{{- end -}}

This corresponds to template usage like:

{{< admonition type=tip title="This is a tip" open=false >}}
An **admonition** banner
{{< /admonition >}}
or
{{< admonition tip "This is a tip" false >}}
An **admonition** banner
{{< /admonition >}}


Theme Documentation - Extended Shortcodes - LoveIt (hugoloveit.com)

Currently, I am editing in Obsidian, and coincidentally, there is also an admonition plugin there. The format it uses does not include an open type, which refers to whether it is collapsed; I want to default this to true:

>[!tip] This is a tip 
> An **admonition** banner


Is there a way to modify the initial HTML to read the Obsidian format for templates?

Not answering your question, but Go template commands can be multiline, and in my eyes it’s easier to read something ala:

{{ $iconMap := dict 
   "note" "fas fa-pencil-alt fa-fw" 
   "info" "fas fa-pencil-alt fa-fw" 
}}
1 Like

As to your question. Not possible/practical with a shortcode, but simple with a render hook:

1 Like

Thanks for the suggestion, I think I succeeded part of it :grinning:

I added it in config.toml

markup:
  goldmark:
    parser:
      attribute:
        block: true

image-20240926125316588

Added a render-blockquote.html file

image-20240926125350630

However, in the tests, it was found that it was not completely successful

image-20240926130048178

image-20240926130100182

image-20240926130124803

This is the effect of the display.,It seems that something is not right.,Is it that I didn’t set it up somewhere.

Or am I actually successful, all I need to do is add CSS files to beautify the callouts?

1 Like

It might be better to post code as such, not as an image. If you want others to work on it, that is.

One could only tell if you said what you expected and what is not working in your opinion. And if you showed the relevant code, preferably a link to your repository. In any case, you can use CSS to “beautify” the callouts.

1 Like

I’m sorry for my impolite asking way,and the link above is my repository.

What is your Hugo version? I’m seeing the same as you do with Hugo 0.128 – blockquote render hooks are available from 0.132 onwards only. With 0.134.4, I see this in your about page:

which looks ok to me (you can of course still style it any way you want, using CSS).
Note that I changed the code in about.md to look like this:

> [!note]
> [博客建设计划 | NadirEcho's Blog](https://nadirecho.top/posts/draft/blog-plan/) 

i.e. two consecutive blockquote lines instead of your one. That is according to the Hugo documentation.

aha,my hugo version is 0.134.0-extend.
Thank you for your help. it seems that I have already succeed for this setting :laughing:

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.