reco主题-时间轴样式
梓泓 2020-08-20 vuepressvuepress-theme-reco
# 效果
点击上面的链接观看效果
# 配置
先参照vuepress-theme-reco文档时间轴配置
# 添加导航栏按钮
module.exports = {
theme: 'reco', // 主题
themeConfig: {
nav: [
{ text: 'TimeLine', link: '/timeline/', icon: 'reco-date' } //导航栏添加时间轴按钮
]
}
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# 写文章时添加日期
---
title: 时间轴样式
date: 2020-08-20
categories:
- vuepress
tags:
- vuepress
- vuepress-theme-reco
---
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# 样式
在指定目录创建index.styl文件
/* change /docs/.vuepress/styles/index.styl */
.timeline-content
width calc(100% - 20px)
left 20px
max-width 600px
margin 30px auto 0 auto
padding-bottom 50px
.year-wrapper
li
margin-top 10px
border 0 !important
padding 2.5px !important
.title
color #fff !important
padding 10px 20px 10px 20px !important
// background-image linear-gradient(to right, #FEB692, #EA5455)
background-image linear-gradient(to right, #fe92ba, #bb349d)
border-radius 50px
white-space nowrap
overflow hidden
display block
width 100%
transition all 1s
text-overflow ellipsis
.date
position absolute
left -60px
top 10px
&:before
left 42px !important
top 12px !important
transition all 1s
&:hover
.title
transform translateX(20px)
.date
color #bb349d !important
&:before
transform scale(2)
background #bb349d !important
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44