Blockquote with render hook

tips & tricks
1

I used a shortcode to generate quoteblock content.
Now I switched to use a render hook.

HTML blockquote can have a cite attribute. I added the author attribute.

Here is it:

Markdown

````quote { author="Sir Tim Berners-Lee" cite="https://cds.cern.ch/record/369245/files/dd-89-001.pdf"}
Vague, but exciting…
````

layouts\_default\_markup\render-codeblock-quote.html

{{ $author := .Attributes.author  }}
{{ $cite   := .Attributes.cite    }}
<figure>
  <blockquote {{ with $cite }} cite="{{.| safeHTML }}" {{end}}>{{ .Inner | .Page.RenderString }}
  {{- with $author}}<figcaption>{{with $cite }}<a href={{$cite}}>{{end}}{{.| $.Page.RenderString }}{{with $cite }}</a>{{end}}</figcaption>{{ end -}}</blockquote>
</figure>

CSS

blockquote {
  border-left: 10px solid #ccc;
  margin: 1em 10px 0 0;
  padding: .5em 3em 0 2em;
}

  blockquote figcaption {
    position: relative;
    margin: 1em 10px 0 0;
  }

/* language depend prefixes */
:lang(de) > blockquote::before {
  content: "Zitat: ";
  font-weight: bolder;
}

:lang(en) > blockquote::before {
  content: "Quote: ";
  font-weight: bolder;
}

result

image

as HTML

<figure><blockquote cite="https://cds.cern.ch/record/369245/files/dd-89-001.pdf">Vague, but exciting…<figcaption><a href="https://cds.cern.ch/record/369245/files/dd-89-001.pdf">Sir Tim Berners-Lee</a></figcaption></blockquote></figure>

8 Likes
2

this seems like a non-standard and clever way to approach this

3

You solve an issue I had for long, that is so elegant, thanks !!

4

Just implemented this. Brilliant! I was using replaceRE before.