Skip to content

Commit dcbbe1e

Browse files
NeserCodeNeserCode
committed
delete readingline, add footer
1 parent 892c7e1 commit dcbbe1e

File tree

8 files changed

+167
-151
lines changed

8 files changed

+167
-151
lines changed

‎docs/.vuepress/config.ts‎

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,24 @@ export default defineUserConfig({
2525
loading: "lazy",
2626
},
2727
footer: {
28-
copyRight: "© 2022~~ NeserCode",
28+
year: "2022 - 2024",
29+
themeInfoDisplay: true,
30+
copyRight:
31+
"<a target='_blank' href='https://github.com/Nesercode'>NeserCode</a>",
32+
footerLinks: [
33+
{
34+
title: "GitHub",
35+
link: "https://github.com/nesercode",
36+
},
37+
{
38+
title: "Gitee",
39+
link: "https://gitee.com/nesercode",
40+
},
41+
{
42+
title: "Bilibili",
43+
link: "https://space.bilibili.com/nesercode",
44+
},
45+
],
2946
},
3047
navbar: extendDefaultNavbarConfig([
3148
{ text: "Github", link: "https://github.com/NeserCode" },

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import PageMeta from "./PageMeta.vue"
55
import PageNav from "./PageNav.vue"
66
import SubToc from "./SubToc.vue"
77
import Comment from "./Comment.vue"
8+
import PageFooter from "./PageFooter.vue"
89
910
import { computed, ref } from "vue"
1011
import { usePageData, usePageFrontmatter, useRoute } from "vuepress/client"
@@ -104,7 +105,7 @@ setupHeaders()
104105

105106
<div class="page-foot">
106107
<slot name="before-page-foot"></slot>
107-
<span class="page-foot"> </span>
108+
<PageFooter />
108109
<slot name="after-page-foot"></slot>
109110
</div>
110111
</div>

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

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
<script lang="ts" setup>
2+
import { useThemeLocaleData } from "@vuepress/plugin-theme-data/client"
3+
import { usePageFrontmatter, useSiteData } from "vuepress/client"
4+
import { computed } from "vue"
5+
6+
import type { DefaultThemeLocaleData } from "../../shared"
7+
8+
const themeLocale = useThemeLocaleData<DefaultThemeLocaleData>()
9+
console.log("[Debug Footer]", themeLocale.value.footer)
10+
const siteData = useSiteData()
11+
12+
const frontmatter = usePageFrontmatter()
13+
const footerDisplay = computed(() => themeLocale.value.footer !== false)
14+
const footer = computed(() => frontmatter.value.footer)
15+
const footerHtml = computed(() => frontmatter.value.footerHtml)
16+
17+
const year = computed(() =>
18+
themeLocale.value.footer
19+
? themeLocale.value.footer.year ?? new Date().getFullYear()
20+
: new Date().getFullYear()
21+
)
22+
const copyright = computed(() =>
23+
themeLocale.value.footer
24+
? themeLocale.value.footer.copyRight
25+
: siteData.value.title ?? null
26+
)
27+
const themeInfoDisplay = computed(() =>
28+
themeLocale.value.footer ? themeLocale.value.footer.themeInfoDisplay : true
29+
)
30+
const footerLinks = computed(() =>
31+
themeLocale.value.footer ? themeLocale.value.footer.footerLinks : null
32+
)
33+
</script>
34+
35+
<template>
36+
<div
37+
v-if="footerHtml && footerDisplay"
38+
class="v-nc-page-footer"
39+
v-html="footer"
40+
/>
41+
<div
42+
v-else-if="footer && footerDisplay"
43+
class="v-nc-page-footer"
44+
v-text="footer"
45+
/>
46+
<div v-else-if="footerDisplay" class="v-nc-page-footer">
47+
<span class="normal-info">
48+
<span class="year" v-if="year">© {{ year }}</span>
49+
<span class="copyright" v-if="copyright" v-html="copyright"></span>
50+
</span>
51+
<span class="theme-info" v-if="themeInfoDisplay">
52+
Theme By NeserCode · Power By VuePress v2
53+
</span>
54+
<span class="links" v-if="footerLinks">
55+
<a
56+
v-for="link in footerLinks"
57+
:key="link.link"
58+
:href="link.link"
59+
target="_blank"
60+
rel="noopener noreferrer"
61+
>{{ link.title }}</a
62+
>
63+
</span>
64+
</div>
65+
</template>
66+
67+
<style lang="postcss" scoped>
68+
.v-nc-page-footer {
69+
@apply flex flex-col sm:items-center items-start justify-center gap-y-1 mt-12
70+
text-base font-semibold;
71+
}
72+
73+
.v-nc-page-footer .normal-info {
74+
@apply w-fit inline-flex gap-x-2 pt-2
75+
border-t border-slate-400 dark:border-slate-700
76+
transition-all ease-in-out duration-300;
77+
}
78+
79+
.v-nc-page-footer .theme-info {
80+
@apply text-slate-600 dark:text-slate-500
81+
text-sm
82+
transition-colors ease-in-out duration-300;
83+
}
84+
85+
.v-nc-page-footer .links {
86+
@apply inline-flex flex-wrap gap-x-2 py-4;
87+
}
88+
</style>

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

Lines changed: 0 additions & 24 deletions
This file was deleted.

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

Lines changed: 16 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -38,21 +38,22 @@ const tocFly = ref<HTMLDivElement | null>(null)
3838
useSubTocFly(toc, tocFly)
3939
4040
const $route = useRoute()
41-
Hook.onRoute(
42-
() => {
43-
if (!isCommentActive || !document) return
44-
if (document.querySelector("h2#v-nc-comment"))
45-
tocHeaders.value.push({
46-
level: 2,
47-
link: `#v-nc-comment`,
48-
slug: `v-nc-comment`,
49-
title: `评论`,
50-
children: [],
51-
})
52-
},
53-
$route,
54-
{ immediate: true }
55-
)
41+
Hook.onRoute(() => {
42+
tocHeaders.value = pageData.value.headers ?? []
43+
44+
if (!isCommentActive || !document) return
45+
if (
46+
document.querySelector("h2#v-nc-comment") &&
47+
tocHeaders.value[tocHeaders.value.length - 1].slug !== "v-nc-comment"
48+
)
49+
tocHeaders.value.push({
50+
level: 2,
51+
link: `#v-nc-comment`,
52+
slug: `v-nc-comment`,
53+
title: `💬评论`,
54+
children: [],
55+
})
56+
}, $route)
5657
</script>
5758

5859
<template>

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

Lines changed: 0 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { useDebounceFn } from "@vueuse/core"
21
import type {
32
DefaultThemePageFrontmatter,
43
FrontmatterPluginState,
@@ -48,26 +47,3 @@ export const usePluginState = (
4847
} else if (states.plugins) return !(states.plugins[keyName] === false)
4948
else return true
5049
}
51-
52-
export const useElementSrcolled = (elementSelector: string) => {
53-
if (!document) return false
54-
const element = document.querySelector(elementSelector)
55-
if (!element) return false
56-
57-
return {
58-
onScroll: (callback: (total: number, scrolled: number) => void) => {
59-
const listener = useDebounceFn(() => {
60-
let rects = element.getBoundingClientRect()
61-
let scrolled =
62-
rects.height - rects.bottom > 0
63-
? rects.height - rects.bottom > rects.height
64-
? rects.height
65-
: rects.height - rects.bottom
66-
: 0
67-
callback(rects.height, scrolled)
68-
}, 100)
69-
document.removeEventListener("scroll", listener)
70-
document.addEventListener("scroll", listener)
71-
},
72-
}
73-
}

‎docs/.vuepress/theme/lib/client/layouts/Base.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -240,7 +240,7 @@ span.arrow.left {
240240

241241
<style lang="postcss" scoped>
242242
.base-layout {
243-
@apply w-full h-full min-h-screen flex flex-col items-center py-16
243+
@apply w-full min-w-full h-full min-h-screen flex flex-col items-center py-16
244244
bg-zinc-50 dark:bg-zinc-800
245245
transition-colors ease-in-out duration-300;
246246
}

‎docs/.vuepress/theme/lib/client/layouts/Layout.vue‎

Lines changed: 42 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -5,24 +5,12 @@ import Home from "../components/Home.vue"
55
66
import GithubRepo from "../components/GithubRepo.vue"
77
import Copyright from "../components/Copyright.vue"
8-
import ReadingLine from "../components/ReadingLine.vue"
98
10-
import {
11-
usePageData,
12-
usePageFrontmatter,
13-
useSiteData,
14-
useRoute,
15-
} from "vuepress/client"
16-
import { computed, onMounted, ref } from "vue"
9+
import { usePageData, usePageFrontmatter, useSiteData } from "vuepress/client"
10+
import { computed } from "vue"
1711
import { useThemeData } from "@vuepress/plugin-theme-data/client"
18-
import { Hook } from "../composables/useHook"
19-
import {
20-
useElementSrcolled,
21-
usePluginState,
22-
} from "../composables/useComponentUtils"
2312
2413
import {
25-
defaultConstants,
2614
type DefaultThemeData,
2715
type DefaultThemeNormalPageFrontmatter,
2816
type DefaultThemePageData,
@@ -32,7 +20,6 @@ const pageData = usePageData<DefaultThemePageData>()
3220
const pageFrontmatter = usePageFrontmatter<DefaultThemeNormalPageFrontmatter>()
3321
const themeLocale = useThemeData<DefaultThemeData>()
3422
const siteData = useSiteData()
35-
const $route = useRoute()
3623
3724
// repo info
3825
const githubRepoData = computed(() => {
@@ -58,81 +45,51 @@ const originalUrl = computed(() => {
5845
)
5946
})
6047
const copyrightTips = [""]
61-
62-
// Scroll listener
63-
const readingLineProgress = ref(0)
64-
onMounted(() => {
65-
Hook.onRoute(() => {
66-
const scrollUtils = useElementSrcolled(".v-nc-content")
67-
if (scrollUtils)
68-
scrollUtils.onScroll((total, scrolled) => {
69-
readingLineProgress.value = parseFloat(
70-
((scrolled / total) * 100).toFixed(2)
71-
)
72-
})
73-
}, $route)
74-
})
75-
76-
const isNotFound = computed(() => pageFrontmatter.value.layout === "NotFound")
77-
const computedStateSource = computed(() =>
78-
isNotFound.value
79-
? defaultConstants.notFoundPluginState
80-
: pageFrontmatter.value
81-
)
82-
const isReadingLineActive = computed(() =>
83-
usePluginState("readingLine", computedStateSource.value)
84-
)
8548
</script>
8649

8750
<template>
8851
<Base>
8952
<template #page>
90-
<div class="page-wrapper" :key="pageData.path">
91-
<ReadingLine
92-
:reading-progress="readingLineProgress"
93-
v-if="isReadingLineActive"
94-
/>
95-
<Home v-if="pageFrontmatter.home" />
96-
<Page v-else>
97-
<template #before-page> </template>
98-
<template #page-side-left>
99-
<slot name="page-side-left" />
100-
</template>
101-
<template #page-side-right>
102-
<GithubRepo
103-
:owner="githubRepoData.owner"
104-
:repo="githubRepoData.repo"
105-
v-if="githubRepoData"
106-
/>
107-
<slot name="page-side-right" />
108-
</template>
109-
<template #before-page-head>
110-
<slot name="before-page-head" />
111-
</template>
112-
<template #after-page-head>
113-
<slot name="after-page-head" />
114-
</template>
115-
<template #before-content>
116-
<slot name="before-content" />
117-
</template>
118-
<template #before-comment>
119-
<Copyright
120-
:isOriginal="isOriginal"
121-
:originalUrl="originalUrl"
122-
:tips="copyrightTips"
123-
/>
124-
</template>
125-
<template #after-content>
126-
<slot name="after-content" />
127-
</template>
128-
<template #before-page-foot>
129-
<slot name="before-page-foot" />
130-
</template>
131-
<template #after-page-foot>
132-
<slot name="after-page-foot" />
133-
</template>
134-
</Page>
135-
</div>
53+
<Home v-if="pageFrontmatter.home" />
54+
<Page v-else>
55+
<template #before-page> </template>
56+
<template #page-side-left>
57+
<slot name="page-side-left" />
58+
</template>
59+
<template #page-side-right>
60+
<GithubRepo
61+
:owner="githubRepoData.owner"
62+
:repo="githubRepoData.repo"
63+
v-if="githubRepoData"
64+
/>
65+
<slot name="page-side-right" />
66+
</template>
67+
<template #before-page-head>
68+
<slot name="before-page-head" />
69+
</template>
70+
<template #after-page-head>
71+
<slot name="after-page-head" />
72+
</template>
73+
<template #before-content>
74+
<slot name="before-content" />
75+
</template>
76+
<template #before-comment>
77+
<Copyright
78+
:isOriginal="isOriginal"
79+
:originalUrl="originalUrl"
80+
:tips="copyrightTips"
81+
/>
82+
</template>
83+
<template #after-content>
84+
<slot name="after-content" />
85+
</template>
86+
<template #before-page-foot>
87+
<slot name="before-page-foot" />
88+
</template>
89+
<template #after-page-foot>
90+
<slot name="after-page-foot" />
91+
</template>
92+
</Page>
13693
</template>
13794
</Base>
13895
</template>

0 commit comments

Comments
 (0)