1<mark>{{ .Get "text" }}</mark>

1//重点标记
2mark{
3    background: hsla(199, 64%, 63%, 0.696);
4}

1{{< mark text="标记" >}}

1<span style="color:red;">红色文本</span>

1<abbr title="{{ .Get "title" }}">{{ .Get "text" }}</abbr>

1{{< abbr title="感觉很神秘" text="这个短代码只在电脑端生效" >}}

1<details>
2    <summary>{{ (.Get 0) | markdownify }}</summary>
3    {{ .Inner | markdownify }}
4</details>

1{{< spoiler "点击显示" >}}
2让我看看！
3{{< /spoiler >}}

 1//文本高斯模糊
 2.blur {
 3    color: transparent;
 4    text-shadow:0px 0px 8px var(--card-text-color-main)
 5}
 6 
 7.blur:hover {
 8    color: transparent;
 9    text-shadow:0px 0px 0px var(--card-text-color-main)
10   
11}

1<span class="blur">手动打码效果</span>

 1//文本黑幕效果
 2.shady {
 3    color:#000;
 4    font-weight: bold;
 5    box-shadow: 0px -20px 0px rgba(0,0,0,1) inset; 
 6    transition: all 0.3s ease;
 7}
 8.shady:hover{
 9   font-weight: bold;
10    color:#FFF;
11    box-shadow: 0px -20px 0px rgba(0,0,0,1) inset; 
12}

1<span class="shady">数据删除！</span>

 1<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/csshake/1.5.3/csshake.min.css" />
 2
 3<div class="shake {{ .Get "effect" }}">{{ .Inner }}</div>
 4
 5<div class="shake"></div> 
 6<div class="shake shake-hard"></div> 
 7<div class="shake shake-slow"></div> 
 8<div class="shake shake-little"></div> 
 9<div class="shake shake-horizontal"></div> 
10<div class="shake shake-vertical"></div> 
11<div class="shake shake-rotate"></div> 
12<div class="shake shake-opacity"></div> 
13<div class="shake shake-crazy"></div>
14<!-- Freeze the animation at that point when :hover --> 
15<div class="shake shake-freeze"></div> 
16<!-- Continuous animation instead on :hover --> 
17<div class="shake shake-constant"></div> 

1{{< shake effect="shake" >}}这是基本的摇晃效果。{{< /shake >}}

