Skip to content

Commit d7e2254

Browse files
committedAug 3, 2023
feat(theme): allow customizing default theme's 404 page
closes #2715
1 parent 17378c0 commit d7e2254

File tree

2 files changed

+58
-7
lines changed

2 files changed

+58
-7
lines changed
 

‎src/client/theme-default/NotFound.vue

+16-7
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { withBase } from 'vitepress'
44
import { useData } from './composables/data'
55
import { useLangs } from './composables/langs'
66
7-
const { site } = useData()
7+
const { site, theme } = useData()
88
const { localeLinks } = useLangs({ removeCurrent: false })
99
1010
const root = ref('/')
@@ -22,16 +22,23 @@ onMounted(() => {
2222

2323
<template>
2424
<div class="NotFound">
25-
<p class="code">404</p>
26-
<h1 class="title">PAGE NOT FOUND</h1>
25+
<p class="code">{{ theme.notFound?.code ?? '404' }}</p>
26+
<h1 class="title">{{ theme.notFound?.title ?? 'PAGE NOT FOUND' }}</h1>
2727
<div class="divider" />
2828
<blockquote class="quote">
29-
But if you don't change your direction, and if you keep looking, you may end up where you are heading.
29+
{{
30+
theme.notFound?.quote ??
31+
"But if you don't change your direction, and if you keep looking, you may end up where you are heading."
32+
}}
3033
</blockquote>
3134

3235
<div class="action">
33-
<a class="link" :href="withBase(root)" aria-label="go to home">
34-
Take me home
36+
<a
37+
class="link"
38+
:href="withBase(root)"
39+
:aria-label="theme.notFound?.linkLabel ?? 'go to home'"
40+
>
41+
{{ theme.notFound?.linkText ?? 'Take me home' }}
3542
</a>
3643
</div>
3744
</div>
@@ -90,7 +97,9 @@ onMounted(() => {
9097
font-size: 14px;
9198
font-weight: 500;
9299
color: var(--vp-c-brand);
93-
transition: border-color 0.25s, color 0.25s;
100+
transition:
101+
border-color 0.25s,
102+
color 0.25s;
94103
}
95104
96105
.link:hover {

‎types/default-theme.d.ts

+42
Original file line numberDiff line numberDiff line change
@@ -134,6 +134,11 @@ export namespace DefaultTheme {
134134
* @default false
135135
*/
136136
externalLinkIcon?: boolean
137+
138+
/**
139+
* Customize text of 404 page.
140+
*/
141+
notFound?: NotFoundOptions
137142
}
138143

139144
// nav -----------------------------------------------------------------------
@@ -393,4 +398,41 @@ export namespace DefaultTheme {
393398
*/
394399
formatOptions?: Intl.DateTimeFormatOptions
395400
}
401+
402+
// not found -----------------------------------------------------------------
403+
404+
export interface NotFoundOptions {
405+
/**
406+
* Set custom not found message.
407+
*
408+
* @default 'PAGE NOT FOUND'
409+
*/
410+
title?: string
411+
412+
/**
413+
* Set custom not found description.
414+
*
415+
* @default "But if you don't change your direction, and if you keep looking, you may end up where you are heading."
416+
*/
417+
quote?: string
418+
419+
/**
420+
* Set aria label for home link.
421+
*
422+
* @default 'go to home'
423+
*/
424+
linkLabel?: string
425+
426+
/**
427+
* Set custom home link text.
428+
*
429+
* @default 'Take me home'
430+
*/
431+
linkText?: string
432+
433+
/**
434+
* @default '404'
435+
*/
436+
code?: string
437+
}
396438
}

0 commit comments

Comments
 (0)
Please sign in to comment.