perf: 优化侧边栏和页面内导航

theme/src/client/components/LocalNav.vue

@@ -44,12 +44,18 @@ const classes = computed(() => {
   }
 })
 
+const showLocalNav = computed(() => {
+  return (hasSidebar.value || page.value.isBlogPost) && (!empty.value || y.value >= navHeight.value)
+})
+
 </script>
 
 <template>
-  <div v-if="hasSidebar && (!empty || y >= navHeight)" :class="classes">
+  <div v-if="showLocalNav" :class="classes">
     <button
       class="menu"
+      :class="{ 'hidden': page.isBlogPost }"
+      :disabled="page.isBlogPost"
       :aria-expanded="open"
       aria-controls="SidebarNav"
       @click="$emit('open-menu')"
@@ -105,6 +111,10 @@ const classes = computed(() => {
   transition: color 0.5s;
 }
 
+.menu.hidden {
+  visibility: hidden;
+}
+
 .menu:hover {
   color: var(--vp-c-text-1);
   transition: color 0.25s;

theme/src/client/components/PageAside.vue

@@ -2,6 +2,7 @@
 import { usePageData } from '@vuepress/client'
 import { computed, ref } from 'vue'
 import { useActiveAnchor, useThemeLocaleData } from '../composables/index.js'
+import IconPrint from './icons/IconPrint.vue'
 import PageAsideItem from './PageAsideItem.vue'
 
 const page = usePageData()
@@ -33,7 +34,10 @@ function handleClick({ target: el }: Event) {
       <div class="content">
         <div ref="marker" class="outline-marker" />
 
-        <div class="outline-title">{{ theme.outlineLabel || 'On this page' }}</div>
+        <div class="outline-title">
+          <span>{{ theme.outlineLabel || 'On this page' }}</span>
+          <IconPrint class="icon" />
+        </div>
 
         <nav aria-labelledby="doc-outline-aria-label">
           <span id="doc-outline-aria-label" class="visually-hidden">
@@ -87,9 +91,17 @@ function handleClick({ target: el }: Event) {
 }
 
 .outline-title {
+  display: flex;
+  align-items: center;
   letter-spacing: 0.4px;
   line-height: 28px;
   font-size: 13px;
   font-weight: 600;
 }
+.outline-title .icon {
+  margin-left: 4px;
+  width: 1em;
+  height: 1em;
+  font-size: 1.2em;
+}
 </style>

theme/src/client/components/icons/IconPrint.vue

@@ -0,0 +1,3 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M16 8V5H8v3H6V3h12v5zM4 10h16zm14 2.5q.425 0 .713-.288T19 11.5q0-.425-.288-.712T18 10.5q-.425 0-.712.288T17 11.5q0 .425.288.713T18 12.5M16 19v-4H8v4zm2 2H6v-4H2v-6q0-1.275.875-2.137T5 8h14q1.275 0 2.138.863T22 11v6h-4zm2-6v-4q0-.425-.288-.712T19 10H5q-.425 0-.712.288T4 11v4h2v-2h12v2z"/></svg>
+</template>