Skip to content

Commit 7fd914a

Browse files
NeserCodeNeserCode
committed
add back to top
1 parent dcbbe1e commit 7fd914a

File tree

6 files changed

+110
-30
lines changed

6 files changed

+110
-30
lines changed

‎docs/.vuepress/theme/lib/client/components/BackToTop.vue‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<script lang="ts" setup>
2+
import { ArrowUpIcon } from "@heroicons/vue/24/outline"
3+
import { onMounted, ref } from "vue"
4+
import { useElementSrcolled } from "../composables/useComponentUtils"
5+
import { Hook } from "../composables/useHook"
6+
import { useRoute } from "vuepress/client"
7+
8+
const scrollToTop = () => {
9+
window.scrollTo({
10+
top: 0,
11+
behavior: "smooth",
12+
})
13+
}
14+
15+
const progress = ref("0.00")
16+
const $route = useRoute()
17+
onMounted(() => {
18+
Hook.onRoute(() => {
19+
const scrollUtils = useElementSrcolled(".v-nc-content")
20+
if (scrollUtils)
21+
scrollUtils.onScroll((total, scrolled) => {
22+
progress.value = ((scrolled / total) * 100).toFixed(2)
23+
})
24+
}, $route)
25+
})
26+
</script>
27+
28+
<template>
29+
<div class="v-nc-back-to-top">
30+
<button type="button" class="back-btn" @click="scrollToTop()">
31+
<ArrowUpIcon class="icon" />
32+
</button>
33+
<span class="progress">Read {{ progress }}%</span>
34+
</div>
35+
</template>
36+
37+
<style lang="postcss" scoped>
38+
.v-nc-back-to-top {
39+
@apply w-full max-w-48 h-fit inline-flex justify-start items-center p-2 mt-2 gap-x-2
40+
transition-all ease-in-out duration-200;
41+
}
42+
43+
.back-btn {
44+
@apply w-fit h-full p-1
45+
rounded
46+
bg-green-400 dark:bg-green-700
47+
text-sm transition-all ease-in-out duration-200;
48+
}
49+
.back-btn .icon {
50+
@apply h-4 w-fit;
51+
}
52+
53+
.progress {
54+
@apply text-xs opacity-60;
55+
}
56+
</style>

‎docs/.vuepress/theme/lib/client/components/Home.vue‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,12 @@
1-
<script lang="ts" setup></script>
1+
<script lang="ts" setup>
2+
import PageFooter from "./PageFooter.vue"
3+
</script>
24

35
<template>
46
<div class="v-nc-theme-home">
5-
<h1>Home</h1>
6-
<RouteLink to="/tags/"> Tags </RouteLink>
7-
<RouteLink to="/time/"> Timeline </RouteLink>
8-
9-
<main class="v-nc-theme-page">
10-
<div class="page-main"><Content /></div>
11-
</main>
7+
<div class="page-main">
8+
<PageFooter />
9+
</div>
1210
</div>
1311
</template>
1412

