From 198e13d885c6c00867ef4d55ff1206bc2117b724 Mon Sep 17 00:00:00 2001 From: pengzhanbo Date: Mon, 15 Jul 2024 21:03:33 +0800 Subject: [PATCH 01/13] =?UTF-8?q?perf(theme):=20=E4=BC=98=E5=8C=96?= =?UTF-8?q?=E4=B8=AD=E6=96=87=E5=AD=97=E4=BD=93=E5=BA=93?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- theme/src/client/styles/vars.css | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/theme/src/client/styles/vars.css b/theme/src/client/styles/vars.css index 2f0ac587..0aae1f7b 100644 --- a/theme/src/client/styles/vars.css +++ b/theme/src/client/styles/vars.css @@ -266,6 +266,26 @@ font-optical-sizing: auto; } +:root:where(:lang(zh)), +:root:where(:lang(zh-CN)) { + --vp-font-family-base: + "Punctuation SC", + "Inter", + ui-sans-serif, + system-ui, + "PingFang SC", + "Noto Sans CJK SC", + "Noto Sans SC", + "Heiti SC", + "Microsoft YaHei", + "DengXian", + sans-serif, + "Apple Color Emoji", + "Segoe UI Emoji", + "Segoe UI Symbol", + "Noto Color Emoji"; +} + /** * Shadows * -------------------------------------------------------------------------- */ From 647c291d2f55a043d51c740c6fb9ffbc70bf895f Mon Sep 17 00:00:00 2001 From: pengzhanbo Date: Mon, 15 Jul 2024 21:04:02 +0800 Subject: [PATCH 02/13] =?UTF-8?q?perf(theme):=20=E4=BC=98=E5=8C=96=20`=20=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- theme/src/client/styles/content.css | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/theme/src/client/styles/content.css b/theme/src/client/styles/content.css index 8efbcc50..10860859 100644 --- a/theme/src/client/styles/content.css +++ b/theme/src/client/styles/content.css @@ -45,7 +45,13 @@ letter-spacing: -0.01em; } -.vp-doc h4, +.vp-doc h4 { + margin: 24px 0 16px; + font-size: 18px; + line-height: 24px; + letter-spacing: -0.01em; +} + .vp-doc h5, .vp-doc h6 { margin: 24px 0 16px; @@ -127,15 +133,14 @@ .vp-doc blockquote { padding-left: 16px; margin: 16px 0; + color: var(--vp-c-text-2); border-left: 2px solid var(--vp-c-divider); - transition: border-color var(--t-color); + transition: border-color var(--t-color), color var(--t-color); } .vp-doc blockquote > p { margin: 0; font-size: 16px; - color: var(--vp-c-text-2); - transition: color var(--t-color); } .vp-doc a { @@ -258,7 +263,8 @@ .vp-doc h1 > code, .vp-doc h2 > code, -.vp-doc h3 > code { +.vp-doc h3 > code, +.vp-doc h4 > code { font-size: 0.9em; } From b83a69a68179f8d7df6c767728b1e7b02f11c551 Mon Sep 17 00:00:00 2001 From: pengzhanbo Date: Mon, 15 Jul 2024 21:04:43 +0800 Subject: [PATCH 03/13] =?UTF-8?q?feat(theme):=20=E6=B7=BB=E5=8A=A0=20blog?= =?UTF-8?q?=20categories=20=E6=8F=92=E6=A7=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- theme/src/client/components/Blog/VPBlog.vue | 2 +- theme/src/client/layouts/Layout.vue | 6 ++++++ 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/theme/src/client/components/Blog/VPBlog.vue b/theme/src/client/components/Blog/VPBlog.vue index 8909ba82..503eba21 100644 --- a/theme/src/client/components/Blog/VPBlog.vue +++ b/theme/src/client/components/Blog/VPBlog.vue @@ -41,7 +41,7 @@ const { theme, page } = useData() diff --git a/theme/src/client/layouts/Layout.vue b/theme/src/client/layouts/Layout.vue index 3a0e2fe4..98d4c8d1 100644 --- a/theme/src/client/layouts/Layout.vue +++ b/theme/src/client/layouts/Layout.vue @@ -133,6 +133,12 @@ useCloseSidebarOnEscape(isSidebarOpen, closeSidebar) + + From 400bf02856e92bb0fd2d8f87a1a30e7cbce9e308 Mon Sep 17 00:00:00 2001 From: pengzhanbo Date: Mon, 15 Jul 2024 21:06:46 +0800 Subject: [PATCH 04/13] =?UTF-8?q?perf(theme):=20=E4=BC=98=E5=8C=96=20?= =?UTF-8?q?=E4=BE=A7=E8=BE=B9=E6=A0=8F=20=E5=88=86=E7=BB=84=E7=BB=93?= =?UTF-8?q?=E6=9E=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- theme/src/client/components/VPSidebar.vue | 23 +------- .../src/client/components/VPSidebarGroup.vue | 55 +++++++++++++++++++ theme/src/client/components/VPSidebarItem.vue | 2 +- 3 files changed, 58 insertions(+), 22 deletions(-) create mode 100644 theme/src/client/components/VPSidebarGroup.vue diff --git a/theme/src/client/components/VPSidebar.vue b/theme/src/client/components/VPSidebar.vue index 4ded9b4c..da2e5bc3 100644 --- a/theme/src/client/components/VPSidebar.vue +++ b/theme/src/client/components/VPSidebar.vue @@ -2,7 +2,7 @@ import { useScrollLock } from '@vueuse/core' import { onMounted, ref, watch } from 'vue' import { useRoutePath } from 'vuepress/client' -import VPSidebarItem from '@theme/VPSidebarItem.vue' +import VPSidebarGroup from '@theme/VPSidebarGroup.vue' import VPTransitionFadeSlideY from '@theme/VPTransitionFadeSlideY.vue' import { useSidebar } from '../composables/sidebar.js' import { inBrowser } from '../utils/index.js' @@ -71,13 +71,7 @@ onMounted(() => { -
- -
+ @@ -170,17 +164,4 @@ onMounted(() => { .nav { outline: 0; } - -.group + .group { - padding-top: 10px; - border-top: 1px solid var(--vp-c-divider); - transition: border-top var(--t-color); -} - -@media (min-width: 960px) { - .group { - width: calc(var(--vp-sidebar-width) - 64px); - padding-top: 10px; - } -} diff --git a/theme/src/client/components/VPSidebarGroup.vue b/theme/src/client/components/VPSidebarGroup.vue new file mode 100644 index 00000000..28ebb46b --- /dev/null +++ b/theme/src/client/components/VPSidebarGroup.vue @@ -0,0 +1,55 @@ + + + + + diff --git a/theme/src/client/components/VPSidebarItem.vue b/theme/src/client/components/VPSidebarItem.vue index e5bdad62..b0f3a2ce 100644 --- a/theme/src/client/components/VPSidebarItem.vue +++ b/theme/src/client/components/VPSidebarItem.vue @@ -56,7 +56,7 @@ function onCaretClick() { -

+

{{ page.title }}

diff --git a/theme/src/client/components/VPLocalNav.vue b/theme/src/client/components/VPLocalNav.vue index f4465121..a76290d4 100644 --- a/theme/src/client/components/VPLocalNav.vue +++ b/theme/src/client/components/VPLocalNav.vue @@ -5,7 +5,7 @@ import VPLocalNavOutlineDropdown from '@theme/VPLocalNavOutlineDropdown.vue' import { useSidebar } from '../composables/sidebar.js' import { useHeaders } from '../composables/outline.js' import { useData } from '../composables/data.js' -import { useBlogPost } from '../composables/page.js' +import { useBlogPageData } from '../composables/page.js' const props = defineProps<{ open: boolean @@ -15,7 +15,7 @@ const props = defineProps<{ defineEmits<(e: 'openMenu') => void>() const { theme } = useData() -const { isBlogPost } = useBlogPost() +const { isBlogPost } = useBlogPageData() const { hasSidebar } = useSidebar() const { y } = useWindowScroll() diff --git a/theme/src/client/composables/langs.ts b/theme/src/client/composables/langs.ts index 8f7c749b..994b1149 100644 --- a/theme/src/client/composables/langs.ts +++ b/theme/src/client/composables/langs.ts @@ -4,7 +4,7 @@ import { normalizeLink } from '../utils/index.js' import { useThemeData } from './theme-data.js' import { useData } from './data.js' import { getSidebarFirstLink, useSidebarData } from './sidebar.js' -import { useBlogPost } from './page.js' +import { useBlogPageData } from './page.js' export function useLangs({ removeCurrent = true, @@ -13,7 +13,7 @@ export function useLangs({ const { page } = useData() const routeLocale = useRouteLocale() const sidebar = useSidebarData() - const { isBlogPost } = useBlogPost() + const { isBlogPost } = useBlogPageData() const currentLang = computed(() => { const link = routeLocale.value diff --git a/theme/src/client/composables/page.ts b/theme/src/client/composables/page.ts index 86474205..5e70cdfe 100644 --- a/theme/src/client/composables/page.ts +++ b/theme/src/client/composables/page.ts @@ -2,7 +2,7 @@ import { computed } from 'vue' import { useData } from './data.js' import { usePostList } from './blog-data.js' -export function useBlogPost() { +export function useBlogPageData() { const { page } = useData() const postList = usePostList() @@ -10,7 +10,13 @@ export function useBlogPost() { return postList.value.some(item => item.path === page.value.path) }) + const isBlogLayout = computed(() => { + const type = page.value.type + return type === 'blog' || type === 'blog-archives' || type === 'blog-tags' || type === 'blog-categories' + }) + return { isBlogPost, + isBlogLayout, } } diff --git a/theme/src/client/composables/prev-next.ts b/theme/src/client/composables/prev-next.ts index d9600e4c..4172f9ed 100644 --- a/theme/src/client/composables/prev-next.ts +++ b/theme/src/client/composables/prev-next.ts @@ -7,7 +7,7 @@ import { resolveNavLink } from '../utils/index.js' import { usePostList } from './blog-data.js' import { useSidebar } from './sidebar.js' import { useData } from './data.js' -import { useBlogPost } from './page.js' +import { useBlogPageData } from './page.js' export function usePrevNext() { const route = useRoute() @@ -15,7 +15,7 @@ export function usePrevNext() { const { sidebar } = useSidebar() const postList = usePostList() as unknown as Ref const locale = usePageLang() - const { isBlogPost } = useBlogPost() + const { isBlogPost } = useBlogPageData() const prevNavList = computed(() => { const prevConfig = resolveFromFrontmatterConfig(frontmatter.value.prev) From 4501a1654ec6b503ccbbd3e8526d9e43131affe7 Mon Sep 17 00:00:00 2001 From: pengzhanbo Date: Tue, 16 Jul 2024 00:16:55 +0800 Subject: [PATCH 06/13] =?UTF-8?q?perf(theme):=20=E4=BC=98=E5=8C=96?= =?UTF-8?q?=E5=AF=BC=E8=88=AA=E6=A0=8F=E4=BA=A4=E4=BA=92?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- theme/src/client/components/Nav/VPNavBar.vue | 18 +++++++++++++++++- .../src/client/components/Nav/VPNavScreen.vue | 3 +-- .../client/components/VPSwitchAppearance.vue | 7 ++++--- 3 files changed, 22 insertions(+), 6 deletions(-) diff --git a/theme/src/client/components/Nav/VPNavBar.vue b/theme/src/client/components/Nav/VPNavBar.vue index 63f07949..e7339ed7 100644 --- a/theme/src/client/components/Nav/VPNavBar.vue +++ b/theme/src/client/components/Nav/VPNavBar.vue @@ -12,7 +12,7 @@ import VPNavBarTranslations from '@theme/Nav/VPNavBarTranslations.vue' import { useData } from '../../composables/data.js' import { useSidebar } from '../../composables/sidebar.js' -defineProps<{ +const props = defineProps<{ isScreenOpen: boolean }>() defineEmits<(e: 'toggleScreen') => void>() @@ -28,6 +28,7 @@ watchPostEffect(() => { 'has-sidebar': hasSidebar.value, 'home': frontmatter.value.pageLayout === 'home', 'top': y.value === 0, + 'screen-open': props.isScreenOpen, } }) @@ -83,6 +84,12 @@ watchPostEffect(() => { transition-property: background-color, color, border-bottom; } +.vp-navbar.screen-open { + background-color: var(--vp-nav-bg-color); + border-bottom: 1px solid var(--vp-c-divider); + transition: none; +} + .vp-navbar:not(.home) { background-color: var(--vp-nav-bg-color); } @@ -240,6 +247,11 @@ watchPostEffect(() => { margin-right: -8px; } +.divider { + width: 100%; + height: 1px; +} + @media (min-width: 960px) { .vp-navbar.has-sidebar .divider { padding-left: var(--vp-sidebar-width); @@ -252,6 +264,10 @@ watchPostEffect(() => { } } +.vp-navbar.screen-open .divider { + display: none; +} + .divider-line { width: 100%; height: 1px; diff --git a/theme/src/client/components/Nav/VPNavScreen.vue b/theme/src/client/components/Nav/VPNavScreen.vue index a96d6933..088473e2 100644 --- a/theme/src/client/components/Nav/VPNavScreen.vue +++ b/theme/src/client/components/Nav/VPNavScreen.vue @@ -48,8 +48,7 @@ const isLocked = useScrollLock(inBrowser ? document.body : null) overflow-y: auto; pointer-events: auto; background-color: var(--vp-nav-screen-bg-color); - border-top: 1px solid var(--vp-c-divider); - transition: background-color var(--t-color), border-top var(--t-color); + transition: background-color var(--t-color); } .container { diff --git a/theme/src/client/components/VPSwitchAppearance.vue b/theme/src/client/components/VPSwitchAppearance.vue index 9454d673..7b13690b 100644 --- a/theme/src/client/components/VPSwitchAppearance.vue +++ b/theme/src/client/components/VPSwitchAppearance.vue @@ -1,5 +1,5 @@ diff --git a/theme/src/client/components/VPSwitchAppearance.vue b/theme/src/client/components/VPSwitchAppearance.vue index 7b13690b..1690093f 100644 --- a/theme/src/client/components/VPSwitchAppearance.vue +++ b/theme/src/client/components/VPSwitchAppearance.vue @@ -1,5 +1,5 @@