一、 创建 Shortcode 文件

layouts/shortcodes/quote.html

{{ $quote := .Get "quote" | markdownify }}
{{ $author := .Get "author" }}
{{ $book := .Get "book" }}
{{ $type := .Get "type" | default "book" }}
{{ $year := .Get "year" }}
{{ $title := .Get "title" }}

<style>
.quote-card {
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 1.5rem;
    margin: 1.5rem 0;
    position: relative;
    transition: background-color 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.dark .quote-card {
    background-color: #2d333b;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.quote-content {
    position: relative;
    padding-left: 2.5rem;
}

@media screen and (max-width: 768px) {
    .quote-content {
        padding-left: 0;
    }
    .quote-mark {
        display: none;
    }
}

.quote-mark {
    position: absolute;
    left: 0;
    top: -0.5rem;
    color: #adb5bd;
    opacity: 0.5;
}

.dark .quote-mark {
    color: #768390;
}

.quote-content p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.8;
    color: #495057;
    font-family: "Georgia", "Noto Serif SC", "Source Han Serif SC", "Source Han Serif CN", serif;
    font-weight: 400;
    white-space: pre-wrap;
}

.dark .quote-content p {
    color: #adbac7;
}

.quote-source {
    margin-top: 1rem;
    text-align: right;
    font-size: 0.9rem;
    color: #6c757d;
}

.dark .quote-source {
    color: #768390;
}
</style>

<div class="quote-card">
    <div class="quote-content">
        {{ if eq $type "book" }}
        <svg class="quote-mark" width="24" height="24" viewBox="0 0 24 24">
            <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"/>
        </svg>
        {{ else if eq $type "movie" }}
        <svg class="quote-mark" width="32" height="32" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
            <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"/>
        </svg>
        {{ else if eq $type "music" }}
        <svg class="quote-mark" width="32" height="32" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
            <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"/>
        </svg>
        {{ end }}
        <p>{{ $quote | replaceRE "\n" "<br>" | safeHTML }}</p>
    </div>
    {{ if or $author $book $title }}
    <div class="quote-source">
        {{ if eq $type "book" }}
            ——{{ $author }}《{{ $book }}》
        {{ else if eq $type "movie" }}
            ——《{{ $title }}》{{ if $year }}（{{ $year }}）{{ end }}
        {{ else if eq $type "music" }}
            ——{{ $author }}《{{ $title }}》
        {{ end }}
    </div>
    {{ end }}
</div>

二、使用方法

1. 书籍

{{< quote
    type=`book`
    quote=``
    author=``
    book=``
>}}

2. 影视

{{< quote
   type=`movie`
   quote=``
   title=``
   year=``
>}}

3. 音乐

{{< quote
    type=`music`
    quote=``
    author=``
    title=``
>}}

三、示例

1. 书籍

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

他抓住的是跟过去与未来都断开的瞬间，脱离了时间的连续性；他置身于时间之外；换句话说，他处在出神状态；人进入这种状态就忘了年纪，忘了老婆，忘了孩子，忘了忧愁，因此什么都不害怕；因为未来是害怕的根源，谁不顾未来，谁就天不怕地不怕。

——米兰昆德拉《慢》

2. 影视

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

不要躲藏，活下去，追随太阳，你就能到达明天。

——《疯狂原始人》（2013）

3. 音乐

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

你说不如冻死 穿汗衣在北极冻死
我满心欢喜 提议先到芬兰旅游
然后穿汗衣冻死
你说其实可以先环游世界 然后到芬兰冻死

——My Little Airport《北欧是我们的死亡终站》