diff --git a/plugins/plugin-md-power/src/client/components/FileTreeItem.vue b/plugins/plugin-md-power/src/client/components/FileTreeItem.vue index 6483b6be..34dbc433 100644 --- a/plugins/plugin-md-power/src/client/components/FileTreeItem.vue +++ b/plugins/plugin-md-power/src/client/components/FileTreeItem.vue @@ -123,7 +123,7 @@ onUnmounted(() => { transition: color var(--t-color); } -.file-tree-item .tree-node.file .name.focus { +.file-tree-item .tree-node .name.focus { font-weight: bold; color: var(--vp-c-brand-1); transition: color var(--t-color); diff --git a/theme/src/client/components/VPButton.vue b/theme/src/client/components/VPButton.vue index a099b8db..aa8e991f 100644 --- a/theme/src/client/components/VPButton.vue +++ b/theme/src/client/components/VPButton.vue @@ -29,7 +29,7 @@ const component = computed(() => { const { link, isExternal } = useLink(toRef(props, 'href'), toRef(props, 'target')) function linkTo(e: Event) { - if (!isExternal.value) { + if (!isExternal.value && link.value?.[0] !== '#') { e.preventDefault() if (link.value) router.push(link.value) @@ -42,7 +42,7 @@ function linkTo(e: Event) { :is="component" class="vp-button" :class="[size, theme]" - :href="withBase(link || '')" + :href="link?.[0] === '#' ? link : withBase(link || '')" :target="target ?? (isExternal ? '_blank' : undefined)" :rel="rel ?? (isExternal ? 'noreferrer' : undefined)" @click="linkTo($event)" diff --git a/theme/src/client/components/VPContent.vue b/theme/src/client/components/VPContent.vue index 6b381cce..b50f0dc3 100644 --- a/theme/src/client/components/VPContent.vue +++ b/theme/src/client/components/VPContent.vue @@ -5,6 +5,7 @@ import VPDoc from '@theme/VPDoc.vue' import VPFriends from '@theme/VPFriends.vue' import VPPage from '@theme/VPPage.vue' import { nextTick, watch } from 'vue' +import { useRoute } from 'vuepress/client' import { useBlogPageData, useData, useSidebar } from '../composables/index.js' import { inBrowser } from '../utils/index.js' @@ -15,13 +16,21 @@ const props = defineProps<{ const { hasSidebar } = useSidebar() const { frontmatter } = useData() const { isBlogLayout } = useBlogPageData() +const route = useRoute() -watch([isBlogLayout, () => frontmatter.value.pageLayout], () => nextTick(() => - inBrowser && document.documentElement.classList.toggle( - 'bg-gray', - isBlogLayout.value, - ), -), { immediate: true }) +watch( + [isBlogLayout, () => frontmatter.value.pageLayout, () => route.path], + () => nextTick(() => { + if (inBrowser) { + document.documentElement.classList.toggle('bg-gray', isBlogLayout.value) + const layout = document.documentElement.className.match(/(?:^|\s)(layout-\S+)(?:$|\s)/)?.[1] + if (layout) + document.documentElement.classList.remove(layout) + document.documentElement.classList.add(`layout-${isBlogLayout.value ? 'blog' : frontmatter.value.pageLayout || 'doc'}`) + } + }), + { immediate: true }, +)