1<div class="timeline-container"> <!--时间线容器-->
 2  {{ range $index, $page := .Data.Pages.ByDate.Reverse }}<!--倒序遍历页面-->
 3    <div class="timeline-item"><!--每个页面构成的项-->
 4    
 5      <div class="timeline-item-line-date"><!--时间-->
 6        <div class="timeline-year">{{ .PublishDate.Year }}</div><!--年份-->
 7        <span class="timeline-date">{{ .PublishDate.Month | int }}-{{ .PublishDate.Day }}</span><!--日期-->
 8      </div>
 9      
10      <div class = "timeline-item-line-container"><!--点线容器-->
11        <div class="timeline-item-line"></div><!--线-->
12        <div class="timeline-item-dot"></div><!--点-->
13        <div class="timeline-item-line"></div><!--线-->
14      </div>
15       
16       <div class ="timeline-triangle-left"></div><!--小三角-->
17       
18       <a href="{{ .Permalink }}"><!--整个卡片都加上超链接-->
19         <div class = "timeline-item-card"><!--内容卡片-->
20           {{ if .Params.banner}}<!--如果有题图，卡片加上图-->
21             <img src="{{ .Params.banner | absURL}}" class="card-pic">
22           {{ end }}
23           <div class = "timeline-item-text"><!--卡片的文字部分-->
24             <div class = "timeline-item-text-title">{{ .Title }}</div>
25             <div class = "timeline-item-text-body">
26               {{ if .Description }}{{ .Description }}
27               {{ else }}{{ .Summary }}{{ end }}
28             </div>
29           </div>
30         </div>
31       </a>
32       
33     </div>
34  {{ end}}
35</div>

  1.timeline-container {
  2  width: 100%;
  3  position: relative;
  4  margin-left: 20px;
  5  margin-top: 40px;
  6}  
  7
  8.timeline-item {
  9  display:flex; /*第一层弹性容器*/
 10  flex-direction: row;/*容器内部元素横向排列*/
 11  gap: 5px;/*容器元素间隔*/
 12}  
 13
 14.timeline-item a,
 15.timeline-item:hover {
 16  text-decoration: none; /*覆盖主题内的超链接自动加下划线样式*/
 17}
 18
 19.timeline-item-line-date { /*日期*/
 20  color: #6e6e6e; /*字色*/
 21  margin: auto 0; /*日期元素垂直居中*/
 22  line-height: 1; /*调整行高*/
 23  text-align: right; /*字体右居中*/
 24  .timeline-year {
 25    font-size: 20px; /*年份放大*/
 26    color: black; /*年份自测*/
 27  }
 28}
 29
 30.timeline-item-line-container { /*点线容器*/
 31  width: 40px; 
 32  display: flex; /*弹性容器*/
 33  flex: 0; /*容器不增长宽度*/
 34  flex-direction: column; /*容器内部元素竖向排列*/
 35  position: relative;
 36  align-items: center; /*内部元素在排列方向上居中*/
 37  margin-right: 5px;
 38  margin-left: 5px;
 39}
 40
 41.timeline-item-line { /*线*/
 42  background-color: #444; /*黑色线*/
 43  flex: 1; /*线自动跟随容器高度增长*/
 44  justify-content: center; /*和容器主轴方向垂直轴的朝向居中*/
 45  width: 5px; /*线的宽度*/
 46}
 47
 48.timeline-item-dot{ /*点*/
 49  width: 2.5rem; /*宽*/
 50  height: 2.5rem; /*高*/
 51  border-radius: 50%; /*圆*/
 52  margin: 0.5rem 0; /*上下加间隔*/
 53  border: 0.5rem solid #9055a2; /*定义粗细和颜色*/
 54}
 55
 56.timeline-triangle-left {
 57  width: 0;
 58  height: 0;
 59  border-top: 0.625rem solid transparent;/*三角的大小*/
 60  border-bottom: 0.625rem solid transparent;/*三角的大小*/
 61  border-right: 1.25rem solid #9055a2;/*三角的大小和颜色*/
 62  margin: auto 0; /*垂直居中*/
 63}
 64
 65.timeline-item-card {
 66  margin: 40px 15px;/*卡片和其他卡片间隔*/
 67  width: min(750px, 95%);/*卡片宽度，750px或者95%里更小的值*/
 68  border-radius: 5px;/*卡片圆角*/
 69  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, 6%);/*卡片阴影*/
 70  background-color: #fffffa;/*卡片背景颜色*/
 71}
 72
 73.timeline-item-card:hover { /*鼠标悬浮时卡片散发有色阴影*/
 74  box-shadow: 0 0 3px 4px #d1b7d9;
 75}
 76
 77.card-pic{ /*卡片图片处理*/
 78  border-top-left-radius: 5px; /*图片左上圆角*/
 79  border-top-right-radius: 5px; /*图片右上圆角*/
 80  -o-object-fit: cover; /*图片覆盖容器框架*/
 81  object-fit: cover;
 82  width: 100%;
 83  max-height: 300px; /*图片最大高度300像素*/
 84}
 85
 86.timeline-item-text{
 87  margin-top: 1rem;
 88  padding: 1rem 2rem; /*文字加内部的包裹*/
 89}
 90
 91.timeline-item-text-title {
 92  font-weight: bold; /*标题粗体*/
 93  font-size: 20px; /*标题字体大小*/
 94  line-height: 1.25; /*标题行高修改*/
 95}
 96
 97.timeline-item-text-body {
 98  color: #707070 !important; /*主题对在链接内的颜色有设置，强行覆盖*/
 99  margin-top: 0.5em;
100}
101
102
103@media screen and (max-width: 600px) { /*屏幕宽度小于600像素时处理，用于调整手机视图*/
104
105  .timeline-container {
106    margin-left: 0; /*容器左侧不再空格*/
107  }
108  
109  .timeline-item-line-date {
110    font-size: 13px; /*修改日期字体大小*/
111    .timeline-year{
112      font-size: 16px; /*修改日期字体大小*/
113    }
114  }
115
116  .timeline-item-line-container { /*修改点线容器*/
117    margin-right: 0px; /*右侧空间*/
118    margin-left: 5px; /*左侧空间*/
119  }
120
121  .timeline-item-line {
122    width: 4px; /*线的宽度*/
123  }
124
125  .timeline-item-dot {
126    border: 0.4rem solid #9055a2; /*点的粗细*/
127    width: 2rem; /*宽*/
128    height: 2rem; /*高*/
129  }
130
131  .timeline-triangle-left { /*三角的大小*/
132    border-top: 0.5rem solid transparent;
133    border-bottom: 0.5rem solid transparent;
134    border-right: 1rem solid #9055a2;
135  }
136
137  .timeline-item-card { /*卡片修改*/
138    width: 100%;
139    margin-left: 5px;
140  }
141
142  .timeline-item-text {
143    margin-top: 0;
144    font-size: small;
145    .timeline-item-text-title {
146      font-weight: bold;
147      font-size: 18px; /*字体大小*/
148      line-height: 1.25; /*行高*/
149    }
150  }
151
152}

