# 内容参考
- VuePress官网 (opens new window)
- vuepres-theme-reco主题 (opens new window)
- vuepress-theme-reco个人向优化 (opens new window)
# 正文
# 1. 增加主页箭头效果
<!-- 创建一个组件 -->
<!-- 上下移动箭头 -->
<template>
<div class="down-arrow" id="down-arrow" @click="scrollTo"></div>
</template>
<script>
export default {
props: {
height: {
type: String,
default: "",
},
},
methods: {
scrollTo() {
// 这一步是获取背景图高度
const height =
this.height || parseInt(this.$frontmatter.bgImageStyle.height);
window.scrollTo(0, height);
},
},
};
</script>
<!-- 主要是箭头动画效果 -->
<style lang="stylus">
.down-arrow::after {
content: '';
position: absolute;
display: block;
bottom: -5 rem;
left: calc(50% - 1.5rem);
width: 1.5rem;
height: 1.5rem;
border: 0.25rem solid #fff;
border-top: none;
border-left: none;
transform-origin: 50% 50%;
transform: rotate(45deg);
-webkit-animation: arrowMove-data 1.2s infinite;
animation: arrowMove-data 1.2s infinite;
}
@keyframes arrowMove-data {
0% {
transform: translateY(130px) rotate(45deg);
}
100% {
transform: translateY(150px) rotate(45deg);
border: 0.25rem solid rgba(255, 255, 255, 0.5);
border-top: none;
border-left: none;
}
}
</style>
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
45
46
47
48
49
50
51
52
53
54
55
56
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
45
46
47
48
49
50
51
52
53
54
55
56
# 2. Boxx组件放到主页
// 在index.vue中需要插入到位置增加
<ModuleTransition delay="0.12">
<div class="boxx">
<Boxx changeTime="20000" />
</div>
</ModuleTransition>
// 再调整样式
.boxx {
position relative
margin 10px auto 0
padding: 0 auto;
width 100%;
max-width $homePageWidth
overflow: hidden;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# 3. Nav导航条动态显隐
/* 主要在Navbar.vue中把原先的html标签包住，整体控制 */
<div v-show="isVisible">
...
</div>
/* 另外还有监听页面的变化 */
const handScorll = () => {
let visible = true;
if (instance.$frontmatter.bgImageStyle) {
const bgHeight = parseInt(instance.$frontmatter.bgImageStyle.height) || 940;
visible = window.pageYOffset > bgHeight - 50
}
instance.isVisible = visible
// Nav显隐
// instance.$el.style.display = visible ? "" : "none"
}
handScorll()
window.addEventListener('resize', handScorll)
window.addEventListener('scroll', handScorll) // 监听滚动
// 用来处理页面切换，Nav状态可能没刷新问题
instance.$router.afterEach(handScorll)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# 4. 增加拦截器
Common.vue中
const initRouterHandler = () => {
// 实现拦截功能
instance.$router.beforeEach((to, from, next) => {
// 跳转到工具
if (to.path == "/categories/Utils/") {
return next("/views/utils/Utils.html")
}
next()
})
instance.$router.afterEach(() => {
isSidebarOpen.value = false
})
}
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13