‎docs/.vuepress/theme/lib/client/components/Page.vue‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import PageNav from "./PageNav.vue"
66
import SubToc from "./SubToc.vue"
77
import Comment from "./Comment.vue"
88
import PageFooter from "./PageFooter.vue"
9+
import BackToTop from "./BackToTop.vue"
910
1011
import { computed, ref } from "vue"
1112
import { usePageData, usePageFrontmatter, useRoute } from "vuepress/client"
@@ -112,6 +113,7 @@ setupHeaders()
112113
<div class="page-side-right">
113114
<div class="page-side-container">
114115
<SubToc v-if="isSidebarCategroyActive" />
116+
<BackToTop />
115117
<slot name="page-side-right"> </slot>
116118
</div>
117119
</div>
@@ -191,22 +193,20 @@ setupHeaders()
191193
}
192194
193195
/* Inline link */
194-
.v-nc-theme-page
195-
.page-main
196+
.page-main
196197
a:not(.header-anchor):not(.tag-item):not(.page-back):not(
197198
.footnote-anchor
198199
):not(.article-title) {
199200
@apply relative inline-flex justify-center items-center p-px
200201
text-green-600 text-sm underline z-10 -translate-y-px;
201202
}
202-
.v-nc-theme-page
203-
.page-main
203+
.page-main
204204
a:not(.header-anchor):not(.tag-item):not(.route-link):not(
205205
.article-title
206206
)[target="_blank"]:not([href^="#"]) {
207207
@apply mr-3 pr-1 text-sky-500;
208208
}
209-
.v-nc-theme-page .page-main a[target="_blank"]:not([href^="#"]):after {
209+
.page-main a[target="_blank"]:not([href^="#"]):after {
210210
content: "↗";
211211
@apply absolute inline-block left-full
212212
text-xs no-underline -translate-x-0;

‎docs/.vuepress/theme/lib/client/components/PageFooter.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ const footerLinks = computed(() =>
7171
}
7272
7373
.v-nc-page-footer .normal-info {
74-
@apply w-fit inline-flex gap-x-2 pt-2
74+
@apply w-fit inline-flex gap-x-2 pt-6
7575
border-t border-slate-400 dark:border-slate-700
7676
transition-all ease-in-out duration-300;
7777
}

‎docs/.vuepress/theme/lib/client/composables/useComponentUtils.ts‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
import { useDebounceFn, useEventListener } from "@vueuse/core"
2+
import { useRoute } from "vuepress/client"
3+
14
import type {
25
DefaultThemePageFrontmatter,
36
FrontmatterPluginState,
@@ -47,3 +50,26 @@ export const usePluginState = (
4750
} else if (states.plugins) return !(states.plugins[keyName] === false)
4851
else return true
4952
}
53+
54+
export const useElementSrcolled = (elementSelector: string) => {
55+
if (!document) return false
56+
const element = document.querySelector(elementSelector)
57+
if (!element) return false
58+
59+
return {
60+
onScroll: (callback: (total: number, scrolled: number) => void) => {
61+
const listener = useDebounceFn(() => {
62+
let rects = element.getBoundingClientRect()
63+
let scrolled =
64+
rects.height - rects.bottom > 0
65+
? rects.height - rects.bottom > rects.height
66+
? rects.height
67+
: rects.height - rects.bottom
68+
: 0
69+
if (rects.height === 0) return
70+
callback(rects.height, scrolled)
71+
}, 100)
72+
useEventListener(document, "scroll", listener)
73+
},
74+
}
75+
}

‎docs/blog/about/aboutme.md‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -25,33 +25,33 @@ plugins:
2525

2626
### 插件
2727

28-
- **vuepress-plugin-reading-time2 ^2.0.0-beta.110**
28+
#### **vuepress-plugin-reading-time2 ^2.0.0-beta.110**
2929

30-
针对该插件提供的数据，自定义开发 reading-time 与 reading-line 组件，协助改进阅读体验。
30+
针对该插件提供的数据，自定义开发 reading-time 与 reading-line 组件，协助改进阅读体验。
3131

32-
- [zh-CN](https://vuepress-theme-hope.github.io/v2/reading-time/zh/)
33-
- [en-US](https://vuepress-theme-hope.github.io/v2/reading-time/)
32+
- [zh-CN](https://vuepress-theme-hope.github.io/v2/reading-time/zh/)
33+
- [en-US](https://vuepress-theme-hope.github.io/v2/reading-time/)
3434

35-
- **vuepress-plugin-copy-code4 ^2.0.0-beta.110**
35+
#### **vuepress-plugin-copy-code4 ^2.0.0-beta.110**
3636

37-
为代码块提供 _一键复制_ 的功能，同时适配移动端。
37+
为代码块提供 _一键复制_ 的功能，同时适配移动端。
3838

39-
- [zh-CN](https://vuepress-theme-hope.github.io/v2/copy-code/zh/)
40-
- [en-US](https://vuepress-theme-hope.github.io/v2/copy-code/)
39+
- [zh-CN](https://vuepress-theme-hope.github.io/v2/copy-code/zh/)
40+
- [en-US](https://vuepress-theme-hope.github.io/v2/copy-code/)
4141

42-
- **vuepress-plugin-blog2 ^2.0.0-beta.110**
42+
#### **vuepress-plugin-blog2 ^2.0.0-beta.110**
4343

44-
为 Vuepress2 提供 分类标签等数据，是核心组件之一。
44+
为 Vuepress2 提供 分类标签等数据，是核心组件之一。
4545

46-
- [zh-CN](https://vuepress-theme-hope.github.io/v2/blog/zh/)
47-
- [en-US](https://vuepress-theme-hope.github.io/v2/blog/)
46+
- [zh-CN](https://vuepress-theme-hope.github.io/v2/blog/zh/)
47+
- [en-US](https://vuepress-theme-hope.github.io/v2/blog/)
4848

49-
- **vuepress-plugin-md-enhance ^2.0.0-beta.110**
49+
#### **vuepress-plugin-md-enhance ^2.0.0-beta.110**
5050

51-
提供**更强大的** markdown 文档。
51+
提供**更强大的** markdown 文档。
5252

53-
- [zh-CN](https://vuepress-theme-hope.github.io/v2/md-enhance/zh/)
54-
- [en-US](https://vuepress-theme-hope.github.io/v2/md-enhance/)
53+
- [zh-CN](https://vuepress-theme-hope.github.io/v2/md-enhance/zh/)
54+
- [en-US](https://vuepress-theme-hope.github.io/v2/md-enhance/)
5555

5656
### 鸣谢
5757

0 commit comments

Comments
 (0)