1//文字颜色渐变
2.colorfulfont {
3    background: linear-gradient(to right, rgb(25, 221, 238), #ed4588); //第一个颜色代码是渐变起始色，第二个颜色代码是渐变结束色；
4    -webkit-background-clip: text;
5    background-clip: text;
6    color: transparent;
7}

1<font class="colorfulfont"> 我挑的配色好看吧！</font>

1<p style="text-align:{{ index .Params 0 }}">{{ index .Params 1 | markdownify }}</p>

1{{< align left "文字居左" >}}
2{{< align center "文字居中" >}}
3{{< align right "文字居右" >}}

 1<!-- reset scratch variables at the start -->
 2{{ $.Scratch.Set "bl_author" false }}
 3{{ $.Scratch.Set "bl_source" false }}
 4{{ $.Scratch.Set "bl_link" false }}
 5{{ $.Scratch.Set "bl_title" false }}
 6
 7{{ if .IsNamedParams }}
 8  {{ $.Scratch.Set "bl_author" (.Get "author") }}
 9  {{ $.Scratch.Set "bl_source" (.Get "source") }}
10  {{ $.Scratch.Set "bl_link" (.Get "link") }}
11  {{ $.Scratch.Set "bl_title" (.Get "title") }}
12{{ else }}
13  <!-- for the positional version if any -->
14{{ end }}
15
16<!-- if title is not set explicitly then we need to beautify the link
17     if length of link is more than 32 chars, we will cut it off by 32 and
18     then drop everything after the last / if any and put it in into title -->
19
20{{ with $.Scratch.Get "bl_title" }}
21  <!-- do nothing -->
22{{ else }}
23  {{ with $.Scratch.Get "bl_link" }}    <!-- if link is given -->
24    {{ range last 1 (split ($.Scratch.Get "bl_link" ) "://") }}  <!-- split by :// and then only take the items after it to remove protocol:// -->
25      {{ $.Scratch.Set "title_without_protocol" . }}
26    {{ end }}
27    {{ range last 1 (split ($.Scratch.Get "title_without_protocol" ) "www.")  }} <!-- also remove the www. at the start if any. we are using a second split because all URLS may not start with it -->
28      {{ $.Scratch.Set "title_without_protocol" . }}
29    {{ end }}
30    {{ $.Scratch.Set "bl_title" ($.Scratch.Get "title_without_protocol") }}
31
32    <!-- if link is longer than 32 bytes we should trim it -->
33    {{ if (gt (len ($.Scratch.Get "title_without_protocol") ) 32) }}
34      {{ $title := (slicestr ($.Scratch.Get "title_without_protocol") 0 32) }}   <!-- get the first 32 characters of title_without_protocol -->
35      {{ $split_by_fw_slash := split $title "/" }}   <!-- now split on / because we want to stop after the last forward slash -->
36      {{ $count := (sub (len $split_by_fw_slash) 1) }}   <!-- we want everything but the last part so we adjust the count accordingly -->
37
38      {{ $.Scratch.Set "tempstring" "" }}   <!-- temp variable to hold the concatinated string -->
39      {{ range first $count $split_by_fw_slash  }}  <!-- loop through all parts except last and concat them (add / between halves) -->
40        {{ $.Scratch.Set "tempstring" ( . | printf "%s%s/" ($.Scratch.Get "tempstring") | printf "%s" ) }}
41      {{ end }}
42      {{ $.Scratch.Set "bl_title" ( printf "%s..." ($.Scratch.Get "tempstring") | printf "%s" ) }}
43    {{ end }}
44  {{ end }}
45{{ end }}
46
47<blockquote>
48  <p>{{ .Inner | markdownify }}</p>
49  <footer style="text-align:right">
50    <strong>{{ with $.Scratch.Get "bl_author" }}{{ . }}{{ end }}</strong>
51    {{ with $.Scratch.Get "bl_source" }}
52      <cite>{{ . }}</cite>
53    {{ else }}
54      {{ with $.Scratch.Get "bl_link" }}
55        <cite>
56          <a href="{{ . }}" title="{{ . }}" rel="noopener noreferrer">{{ $.Scratch.Get "bl_title" }}</a> <!-- can't have new lines here -->
57        </cite>
58      {{ else }}
59        {{ with $.Scratch.Get "bl_title" }}
60          <cite>
61            {{ $.Scratch.Get "bl_title" }}</a>
62          </cite>
63        {{ end }}
64      {{ end }}
65    {{ end }}
66  </footer>
67</blockquote>

1{{< blockquote author="作者" link="#" title="作品名" >}}
2这里写引用内容
3{{< /blockquote >}}

 1<span class="star-rating">
 2    {{- if ge (.Get 0) (.Get 1) -}}
 3        {{- $star_outline := sub (int (.Get 0)) (int (.Get 1)) -}}
 4        {{- range $i, $sequence :=  (seq (.Get 1)) -}}
 5            <i class="star"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M381.2 150.3L524.9 171.5C536.8 173.2 546.8 181.6 550.6 193.1C554.4 204.7 551.3 217.3 542.7 225.9L438.5 328.1L463.1 474.7C465.1 486.7 460.2 498.9 450.2 506C440.3 513.1 427.2 514 416.5 508.3L288.1 439.8L159.8 508.3C149 514 135.9 513.1 126 506C116.1 498.9 111.1 486.7 113.2 474.7L137.8 328.1L33.58 225.9C24.97 217.3 21.91 204.7 25.69 193.1C29.46 181.6 39.43 173.2 51.42 171.5L195 150.3L259.4 17.97C264.7 6.954 275.9-.0391 288.1-.0391C300.4-.0391 311.6 6.954 316.9 17.97L381.2 150.3z"/></svg></i>
 6        {{- end -}}
 7        {{- range $i, $sequence :=  (seq $star_outline) -}}
 8            <i class="star-outline"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M381.2 150.3L524.9 171.5C536.8 173.2 546.8 181.6 550.6 193.1C554.4 204.7 551.3 217.3 542.7 225.9L438.5 328.1L463.1 474.7C465.1 486.7 460.2 498.9 450.2 506C440.3 513.1 427.2 514 416.5 508.3L288.1 439.8L159.8 508.3C149 514 135.9 513.1 126 506C116.1 498.9 111.1 486.7 113.2 474.7L137.8 328.1L33.58 225.9C24.97 217.3 21.91 204.7 25.69 193.1C29.46 181.6 39.43 173.2 51.42 171.5L195 150.3L259.4 17.97C264.7 6.954 275.9-.0391 288.1-.0391C300.4-.0391 311.6 6.954 316.9 17.97L381.2 150.3z"/></svg></i>
 9        {{- end -}}
10    {{- end -}}
11</span>

 1//星星评级
 2i.star{
 3    color: hsl(61, 79%, 63%); /*星星的颜色*/
 4  }
 5  
 6  i.star-outline{
 7    color: hsl(211, 31%, 74%);/*空星星的颜色*/
 8  }
 9  
10  i.star svg, i.star-outline svg{
11    width: 20px;
12    fill: currentColor;
13}

1{{< rating 10 7 >}}

 1//键盘标签样式
 2nkbd {
 3  margin: 0 .1em;
 4  padding: .1em .6em;
 5  font-size: .8em;
 6  color: #242729;
 7  background: #fff;
 8  border: 1px solid #adb3b9;
 9  border-radius: 3px;
10  box-shadow: 0px 1px 0 rgba(12, 13, 14, 0.2), 0 0 0 2px #fff inset;
11  white-space: nowrap;
12  vertical-align: middle;
13  font-family: SourceHanSerifSC;
14}

1<nkbd>Ctrl</nkbd>+<nkbd>Alt</nkbd>+<nkbd>Del</nkbd>

1{{- $raw := (markdownify .Inner | chomp) -}} {{- $block := findRE
2    "(?is)^<(?:address|article|aside|blockquote|canvas|dd|div|dl|dt|fieldset|figcaption|figure|footer|form|h(?:1|2|3|4|5|6)|header|hgroup|hr|li|main|nav|noscript|ol|output|p|pre|section|table|tfoot|ul|video)\\b"
3    $raw 1 -}}
4    <div class="mycard">
5      <div class="content">{{- if or $block (not $raw) }}{{ $raw }}{{ else }} {{ $raw }} {{ end -}}</div>
6    </div>

 1// 卡片样式
 2.mycard {
 3    padding: 10px 20px;
 4    margin: 20px 0;
 5    border-radius: 4px;
 6    word-break: break-all;
 7    background: #d2e5eb14;
 8    box-shadow: 0 6px 10px 0 #00000033;
 9    .content {
10      line-height: 30px;
11    }
12}

1{{< card >}}卡片样式{{< /card >}}

 1<div class="github">
 2    <div class="logo">
 3        {{ replace $.Site.Data.SVG.repository "icon" "icon github-icon" | safeHTML }}
 4        <a class="name" href={{ .Get "link" }} target="_blank">{{ .Get "name" }}</a>
 5    </div>
 6    <div class="description">{{ .Get "description" }}</div>
 7    <div class="language">
 8        <span class="language-color" style="background-color: {{ .Get "color" }}"></span>
 9        <span class="language-name">{{ .Get "language" }}</span>
10    </div>
11</div>

 1//github样式
 2.github {
 3    border: 1px solid var(--card-text-color-main);
 4    border-radius: 3px;
 5    margin: 0 auto;
 6    margin-bottom: 1em;
 7    padding: 1em;
 8    .github-icon {
 9      width: 1.2em;
10      height: 1.2em;
11      margin-right: 0.5em;
12      margin-bottom: 0.2em;
13      fill: var(--card-text-color-main);
14      transition: all 0.5s;
15    }
16    .name {
17      font-weight: bold;
18      color: #2e97d9;
19      text-decoration: underline;
20      margin-left: 0.5em;
21      position: relative;
22      top: -5px; //加这个属性是因为我的图标和名称无法对齐，实际使用的时候要根据自己的网站修改
23    }
24    .description {
25      margin-top: 0.5em;
26      margin-bottom: 0.5em;
27      color: var(--card-text-color-main);
28      text-align: justify;
29      font-size: 90%;
30      transition: all 0.5s;
31    }
32    .language-color {
33      position: relative;
34      top: 1px;
35      display: inline-block;
36      width: 0.75em;
37      height: 0.75em;
38      border-radius: 50%;
39    }
40    .language-name {
41      color: var(--card-text-color-main);
42      font-size: 90%;
43      margin-left: 0.5em;
44      transition: all 0.5s;
45    }
46}  

1repository = '<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M2 2.5C2 1.83696 2.26339 1.20107 2.73223 0.732233C3.20108 0.263392 3.83696 0 4.5 0L13.25 0C13.4489 0 13.6397 0.0790176 13.7803 0.21967C13.921 0.360322 14 0.551088 14 0.75V13.25C14 13.4489 13.921 13.6397 13.7803 13.7803C13.6397 13.921 13.4489 14 13.25 14H10.75C10.5511 14 10.3603 13.921 10.2197 13.7803C10.079 13.6397 10 13.4489 10 13.25C10 13.0511 10.079 12.8603 10.2197 12.7197C10.3603 12.579 10.5511 12.5 10.75 12.5H12.5V10.5H4.5C4.30308 10.5 4.11056 10.5582 3.94657 10.6672C3.78257 10.7762 3.65442 10.9312 3.57816 11.1128C3.50191 11.2943 3.48096 11.4943 3.51793 11.6878C3.5549 11.8812 3.64816 12.0594 3.786 12.2C3.92524 12.3422 4.0023 12.5338 4.00024 12.7328C3.99818 12.9318 3.91716 13.1218 3.775 13.261C3.63285 13.4002 3.4412 13.4773 3.24222 13.4752C3.04325 13.4732 2.85324 13.3922 2.714 13.25C2.25571 12.7829 1.99929 12.1544 2 11.5V2.5ZM12.5 1.5V9H4.5C4.144 9 3.806 9.074 3.5 9.208V2.5C3.5 2.23478 3.60536 1.98043 3.79289 1.79289C3.98043 1.60536 4.23478 1.5 4.5 1.5H12.5ZM5 12.25V15.5C5 15.5464 5.01293 15.5919 5.03734 15.6314C5.06175 15.6709 5.09667 15.7028 5.1382 15.7236C5.17972 15.7444 5.22621 15.7532 5.27245 15.749C5.31869 15.7448 5.36286 15.7279 5.4 15.7L6.85 14.613C6.89328 14.5805 6.94591 14.563 7 14.563C7.05409 14.563 7.10673 14.5805 7.15 14.613L8.6 15.7C8.63714 15.7279 8.68131 15.7448 8.72755 15.749C8.77379 15.7532 8.82028 15.7444 8.8618 15.7236C8.90333 15.7028 8.93826 15.6709 8.96266 15.6314C8.98707 15.5919 9 15.5464 9 15.5V12.25C9 12.1837 8.97366 12.1201 8.92678 12.0732C8.87989 12.0263 8.81631 12 8.75 12H5.25C5.1837 12 5.12011 12.0263 5.07322 12.0732C5.02634 12.1201 5 12.1837 5 12.25Z"/></svg>'

1{{< github
2  name="链接标题"
3  link="#"
4  description="内容描述"
5  color="#F48201"
6  language="Go"
7>}}

 1<!-- 文件位置：~/layouts/shortcodes/notice.html -->
 2
 3<!--https://github.com/martignoni/hugo-notice-->
 4{{- $noticeType := .Get 0 -}}
 5
 6{{- $raw := (markdownify .Inner | chomp) -}}
 7
 8{{- $block := findRE "(?is)^<(?:address|article|aside|blockquote|canvas|dd|div|dl|dt|fieldset|figcaption|figure|footer|form|h(?:1|2|3|4|5|6)|header|hgroup|hr|li|main|nav|noscript|ol|output|p|pre|section|table|tfoot|ul|video)\\b" $raw 1 -}}
 9
10{{ $icon := (replace (index $.Site.Data.SVG $noticeType) "icon" "icon notice-icon") }}
11<div class="notice {{ $noticeType }}" {{ if len .Params | eq 2 }} id="{{ .Get 1 }}" {{ end }}>
12    <div class="notice-title">{{ $icon | safeHTML }}</div>
13    {{- if or $block (not $raw) }}{{ $raw }}{{ else }}<p>{{ $raw }}</p>{{ end -}}
14</div>

 1//增加notice短代码
 2.notice {
 3  position:relative;
 4  padding: 1em 1em 1em 2.5em;
 5  margin-bottom: 1em;
 6  border-radius: 4px;
 7  p:last-child {
 8      margin-bottom: 0;
 9  }
10  .notice-title {
11      position: absolute;
12      left: 0.8em;
13      .notice-icon {
14          width: 1.2em;
15          height: 1.2em;
16      }
17  }
18  &.notice-warning {
19      background: hsla(0, 65%, 65%, 0.15);
20      border-left: 5px solid hsl(0, 65%, 65%);
21      .notice-title {
22          color: hsl(0, 65%, 65%);
23      }
24  }
25  &.notice-info {
26      background: hsla(30, 80%, 70%, 0.15);
27      border-left: 5px solid hsl(30, 80%, 70%);
28      .notice-title {
29          color: hsl(30, 80%, 70%);
30      }
31  }
32  &.notice-note {
33      background: hsla(200, 65%, 65%, 0.15);
34      border-left: 5px solid hsl(200, 65%, 65%);
35      .notice-title {
36          color: hsl(200, 65%, 65%);
37      }
38  }
39  &.notice-tip {
40      background: hsla(140, 65%, 65%, 0.15);
41      border-left: 5px solid hsl(140, 65%, 65%);
42      .notice-title {
43          color: hsl(140, 65%, 65%);
44      }
45  }
46}
47
48[data-theme="dark"] .notice {
49  &.notice-warning {
50      background: hsla(0, 25%, 35%, 0.15);
51      border-left: 5px solid hsl(0, 25%, 35%);
52      .notice-title {
53          color: rgba(224, 108, 108, 0.5);
54      }
55  }
56  &.notice-info {
57      background: hsla(30, 25%, 35%, 0.15);
58      border-left: 5px solid hsl(30, 25%, 35%);
59      .notice-title {
60          color: rgba(240, 178, 117, 0.5);
61      }
62  }
63  &.notice-note {
64      background: hsla(200, 25%, 35%, 0.15);
65      border-left: 5px solid hsl(200, 25%, 35%);
66      .notice-title {
67          color: rgba(108, 185, 224, 0.5);
68      }
69  }
70  &.notice-tip {
71      background: hsla(140, 25%, 35%, 0.15);
72      border-left: 5px solid hsl(140, 25%, 35%);
73      .notice-title {
74          color: rgba(108, 224, 147, 0.5);
75      }
76  }
77}

1# Notice Icon
2notice-warning = '<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 576 512" fill="hsl(0, 65%, 65%)"><path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zM124 296c-6.6.0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h264c6.6.0 12 5.4 12 12v56c0 6.6-5.4 12-12 12H124z"/></svg>'
3notice-info = '<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 512 512" fill="hsl(30, 80%, 70%)"><path d="M256 8a248 248 0 100 496 248 248 0 000-496zm0 110a42 42 0 110 84 42 42 0 010-84zm56 254c0 7-5 12-12 12h-88c-7 0-12-5-12-12v-24c0-7 5-12 12-12h12v-64h-12c-7 0-12-5-12-12v-24c0-7 5-12 12-12h64c7 0 12 5 12 12v100h12c7 0 12 5 12 12v24z"/></svg>'
4notice-note = '<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 512 512" fill="hsl(200, 65%, 65%)"><path d="M504 256a248 248 0 11-496 0 248 248 0 01496 0zm-248 50a46 46 0 100 92 46 46 0 000-92zm-44-165l8 136c0 6 5 11 12 11h48c7 0 12-5 12-11l8-136c0-7-5-13-12-13h-64c-7 0-12 6-12 13z"/></svg>'
5notice-tip = '<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 512 512" fill="hsl(140, 65%, 65%)"><path d="M504 256a248 248 0 11-496 0 248 248 0 01496 0zM227 387l184-184c7-6 7-16 0-22l-22-23c-7-6-17-6-23 0L216 308l-70-70c-6-6-16-6-23 0l-22 23c-7 6-7 16 0 22l104 104c6 7 16 7 22 0z"/></svg>'

1{{< notice notice-warning >}}
2Warning
3{{< /notice >}}

  1{{- $date := .Get "date" -}} {{- $title := .Get "title" -}} {{- $description := .Get "description" -}} {{- $tags := .Get "tags" -}}
  2
  3<div class="timeline__row">
  4    <div class="timeline__time">
  5        <div class="timeline__time">{{ $date }}</div>
  6        <div class="timeline__split-line"></div>
  7    </div>
  8    <div class="timeline__content">
  9        <div class="timeline__tags">
 10            {{- with split $tags ", " -}} {{- range . }}{{- if eq . "样式" }}
 11            <span class="timeline__tag timeline__tag-style">{{ . }}</span> {{- else if eq . "文章" }}
 12            <span class="timeline__tag timeline__tag-article">{{ . }}</span> {{- else if eq . "页面" }}
 13            <span class="timeline__tag timeline__tag-page">{{ . }}</span> {{- else }}
 14            <span class="timeline__tag">{{ . }}</span> {{- end }} {{- end }} {{- end }}
 15        </div>
 16            <div class="timeline__title">{{ $title }}</div>
 17        <div class="timeline__description">
 18            {{ $description }}
 19        </div>
 20    </div>
 21</div>
 22
 23<style>
 24    .timeline {
 25        display: flex;
 26        flex-direction: column;
 27    }
 28    
 29    .timeline__row {
 30        display: flex;
 31        padding-left: 4%;
 32        height: 90px;
 33    }
 34    
 35    .timeline__time {
 36        flex: 0 0 110px;
 37        color: #5d5d5d;
 38        font-size: 17px;
 39        text-transform: uppercase;
 40        position: relative;
 41        display: flex;
 42        flex-direction: column;
 43        align-items: center;
 44        padding: 0.5rem 0;
 45    }
 46    
 47    .timeline__time-text {
 48        margin: 0;
 49    }
 50    
 51    .timeline__split-line {
 52        position: absolute;
 53        top: 0.5rem;
 54        right: -20px;
 55        height: 100%;
 56        width: 2px;
 57        background-color: #84c4e240;
 58        z-index: 0;
 59    }
 60    
 61    .timeline__split-line:before {
 62        content: "";
 63        position: absolute;
 64        top: 24%;
 65        right: -4px;
 66        transform: translateY(-50%);
 67        width: 10px;
 68        height: 10px;
 69        background-color: #c9e5f2;
 70        box-shadow: 0 0 0 4px var(--theme);
 71        border-radius: 50%;
 72        border: 0px solid #84c4e2;
 73        z-index: -1;
 74    }
 75    
 76    .timeline__content {
 77        flex: 1;
 78        margin-left: 4.5rem;
 79        padding: 0.5rem 0 1.2rem 0;
 80    }
 81    
 82    .timeline__title {
 83        margin: 0;
 84        margin-bottom: 2px;
 85        padding-top: 3px;
 86        margin-left: 0.5rem;
 87        color: var(--content);
 88        font-family: var(--font-family-teshu);
 89        font-size: 19px;
 90        font-weight: 600;
 91        width: fit-content;
 92        display: inline-block;
 93        vertical-align: middle;
 94        /* 垂直居中对齐 */
 95    }
 96    
 97    .timeline__tags {
 98        display: inline-block;
 99        padding: 0;
100        margin-left: 0.3rem;
101        align-items: center;
102        gap: 0.3rem;
103    }
104    
105    .timeline__tag {
106        display: inline-block;
107        color: var(--secondary);
108        background-color: #84c4e230;
109        border: 1.5px solid #84c4e230;
110        border-radius: 999px;
111        padding: 0rem 0.5rem;
112        font-size: 12px;
113        white-space: nowrap;
114        line-height: 1.4rem;
115        opacity: 0.8;
116        vertical-align: middle;
117        /* 垂直居中对齐 */
118    }
119    
120    .timeline__description {
121        font-size: 15px;
122        line-height: 1.6;
123        color: #5d5d5d;
124        overflow: hidden;
125        text-overflow: ellipsis;
126        margin: 0.5rem 0 0.4rem 1.5rem;
127        /* 添加 1.5rem 的左侧内边距 */
128    }
129    /* 为类名为 "timeline__tag-style" 的标签定义颜色 */
130    
131    .timeline__tag-style {
132        background-color: #c581da;
133        /* 替换为你希望的颜色 */
134        border-color: #c581da;
135        /* 与背景色相同或不同，根据需要自定义 */
136        color: #FFFFFF;
137        /* 根据需要选择文本颜色 */
138    }
139    /* 为类名为 "timeline__tag-article" 的标签定义颜色 */
140    
141    .timeline__tag-article {
142        background-color: #92d392;
143        /* 替换为你希望的颜色 */
144        border-color: #92d392;
145        /* 与背景色相同或不同，根据需要自定义 */
146        color: #000000;
147        /* 根据需要选择文本颜色 */
148    }
149    /* 为类名为 "timeline__tag-page" 的标签定义颜色 */
150    
151    .timeline__tag-page {
152        background-color: #707070;
153        /* 替换为你希望的颜色 */
154        border-color: #707070;
155        /* 与背景色相同或不同，根据需要自定义 */
156        color: #FFFFFF;
157        /* 根据需要选择文本颜色 */
158    }
159    
160    @media screen and (max-width: 768px) {
161        .timeline__time {
162            font-size: 14px;
163            /* 在小屏幕上使用较小的字体大小 */
164        }
165        .timeline__title {
166            font-size: 16px;
167            /* 在小屏幕上使用较小的字体大小 */
168        }
169        .timeline__description {
170            font-size: 14px;
171            /* 在小屏幕上使用较小的字体大小 */
172        }
173    }
174</style>

1{{< timeline date="2024" title="First Time" description="我是萌新" tags="past"  >}}{{< timeline date="2025" title="Second Time" description="我还是萌新" tags="now"  >}}

 1{{ if .Site.Params.enableimgloop }}
 2    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.min.css">
 3    <!-- Swiper -->
 4    <div class="swiper-container">
 5        <div class="swiper-wrapper">
 6            {{$itItems := split (.Get 0) ","}}
 7            {{range $itItems }}
 8            <div class="swiper-slide">
 9                <img src="{{.}}" alt="">
10            </div>
11            {{end}}
12        </div>
13        <!-- Add Pagination -->
14        <div class="swiper-pagination"></div>
15    </div>
16
17    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.min.js"></script>
18     <!-- Initialize Swiper -->
19     <script>
20        var swiper = new Swiper('.swiper-container', {
21            pagination: '.swiper-pagination',
22            paginationClickable: true,
23        //自动调节高度
24        autoHeight: true,
25        //键盘左右方向键控制
26        keyboardControl : true,
27        //鼠标滑轮控制
28        mousewheelControl : true,
29        //自动切换
30        //autoplay : 5000,
31        //懒加载
32        lazyLoading : true,
33		lazyLoadingInPrevNext : true,
34		//无限循环
35		loop : true,
36        });
37        </script>
38{{ end }}

 1//图片轮播
 2.swiper-container {
 3    max-width: 820px;
 4    margin: 2em auto;
 5}
 6.swiper-slide {
 7    text-align: center;
 8    font-size: 18px;
 9    background-color: #fff;
10    /* Center slide text vertically */
11    display: flex;
12    justify-content: center;
13    align-items: center;
14    img {
15        margin: 0 !important;
16    }
17}

1{{< imgloop "1.jpg,2.jpg,3.jpg" >}}

 1{{ $baseURL := .Site.BaseURL }}
 2{{- with (.Get 0) -}}
 3{{- $files := readDir (print "/static/" .) }}
 4<div class="gallery-photos">
 5  {{- range (sort $files "Name" "asc") -}}
 6    {{- if ( .Name | findRE "\\.(gif|jpg|jpeg|tiff|png|bmp|webp|avif|jxl)") }}
 7    {{- $linkURL := print $baseURL "/" ($.Get 0) "/" .Name | absURL }}
 8    <div class="gallery-photo">
 9      <img class="photo-img" loading='lazy' decoding="async" src="{{  $linkURL  }}" alt="{{ .Name }}" />
10      <span class="photo-title">{{ .Name | replaceRE "\\..*" ""}}</span>
11    </div>
12    {{- end }}
13  {{- end }}
14</div>
15{{- end }}

 1<!-- 瀑布流相册 -->
 2<script src="https://immmmm.com/waterfall.min.js"></script>
 3<script src="https://immmmm.com/imgStatus.min.js"></script>
 4<script>
 5document.addEventListener('DOMContentLoaded', () => {
 6  //外链 gallery 标签相册瀑布流
 7  var photosAll = document.getElementsByTagName('gallery') || '';
 8  if(photosAll){
 9    for(var i=0;i < photosAll.length;i++){
10      photosAll[i].innerHTML = '<div class="gallery-photos">'+photosAll[i].innerHTML+'</div>'
11      var photosIMG = photosAll[i].getElementsByTagName('img')
12      for(var j=0;j < photosIMG.length;j++){
13        wrap(photosIMG[j], document.createElement('div'));
14      }
15    }
16  }
17  function wrap(el, wrapper) {
18    wrapper.className = "gallery-photo";
19    el.parentNode.insertBefore(wrapper, el);
20    wrapper.appendChild(el);
21  }
22  //相册瀑布流
23  let galleryPhotos = document.querySelectorAll('.gallery-photos') || ''
24  if(galleryPhotos){
25    imgStatus.watch('.gallery-photo img', function(imgs) {
26      if(imgs.isDone()){
27        for(var i=0;i < galleryPhotos.length;i++){
28          waterfall(galleryPhotos[i]);
29          let pagePhoto = galleryPhotos[i].querySelectorAll('.gallery-photo');
30          for(var j=0;j < pagePhoto.length;j++){pagePhoto[j].className += " visible"};
31        }
32      }
33    });
34    window.addEventListener('resize', function () {
35      for(var i=0;i < galleryPhotos.length;i++){
36        waterfall(galleryPhotos[i]);
37      }
38    });
39  }
40});
41</script>

 1<style>
 2  .gallery-photos{width:100%;break-inside: avoid;margin-bottom: 10px;}
 3  .gallery-photo{width:33.3%;position: relative;padding:0px 4px 0px 4px;visibility: hidden;overflow: hidden;}
 4  .gallery-photo.visible{visibility: visible;}
 5  .gallery-photo img{width: 100%;height: 100%;object-fit: cover;border-radius: 5px;box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);}
 6  @media screen and (min-width: 1200x) {
 7    .gallery-photo{
 8    width: 100%;
 9    columns: 3;
10    column-gap: 20px;
11    }
12  }
13  @media screen and (min-width: 860px) and (max-width: 1323.98px) {
14    .gallery-photo{    
15    width: 100%;
16    columns: 2;
17    column-gap: 20px;}
18  }
19  @media screen and (max-width: 860px) {
20    .gallery-photo{    
21    width: 100%;
22    columns: 1;}
23  }
24  @media (max-width: 767.98px){
25    .photo-time{display: none;}
26  }
27</style>

