Hugo 书影音引用块 Shortcodes

  1{{ $quote := .Get "quote" | markdownify }}
  2{{ $author := .Get "author" }}
  3{{ $book := .Get "book" }}
  4{{ $type := .Get "type" | default "book" }}
  5{{ $year := .Get "year" }}
  6{{ $title := .Get "title" }}
  7
  8<style>
  9.quote-card {
 10    background-color: #f8f9fa;
 11    border-radius: 8px;
 12    padding: 1.5rem;
 13    margin: 1.5rem 0;
 14    position: relative;
 15    transition: background-color 0.3s ease;
 16    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
 17}
 18
 19.dark .quote-card {
 20    background-color: #2d333b;
 21    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
 22}
 23
 24.quote-content {
 25    position: relative;
 26    padding-left: 2.5rem;
 27}
 28
 29@media screen and (max-width: 768px) {
 30    .quote-content {
 31        padding-left: 0;
 32    }
 33    .quote-mark {
 34        display: none;
 35    }
 36}
 37
 38.quote-mark {
 39    position: absolute;
 40    left: 0;
 41    top: -0.5rem;
 42    color: #adb5bd;
 43    opacity: 0.5;
 44}
 45
 46.dark .quote-mark {
 47    color: #768390;
 48}
 49
 50.quote-content p {
 51    margin: 0;
 52    font-size: 1rem;
 53    line-height: 1.8;
 54    color: #495057;
 55    font-family: "Georgia", "Noto Serif SC", "Source Han Serif SC", "Source Han Serif CN", serif;
 56    font-weight: 400;
 57    white-space: pre-wrap;
 58}
 59
 60.dark .quote-content p {
 61    color: #adbac7;
 62}
 63
 64.quote-source {
 65    margin-top: 1rem;
 66    text-align: right;
 67    font-size: 0.9rem;
 68    color: #6c757d;
 69}
 70
 71.dark .quote-source {
 72    color: #768390;
 73}
 74</style>
 75
 76<div class="quote-card">
 77    <div class="quote-content">
 78        {{ if eq $type "book" }}
 79        <svg class="quote-mark" width="24" height="24" viewBox="0 0 24 24">
 80            <path fill="currentColor" d="M9.983 3v7.391c0 5.704-3.731 9.57-8.983 10.609l-.995-2.151c2.432-.917 3.995-3.638 3.995-5.849h-4v-10h9.983zm14.017 0v7.391c0 5.704-3.748 9.571-9 10.609l-.996-2.151c2.433-.917 3.996-3.638 3.996-5.849h-3.983v-10h9.983z"/>
 81        </svg>
 82        {{ else if eq $type "movie" }}
 83        <svg class="quote-mark" width="32" height="32" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
 84            <path fill="currentColor" d="M445.056 596.096h-92.864a86.976 86.976 0 0 1-86.88-86.88v-128.032a86.976 86.976 0 0 1 86.88-86.88h128.032a86.976 86.976 0 0 1 86.88 86.88v91.936a32 32 0 0 1-64 0v-91.936a22.88 22.88 0 0 0-22.88-22.88h-128.032a22.912 22.912 0 0 0-22.88 22.88v128.032c0 12.608 10.272 22.88 22.88 22.88h92.864a32 32 0 0 1 0 64z M575.616 564.096a37.888 37.888 0 1 1-75.776 0 37.888 37.888 0 1 1 75.776 0z M537.76 603.968c-21.984 0-39.872-17.888-39.872-39.872s17.888-39.872 39.872-39.872 39.872 17.888 39.872 39.872c0 21.984-17.888 39.872-39.872 39.872z m0-75.744c-19.776 0-35.872 16.096-35.872 35.872s16.096 35.872 35.872 35.872 35.872-16.096 35.872-35.872-16.096-35.872-35.872-35.872z M735.232 785.408H105.088a102.176 102.176 0 0 1-102.08-102.048V222.08a102.208 102.208 0 0 1 102.08-102.08h459.776a32 32 0 0 1 0 64H105.088c-20.992 0-38.08 17.088-38.08 38.08v461.28a38.08 38.08 0 0 0 38.08 38.048h630.144c20.992 0 38.08-17.088 38.08-38.048v-139.808a32.032 32.032 0 0 1 46.496-28.544l136.96 69.504-1.632-315.712a32 32 0 0 1 31.84-32.16h0.16a32 32 0 0 1 32 31.84l1.92 368.128a31.936 31.936 0 0 1-46.496 28.704l-137.248-69.632v87.68a102.176 102.176 0 0 1-102.08 102.048z M805.28 395.552a32.032 32.032 0 0 1-32-32V222.08c0-20.992-17.088-38.08-38.08-38.08a32 32 0 0 1 0-64 102.208 102.208 0 0 1 102.08 102.08v88.672l135.008-70.464a31.968 31.968 0 1 1 29.6 56.736l-181.792 94.912a31.872 31.872 0 0 1-14.816 3.616z M235.68 904a32 32 0 0 1-24.128-53.024l96.768-111.2a32.032 32.032 0 0 1 48.288 42.016L259.84 892.992a32 32 0 0 1-24.16 10.976z M624.768 904a32 32 0 0 1-24.16-10.976l-100.16-115.072a32 32 0 1 1 48.288-42.016l100.16 115.072a32 32 0 0 1-24.128 53.024z"/>
 85        </svg>
 86        {{ else if eq $type "music" }}
 87        <svg class="quote-mark" width="32" height="32" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
 88            <path fill="currentColor" d="M243.382635 960.453708c-84.656075 0-153.497976-68.503187-153.497976-152.706961 0-83.755566 68.841901-151.84943 153.497976-151.84943 21.209044 0 38.371936 17.202801 38.371936 38.376029 0 21.24793-17.162892 38.375006-38.371936 38.375006-43.021839 0-76.751035 33.012881-76.751035 75.098395 0 41.857317 34.403554 75.960019 76.751035 75.960019 42.308595 0 76.746942-34.8139 76.746942-77.574796L320.129576 288.386106c0-51.114145 34.32476-96.611361 83.455737-110.663402L787.364023 68.111261c34.961256-10.118452 71.839165-3.222391 100.957343 18.738783 29.117155 21.957081 45.792952 55.460126 45.792952 91.886757l0 512.277316c0 84.618213-68.840878 153.494906-153.497976 153.494906-84.656075 0-153.493883-68.876694-153.493883-153.494906 0-84.656075 68.838831-153.496953 153.493883-153.496953 21.212114 0 38.375006 17.161868 38.375006 38.375006 0 21.210068-17.161868 38.371936-38.375006 38.371936-42.343387 0-76.746942 34.403554-76.746942 76.750011 0 42.34441 34.403554 76.747965 76.746942 76.747965 42.308595 0 76.747965-34.403554 76.747965-76.747965l0-512.277316c0-12.141528-5.54325-23.309892-15.249309-30.579459-9.744945-7.344269-21.962198-9.671267-33.69031-6.29538l-383.739824 109.61042c-16.379039 4.685719-27.808346 19.899212-27.808346 36.913724L396.876518 806.132994C396.876518 891.203508 328.034617 960.453708 243.382635 960.453708 M358.465696 422.394193c-16.674775 0-32.04074-11.015891-36.874839-27.882024-5.807263-20.34742 5.995551-41.594327 26.381857-47.402613l402.925792-115.122971c20.273742-5.734608 41.59842 5.959735 47.445592 26.347065 5.808286 20.386306-5.999644 41.594327-26.384927 47.441499l-402.926816 115.122971C365.509113 421.872307 361.989963 422.394193 358.465696 422.394193"/>
 89        </svg>
 90        {{ end }}
 91        <p>{{ $quote | replaceRE "\n" "<br>" | safeHTML }}</p>
 92    </div>
 93    {{ if or $author $book $title }}
 94    <div class="quote-source">
 95        {{ if eq $type "book" }}
 96            ——{{ $author }}《{{ $book }}》
 97        {{ else if eq $type "movie" }}
 98            ——《{{ $title }}》{{ if $year }}（{{ $year }}）{{ end }}
 99        {{ else if eq $type "music" }}
