博客搭建 | Hugo Stack 主题装修笔记（3）

前言

接上文，继续整理好玩的短代码~

1️⃣ 卡片样式

这里插入链接假装是卡片式链接。
好像不能插入图片？
换行要写空标签。

代码：

html

1#layouts\shortcodes\card.html
2{{- $raw := (markdownify .Inner | chomp) -}} {{- $block := findRE
3    "(?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"
4    $raw 1 -}}
5    <div class="mycard">
6      <div class="content">{{- if or $block (not $raw) }}{{ $raw }}{{ else }} {{ $raw }} {{ end -}}</div>
7    </div>

 1#assets\scss\custom.scss
 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 >}
2可以在这里插入链接假装是卡片式链接。
3<br>
4好像不能插入图片？
5<br>
6换行需要空标签。实际使用需要双括号。
7{< /card >}
8# 实际使用{{ }}

2️⃣ 时间轴

2026-05-16

blog

美化博客

重新开启博客写作

代码：

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

使用：

1# 实际 {{ }}
2{< timeline date="" title="" description="" tags=""  >}

3️⃣ 图片轮播

代码：

html

 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}

hugo.ymal/config.ymal/–> params–> 添加enableimgloop: true

使用：

1//实际使用替换成双括号。
2{< imgloop "1.jpg,2.jpg,3.jpg" >}

下面的暂时用不到记录一下~

4️⃣瀑布流相册

代码：

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

在 layouts/partials/footer/custom.html 中插入:

 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<gallery>![](1.jpg)![](2.jpg)![](3.jpg)</gallery> // markdown图片
2
3<gallery>// 外链图片
4    <img src="https://xxxxx.jpg">
5    <img src="https://xxxxx.jpg">
6    <img src="https://xxxxx.jpg">
7</gallery>

5️⃣ 多图排版

代码：

1//custom.css
2.post-content p:has(> img:nth-child(2)){column-count:2;column-gap:8px;margin:6px 0;}
3.post-content p:has(> img:nth-child(3)){column-count:3;}
4.post-content p:has(> img:nth-child(4)){column-count:4;}
5.post-content p:has(> img:nth-child(5)){column-count:5;}
6.post-content p:has(> img:nth-child(6)){column-count:4;}
7.post-content p:has(> img:nth-child(2)) img{display:inherit;}
8.post-content p:has(> img:nth-child(6)) img{margin-bottom:8px;}

使用：

1![1](1.jpg)
2![2](2.jpg)
3![3](3.jpg)
4
5![1](1.jpg)
6![2](2.jpg)

6️⃣ PPT/PDF 插入

代码：

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

使用：

1{< pdf src="这里放pdf链接，本地文件当然也可以！跟md文件放在一个文件夹里就行。使用的时候请换成双括号。" >}

7️⃣ 哔哩哔哩

代码：

 1// bilibili.html
 2{{ $vid := (.Get 0) }}
 3{{ $videopage := default 1 (.Get 1) }}
 4{{ $basicQuery := querify "page" $videopage "high_quality" 1 "as_wide" 1 }}
 5{{ $videoQuery := "" }}
 6
 7{{ if strings.HasPrefix (lower $vid) "av" }}
 8    {{ $videoQuery = querify "aid" (strings.TrimPrefix "av" (lower $vid)) }}
 9{{ else if strings.HasPrefix (lower $vid) "bv" }}
10    {{ $videoQuery = querify "bvid" $vid }}
11{{ else }}
12    <p>Bilibili 视频av号或BV号错误！请检查视频av号或BV号是否正确</p>
13    <p>当前视频av或BV号：{{ $vid }}，视频分P：{{ $videopage }}</p>
14{{ end }}
15
16<div class="video-wrapper">
17    <iframe src="https://player.bilibili.com/player.html?{{ $basicQuery | safeURL }}&{{ $videoQuery | safeURL }}"
18            scrolling="no"
19            frameborder="no"
20            framespacing="0"
21            allowfullscreen="true"
22    >
23    </iframe>
24</div>

使用：

1{< bilibili BV1V7411d7iW 0 1 >} //BV号，0/1为是否自动播放,分p数；使用记得双括号

截止，博客的装修告一段落，接下来要开始搞内容了。