1<gallery>![](https://www.sleepymoon.cyou/2023/hugo-shortcodes/2.jpg)![](https://www.sleepymoon.cyou/2023/hugo-shortcodes/1.jpg)</gallery>

 1<div class="pdf" style="
 2    padding-bottom: 66%;
 3    position: relative;
 4    display: block;
 5    width: 100%;
 6    border-bottom: 5px solid;
 7">
 8    <iframe
 9        width="100%"
10        height="100%"
11        src="{{ .Get "src" }}"
12        frameborder="0"
13        allowfullscreen=""
14        style="
15            position: absolute;
16            top: 0;
17            left: 0" >
18    </iframe>
19</div>

1{{< pdf src="https://www.blatchingtonmill.org.uk/assets/Uploads/All-Of-Me-Sheet-Music-John-Legend-All-Of-Me-Piano-Sheet-Music-Medium-Vocals-Piano-Guitar.pdf" >}}

 1<div class="db-card">
 2    <div class="db-card-subject">
 3        <div class="db-card-post"><img loading="lazy" decoding="async" referrerpolicy="no-referrer" src="{{ .Get "image" }}"></div>
 4        <div class="db-card-content">
 5            <div class="db-card-title"><a href="{{ .Get "url" }}" class="cute" target="_blank" rel="noreferrer">{{ .Get "title" }}</a></div>
 6            <div class="rating">
 7                <span class="rating_nums"></span><span class="allstardark"><span class="allstarlight" style="width:{{ .Get "rate" }}0%"></span></span><span class="rating_float"></span></span>
 8                <span class="rating_float">< {{ .Get "rate_float" }} ></span>
 9            </div>
10            <div class="db-card-abstract">{{ .Get "brief" }}</div>
11        </div>
12        <div class="db-card-cate">{{ .Get "tag" }}</div>
13    </div>
14</div>

 1/* db-card -------- start*/
 2.db-card{margin:2.5rem 3rem;background:var(--card-background);border-radius: 7px;box-shadow: 0 6px 10px 0 #00000053;margin-left:auto;margin-right:auto;}
 3.db-card-subject{display: flex;align-items:flex-start;line-height:1.6;padding:12px;position:relative;}
 4.dark .db-card{background:var(--card-background);}
 5.db-card-content {flex:1 1 auto;}
 6.db-card-post {width: 100px;margin-right: 15px;display: flex;flex: 0 0 auto;}
 7.db-card-title {margin-bottom: 3px;font-size: 14px;color: var(--card-text-color-main);;}
 8.db-card-title a{text-decoration: none!important}
 9.db-card-abstract,.db-card-comment{font-size:13px;overflow: auto;max-height:10rem;color: var(--card-text-color-main);;}
10.db-card-cate{position: absolute;top:0;right:0;background:#f99b01;padding:1px 8px;font-size:small;font-style:italic;border-radius:0 8px 0 8px;text-transform:capitalize;}
11.db-card-post img{width: 100px!important;height: 150px!important;border-radius: 4px;-o-object-fit: cover;object-fit: cover;}
12.rating{margin: 0 0 5px;font-size:13px;line-height: 1;display: flex;align-items: center;}
13.rating .allstardark{position:relative;color: #f99b01;height: 16px;width: 80px;background-size: auto 100%;margin-right: 8px;background-repeat: repeat;background-image: url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMzIiIGhlaWdodD0iMzIiPjxwYXRoIGQ9Ik05MDguMSAzNTMuMWwtMjUzLjktMzYuOUw1NDAuNyA4Ni4xYy0zLjEtNi4zLTguMi0xMS40LTE0LjUtMTQuNS0xNS44LTcuOC0zNS0xLjMtNDIuOSAxNC41TDM2OS44IDMxNi4ybC0yNTMuOSAzNi45Yy03IDEtMTMuNCA0LjMtMTguMyA5LjMtMTIuMyAxMi43LTEyLjEgMzIuOS42IDQ1LjNsMTgzLjcgMTc5LjEtNDMuNCAyNTIuOWMtMS4yIDYuOS0uMSAxNC4xIDMuMiAyMC4zIDguMiAxNS42IDI3LjYgMjEuNyA0My4yIDEzLjRMNTEyIDc1NGwyMjcuMSAxMTkuNGM2LjIgMy4zIDEzLjQgNC40IDIwLjMgMy4yIDE3LjQtMyAyOS4xLTE5LjUgMjYuMS0zNi45bC00My40LTI1Mi45IDE4My43LTE3OS4xYzUtNC45IDguMy0xMS4zIDkuMy0xOC4zIDIuNy0xNy41LTkuNS0zMy43LTI3LTM2LjN6TTY2NC44IDU2MS42bDM2LjEgMjEwLjNMNTEyIDY3Mi43IDMyMy4xIDc3MmwzNi4xLTIxMC4zLTE1Mi44LTE0OUw0MTcuNiAzODIgNTEyIDE5MC43IDYwNi40IDM4MmwyMTEuMiAzMC43LTE1Mi44IDE0OC45eiIgZmlsbD0iI2Y5OWIwMSIvPjwvc3ZnPg==);
14}
15.rating .allstarlight{position: absolute;left: 0;color: #f99b01;height:16px;overflow: hidden;background-size: auto 100%;background-repeat: repeat;background-image: url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMzIiIGhlaWdodD0iMzIiPjxwYXRoIGQ9Ik05MDguMSAzNTMuMWwtMjUzLjktMzYuOUw1NDAuNyA4Ni4xYy0zLjEtNi4zLTguMi0xMS40LTE0LjUtMTQuNS0xNS44LTcuOC0zNS0xLjMtNDIuOSAxNC41TDM2OS44IDMxNi4ybC0yNTMuOSAzNi45Yy03IDEtMTMuNCA0LjMtMTguMyA5LjMtMTIuMyAxMi43LTEyLjEgMzIuOS42IDQ1LjNsMTgzLjcgMTc5LjEtNDMuNCAyNTIuOWMtMS4yIDYuOS0uMSAxNC4xIDMuMiAyMC4zIDguMiAxNS42IDI3LjYgMjEuNyA0My4yIDEzLjRMNTEyIDc1NGwyMjcuMSAxMTkuNGM2LjIgMy4zIDEzLjQgNC40IDIwLjMgMy4yIDE3LjQtMyAyOS4xLTE5LjUgMjYuMS0zNi45bC00My40LTI1Mi45IDE4My43LTE3OS4xYzUtNC45IDguMy0xMS4zIDkuMy0xOC4zIDIuNy0xNy41LTkuNS0zMy43LTI3LTM2LjN6IiBmaWxsPSIjZjk5YjAxIi8+PC9zdmc+);}
16@media (max-width:550px) {
17	.db-card{margin:0.8rem 1rem;}
18	.db-card-comment{display: none;}
19}
20/* db-card -------- end */

1{{< book url="#" image="1.png" title="《JAY》 [台] 周杰倫" rate="9" rate_float="9.2" brief="text" tag="Album" >}}

1<div class="quote-center">
2  {{- $content := .Inner | markdownify -}} 
3  {{- if not (strings.HasPrefix $content "<p>") }} 
4    {{ printf `</p><p>%s</p>` $content | safeHTML }} 
5  {{- else }} 
6    {{- $content }} 
7  {{- end -}}
8</div>

 1.quote-center {
 2  background-color:#84c4e230!important;
 3  position: relative;
 4  border-left: none;
 5  padding-left: 0;
 6  padding: 20px!important;
 7  border-radius: 5px!important;
 8  border-top: 0px solid var(--color-markdown-blockquote-border);
 9  border-bottom: 0px solid var(--color-markdown-blockquote-border);
10  p {
11    text-align: center !important;
12    margin-top: 1.5em!important;
13    margin-bottom: 1.5em!important;
14    font-weight: bold;
15  }
16  &::before {
17    position: absolute;
18    left: 0;
19    content: '“---';
20    color: #8aa2d3;
21    font-size: 2.5em;
22    font-weight: normal;
23    margin-top: -5%;
24    margin-left: 1%;
25    height: 90%;
26  }
27  &::after {
28    position: absolute;
29    right: 0;
30    content: '---”';
31    color: #8aa2d3;
32    font-size: 2.5em;
33    font-weight: normal;
34    margin-top: -6%;
35    margin-right: 1%;
36    height: 90%;
37  }
38}

1{{< quote-center >}}
2人生代代无穷已，江月年年望相似。<br>不知江月待何人，但见长江送流水。
3{{< /quote-center >}}

 1<style>
 2.mainvlr {
 3  margin:20px;
 4  font-size: 20px;
 5  letter-spacing: 2px;
 6}
 7
 8.vlr{
 9  writing-mode: vertical-lr;
10}
11
12.vrl{
13  writing-mode: vertical-rl;
14  unicode-bidi: bidi-override;
15  border: 1px solid;
16  padding: 5px;
17  margin: 5px;
18  margin-right: 5px;
19  word-wrap: break-word;
20  overflow-y:auto;
21  height: {{ .Get "height" | default "500" }}px;
22  width: 100%;
23}
24</style>
25
26<div class="vrl" id="vrlmain">
27
28<div class="mainvlr">
29
30{{ .Inner | markdownify }}
31
32</div>
33
34</div>
35
36<script>
37window.scrollTo(document.body.scrollWidth - 500, 0);
38</script>