1{。{< timeline >}}
2
3{。{< event date="2006-10-24" title="Taylor Swift" attribution="*Taylor Swift* album cover, From [Swiftipedia](https://taylorswift.fandom.com/wiki/Taylor_Swift)" imgURL="img/posts/music/TaylorSwift-Taylor_Swift.jpg" content="***Taylor Swift*** is the debut studio album by the American singer-songwriter Taylor Swift. Swift relocated from Pennsylvania to Nashville, Tennessee at 14 to sign a songwriting contract with Sony/ATV Tree Music Publishing. <p>Her recording contract with Big Machine in 2005 enabled her to work on the album with the producer Nathan Chapman during her freshman year of high school.</p>" >}}
4
5{。{< event date="2021-04-09" title="Fearless (Taylor's Version)"  content="***Fearless (Taylor's Version)*** is the first re-recorded album by Taylor Swift. A re-recording of Swift’s second studio album, _Fearless_ (2008), it is part of her re-recording project following the 2019 dispute over the master recordings of her back catalog. " >}}
6
7{。{< /timeline >}}

1<div class="timeline-container-shortcode">
2    {{ .Inner }}
3</div>

 1{{- $content := .Get "content" -}}
 2{{- $eventContent := $content | $.Page.RenderString | safeHTML -}}
 3
 4<div class="timeline-item">
 5  {{ if .Get "date" }}<!--如果有日期显示日期-->
 6  {{ $dateString := .Get "date" }}
 7  {{ $eventDate := time.AsTime $dateString }}
 8  <div class="timeline-item-line-date">
 9    <div class="timeline-year">{{ $eventDate.Year }}</div>
