feat(theme): allow customizing default theme's 404 page

closes #2715
vuejs · Aug 3, 2023 · d7e2254 · d7e2254
1 parent 17378c0
commit d7e2254
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 7 deletions.
diff --git a/src/client/theme-default/NotFound.vue b/src/client/theme-default/NotFound.vue
@@ -4,7 +4,7 @@ import { withBase } from 'vitepress'
 import { useData } from './composables/data'
 import { useLangs } from './composables/langs'
 
-const { site } = useData()
+const { site, theme } = useData()
 const { localeLinks } = useLangs({ removeCurrent: false })
 
 const root = ref('/')
@@ -22,16 +22,23 @@ onMounted(() => {
 
 <template>
   <div class="NotFound">
-    <p class="code">404</p>
-    <h1 class="title">PAGE NOT FOUND</h1>
+    <p class="code">{{ theme.notFound?.code ?? '404' }}</p>
+    <h1 class="title">{{ theme.notFound?.title ?? 'PAGE NOT FOUND' }}</h1>
     <div class="divider" />
     <blockquote class="quote">
-      But if you don't change your direction, and if you keep looking, you may end up where you are heading.
+      {{
+        theme.notFound?.quote ??
+        "But if you don't change your direction, and if you keep looking, you may end up where you are heading."
+      }}
     </blockquote>
 
     <div class="action">
-      <a class="link" :href="withBase(root)" aria-label="go to home">
-        Take me home
+      <a
+        class="link"
+        :href="withBase(root)"
+        :aria-label="theme.notFound?.linkLabel ?? 'go to home'"
+      >
+        {{ theme.notFound?.linkText ?? 'Take me home' }}
       </a>
     </div>
   </div>
@@ -90,7 +97,9 @@ onMounted(() => {
   font-size: 14px;
   font-weight: 500;
   color: var(--vp-c-brand);
-  transition: border-color 0.25s, color 0.25s;
+  transition:
+    border-color 0.25s,
+    color 0.25s;
 }
 
 .link:hover {

diff --git a/types/default-theme.d.ts b/types/default-theme.d.ts
@@ -134,6 +134,11 @@ export namespace DefaultTheme {
      * @default false
      */
     externalLinkIcon?: boolean
+
+    /**
+     * Customize text of 404 page.
+     */
+    notFound?: NotFoundOptions
   }
 
   // nav -----------------------------------------------------------------------
@@ -393,4 +398,41 @@ export namespace DefaultTheme {
      */
     formatOptions?: Intl.DateTimeFormatOptions
   }
+
+  // not found -----------------------------------------------------------------
+
+  export interface NotFoundOptions {
+    /**
+     * Set custom not found message.
+     *
+     * @default 'PAGE NOT FOUND'
+     */
+    title?: string
+
+    /**
+     * Set custom not found description.
+     *
+     * @default "But if you don't change your direction, and if you keep looking, you may end up where you are heading."
+     */
+    quote?: string
+
+    /**
+     * Set aria label for home link.
+     *
+     * @default 'go to home'
+     */
+    linkLabel?: string
+
+    /**
+     * Set custom home link text.
+     *
+     * @default 'Take me home'
+     */
+    linkText?: string
+
+    /**
+     * @default '404'
+     */
+    code?: string
+  }
 }