Sync/hugo-theme-stack
1
0
Fork 1
mirror of https://github.com/CaiJimmy/hugo-theme-stack.git synced 2025-04-28 19:43:31 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: add netease and timeline shortcode

Browse Source
This commit is contained in:
aka 2023-11-16 01:22:05 +08:00
parent 5f38e007d5
commit fc481c8fb4
2 changed files with 150 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
layouts/shortcodes/netease.html Normal file
View File

@ -0,0 +1 @@
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=100% height=100 src="//music.163.com/outchain/player?type=2&id={{ index .Params 0 }}&auto={{ index .Params 1 }}&height=66"></iframe>

149
layouts/shortcodes/timeline.html Normal file
View File

@ -0,0 +1,149 @@
{{- $date := .Get "date" -}} {{- $title := .Get "title" -}} {{- $description := .Get "description" -}} {{- $tags := .Get "tags" -}}{{- $url := .Get "url" -}}
<div class="timeline__row">
<div class="timeline__time">
<div class="timeline__time">{{ $date }}</div>
<div class="timeline__split-line"></div>
</div>
<div class="timeline__content">
<a href="{{ $url }}">
<div class="timeline__title">{{ $title }}</div>
</a>
<!-- title 可点击，默认就是跳转时间轴所在页 -->
<div class="timeline__description">
{{ $description }}
</div>
</div>
</div>
<style>
.timeline {
display: flex;
flex-direction: column;
}
.timeline__row {
display: flex;
padding-left: 4%;
}
.timeline__time {
color: var(--accent-color-darker);
font-size: 14px;
text-transform: uppercase;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
padding: 0.5rem 0;
}
.timeline__time-text {
margin: 0;
}
.timeline__split-line {
position: absolute;
top: 0.5rem;
right: -20px;
height: 100%;
width: 2px;
background-color: var(--body-background);
z-index: 0;
}
.timeline__split-line:before {
content: "";
position: absolute;
top: 24%;
right: -4px;
transform: translateY(-50%);
width: 10px;
height: 10px;
background-color: var(--body-background);
box-shadow: 0 0 0 4px var(--theme);
border-radius: 50%;
border: 0px solid var(--body-background);
z-index: -1;
}
.timeline__content {
flex: 1;
margin-left: 4.5rem;
padding: 0.5rem 0 1.2rem 0;
}
.timeline__title {
margin: 0;
margin-bottom: 2px;
padding-top: 3px;
margin-left: 0.5rem;
color: var(--content);
font-family: var(--font-family-teshu);
font-size: 19px;
font-weight: 600;
width: fit-content;
display: inline-block;
vertical-align: middle;
/* 垂直居中对齐 */
}
.timeline__description {
font-size: 15px;
line-height: 1.6;
color: var(--accent-color-darker);
overflow: hidden;
text-overflow: ellipsis;
margin: 0.5rem 0 0.4rem 1.5rem;
/* 添加 1.5rem 的左侧内边距 */
}
/* 为类名为 "timeline__tag-style" 的标签定义颜色 */
.timeline__tag-style {
background-color: #c581da;
/* 替换为你希望的颜色 */
border-color: #c581da;
/* 与背景色相同或不同，根据需要自定义 */
color: #FFFFFF;
/* 根据需要选择文本颜色 */
}
/* 为类名为 "timeline__tag-article" 的标签定义颜色 */
.timeline__tag-article {
background-color: #92d392;
/* 替换为你希望的颜色 */
border-color: #92d392;
/* 与背景色相同或不同，根据需要自定义 */
color: #000000;
/* 根据需要选择文本颜色 */
}
/* 为类名为 "timeline__tag-page" 的标签定义颜色 */
.timeline__tag-page {
background-color: #707070;
/* 替换为你希望的颜色 */
border-color: #707070;
/* 与背景色相同或不同，根据需要自定义 */
color: #FFFFFF;
/* 根据需要选择文本颜色 */
}
@media screen and (max-width: 768px) {
.timeline__time {
font-size: 14px;
/* 在小屏幕上使用较小的字体大小 */
}
.timeline__title {
font-size: 16px;
/* 在小屏幕上使用较小的字体大小 */
}
.timeline__description {
font-size: 14px;
/* 在小屏幕上使用较小的字体大小 */
}
}
</style>