10    <span class="timeline-date">{{ $eventDate.Month | int }}-{{ $eventDate.Day }}</span>
11  </div>
12  {{ end }}
13
14<!--点和线-->
15  <div class = "timeline-item-line-container">
16    <div class="timeline-item-line"></div>
17    <div class="timeline-item-dot"></div>
18    <div class="timeline-item-line"></div>
19  </div>
20
21<!--小三角-->
22  <div class ="timeline-triangle-left"></div>
23
24  <div class = "timeline-item-card">
25    {{ if .Get "imgURL" }}<!--如果有图片-->
26      {{ $imagesrc := .Get "imgURL" }}
27      {{ $baseURL := .Site.BaseURL }}
28      {{ $eventPic := print $baseURL "/" $imagesrc }}
29      <img data-fancybox="timeline-shortcodes" data-caption="{{ .Get "title" }},{{- if .Get "date"}}{{ $dateString := .Get "date" }}{{ $eventDate := time.AsTime $dateString }}{{ $eventDate.Format "2006-01-02" }}{{ end -}}" src="{{ $eventPic }}" class="card-pic">
30      {{ if .Get "attribution" }}<!--如果图片有署名-->
31        {{ $attribution := .Get "attribution" }}
32        {{ $imageAttr := $attribution | markdownify  }}
33        <div class="attribution">{{ $imageAttr }}</div>
34      {{ end }}
35    {{ end }}
36
37    <div class = "timeline-item-text">
38      {{ if .Get "title" }}<!--如果有标题-->
39      <div class = "timeline-item-text-title">{{ .Get "title" }}</div>
40      {{ end }}
41      <div class = "timeline-item-text-body">{{ $eventContent }}</div>
42    </div>
43  </div>
44</div>

1[markup]
2  [markup.goldmark]
3    [markup.goldmark.renderer]
4      unsafe = true

 1.timeline-container-shortcode {
 2  width: 100%;
 3  position: relative;
 4  margin-left: 20px;
 5  margin-top: 40px;  
 6
 7  .timeline-item-card:hover {
 8    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, 6%);/*覆盖悬浮鼠标时卡片阴影的样式*/
 9  }  
10
11  .timeline-item-text {
12    border-radius: 5px;
13    margin-top: 0;
14    padding-top: 0;
15    .timeline-item-text-body {
16      line-height: 1.3;
17    }
18  }  
19
20  p {
21    margin: 0 0 0.5em 0;
22  }
23
24  .attribution { /*署名样式*/
25    max-width: 100%;
26    width: 100%;
27    font-size:small;
28    margin-top: .25em;
29    padding: 0 1em;
30    color: #707070;
31    text-align: right;
32    line-height: 1.25;
33  }
34}
35
36@media screen and (max-width: 600px) { /*屏幕宽度小于600像素时处理，用于调整手机视图*/
37  .timeline-container-shortcode {
38    margin-left: 0;
39    .attribution {
40      font-size: 10px;
41    }
42  }
43}