100            ——{{ $author }}《{{ $title }}》
101        {{ end }}
102    </div>
103    {{ end }}
104</div>

1{{< quote
2    type=`book`
3    quote=``
4    author=``
5    book=``
6>}}

1{{< quote
2   type=`movie`
3   quote=``
4   title=``
5   year=``
6>}}

1{{< quote
2    type=`music`
3    quote=``
4    author=``
5    title=``
6>}}

1{{< quote
2    type=`book`
3    quote=`他抓住的是跟过去与未来都断开的瞬间，脱离了时间的连续性；他置身于时间之外；换句话说，他处在出神状态；人进入这种状态就忘了年纪，忘了老婆，忘了孩子，忘了忧愁，因此什么都不害怕；因为未来是害怕的根源，谁不顾未来，谁就天不怕地不怕。`
4    author=`米兰昆德拉`
5    book=`慢`
6>}}

1{{< quote
2   type=`movie`
3   quote=`不要躲藏，活下去，追随太阳，你就能到达明天。`
4   title=`疯狂原始人`
5   year=`2013`
6>}}

1{{< quote
2    type=`music`
3    quote=`你说不如冻死 穿汗衣在北极冻死
4    我满心欢喜 提议先到芬兰旅游
5    然后穿汗衣冻死
6    你说其实可以先环游世界 然后到芬兰冻死`
7    author=`My Little Airport`
8    title=`北欧是我们的死亡终站`
9>}}