feat: add an option for removing extra when printing

src/client/theme-default/components/VPDocFooter.vue

@@ -22,10 +22,17 @@ const showFooter = computed(
     control.value.prev ||
     control.value.next
 )
+
+const classes = computed(() => {
+  return {
+    VPDocFooter: true,
+    'hidden-print': theme.value.removeExtraElementsInPrint
+  }
+})
 </script>
 
 <template>
-  <footer v-if="showFooter" class="VPDocFooter hidden-print">
+  <footer v-if="showFooter" :class="classes">
     <slot name="doc-footer-before" />
 
     <div v-if="hasEditLink || hasLastUpdated" class="edit-info">

src/client/theme-default/components/VPLocalNav.vue

@@ -46,7 +46,7 @@ const emptyAndNoSidebar = computed(() => {
 const classes = computed(() => {
   return {
     VPLocalNav: true,
-    'hidden-print': true,
+    'hidden-print': theme.value.removeExtraElementsInPrint,
     'has-sidebar': hasSidebar.value,
     empty: empty.value,
     fixed: emptyAndNoSidebar.value

src/client/theme-default/components/VPNav.vue

@@ -7,7 +7,7 @@ import VPNavBar from './VPNavBar.vue'
 import VPNavScreen from './VPNavScreen.vue'
 
 const { isScreenOpen, closeScreen, toggleScreen } = useNav()
-const { frontmatter } = useData()
+const { frontmatter, theme } = useData()
 
 const hasNavbar = computed(() => {
   return frontmatter.value.navbar !== false
@@ -20,10 +20,17 @@ watchEffect(() => {
     document.documentElement.classList.toggle('hide-nav', !hasNavbar.value)
   }
 })
+
+const classes = computed(() => {
+  return {
+    VPNav: true,
+    'hidden-print': theme.value.removeExtraElementsInPrint
+  }
+})
 </script>
 
 <template>
-  <header v-if="hasNavbar" class="VPNav hidden-print">
+  <header v-if="hasNavbar" :class="classes">
     <VPNavBar :is-screen-open="isScreenOpen" @toggle-screen="toggleScreen">
       <template #nav-bar-title-before><slot name="nav-bar-title-before" /></template>
       <template #nav-bar-title-after><slot name="nav-bar-title-after" /></template>

src/client/theme-default/styles/base.css

@@ -43,6 +43,9 @@ body {
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  page-break-inside: avoid;
+  page-break-after: avoid;
+  page-break-before: avoid;
 }
 
 main {

types/default-theme.d.ts

@@ -119,6 +119,15 @@ export namespace DefaultTheme {
      */
     returnToTopLabel?: string
 
+    /**
+     * @default false
+     *
+     * Remove extraneous elements when printing, such as
+     * the sidebar, navbar, and footer. It can clean print pages, and focus on
+     * the main content.
+     */
+    removeExtraElementsInPrint?: boolean
+
     /**
      * Set custom `aria-label` for language menu button.
      *