mirror of https://github.com/vuejs/vitepress
Every locale gets a not-found page at `404.md` / `<locale>/404.md`. When
the author has one it loads as a page; otherwise a Vite plugin synthesizes
it: a locale without its own file re-exports the root `404.md` with its own
locale, and with no file at all a markdown page renders the theme's
`NotFound` component (or a small built-in one). The router, the SSR build,
the dev server and the preview server all consume that page through the
normal page pipeline, so the `'404.md'` special cases, the body stripping
and the `null` route component go away.
- `siteConfig.notFoundPages` lists the page of every locale with its source;
those pages are left out of `pages`, so out of the sitemap, the search
index and prev/next links, and links to them are not dead links
- the build emits `404.html` and `<locale>/404.html` with pre-rendered
bodies, a `data-vp-not-found` marker and a `noindex` meta; the client
mounts such a document afresh instead of hydrating it, since a host may
serve it for any path
- on a miss the router loads the page of the path's locale and keeps
`route.path` as the requested URL
- the dev server answers a miss with a 404 status; the preview server
serves the nearest locale's `404.html` with a content type
- `Theme.NotFound` is the theme's default not-found content and is no
longer deprecated; `<Content />` renders the built-in page when a route
has no component instead of a bare string, and its wrapper carries a
`vp-content` class by default
BREAKING CHANGE: on a miss `page.relativePath` is the not-found page's own
path (`zh/404.md`) instead of a path made up from the URL, and its
frontmatter is empty instead of `{ sidebar: false, layout: 'page' }`; a
site `404.md` is no longer part of `siteConfig.pages`; `404.html` has a
pre-rendered body and a `noindex` meta, so use `pageData.isNotFound` in
`transformHead`/`transformHtml` instead of `page === '404.md'`; visiting
`/404` renders the page with `isNotFound` set; the dev server returns 404
for unknown pages.
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
feat/not-found
Divyansh Singh
1 week ago
parent
09f9672ee1
commit
cb4ae79c40
@ -0,0 +1,19 @@
|
||||
import { defineComponent, h } from 'vue'
|
||||
|
||||
import { withBase } from '../utils'
|
||||
|
||||
/**
|
||||
* The not-found page content of a site whose theme provides none. Same
|
||||
* shape as the default theme's, so a theme can style it the same way.
|
||||
*/
|
||||
export const NotFound = defineComponent({
|
||||
name: 'VitePressNotFound',
|
||||
setup() {
|
||||
return () =>
|
||||
h('div', { class: 'vp-not-found' }, [
|
||||
h('p', { class: 'code' }, '404'),
|
||||
h('h1', { class: 'title' }, 'Page not found'),
|
||||
h('a', { class: 'link', href: withBase('/') }, 'Take me home')
|
||||
])
|
||||
}
|
||||
})
|
||||
@ -0,0 +1,120 @@
|
||||
import path from 'node:path'
|
||||
|
||||
import { normalizePath, type Plugin } from 'vite'
|
||||
|
||||
import { APP_PATH } from '../alias'
|
||||
import type { SiteConfig } from '../siteConfig'
|
||||
import { isExternal, slash, type SiteData } from '../shared'
|
||||
|
||||
const notFoundRE = /(?:^|\/)404\.md(?:\?|$)/
|
||||
|
||||
// the re-export module is plain js under a `.md` id, which keeps it a page
|
||||
// chunk; the virtual-module marker keeps the markdown and sfc transforms off
|
||||
// it (both skip `\0` ids)
|
||||
const VIRTUAL_PREFIX = '\0'
|
||||
|
||||
/**
|
||||
* The not-found page of every locale, as output-relative paths: `404.md`
|
||||
* for the root plus `<locale>/404.md` for each locale directory.
|
||||
*/
|
||||
export function resolveNotFoundPagePaths(site: SiteData): string[] {
|
||||
const dirs = Object.keys(site.locales ?? {}).filter(
|
||||
(key) => key !== 'root' && !isExternal(key)
|
||||
)
|
||||
return ['404.md', ...dirs.map((dir) => `${dir}/404.md`)]
|
||||
}
|
||||
|
||||
/**
|
||||
* Backs every not-found page with a module. A page the author wrote loads
|
||||
* as-is; the others are synthesized here so the router, the build and the
|
||||
* preview server can treat the not-found page like any page:
|
||||
*
|
||||
* - a locale without its own file re-exports the root `404.md`, keeping the
|
||||
* locale in its page data
|
||||
* - with no file at all, a markdown page renders the theme's `NotFound`
|
||||
* component
|
||||
*/
|
||||
export const notFoundPlugin = (siteConfig: SiteConfig): Plugin => {
|
||||
const { srcDir } = siteConfig
|
||||
|
||||
const splitQuery = (id: string): [file: string, query: string] => {
|
||||
const index = id.indexOf('?')
|
||||
return index === -1 ? [id, ''] : [id.slice(0, index), id.slice(index + 1)]
|
||||
}
|
||||
|
||||
// the synthesized page a would-be file stands for, and the authored root
|
||||
// page it inherits when there is one
|
||||
const virtualPage = (file: string) => {
|
||||
const relativePath = slash(
|
||||
path.relative(srcDir, file.replace(VIRTUAL_PREFIX, ''))
|
||||
)
|
||||
// an authored page that a rewrite moves elsewhere still owns its file
|
||||
if (siteConfig.pages.includes(relativePath)) return
|
||||
const page = siteConfig.notFoundPages.find((p) => p.path === relativePath)
|
||||
if (!page || page.source != null) return
|
||||
const root = siteConfig.notFoundPages.find((p) => p.path === '404.md')
|
||||
const inherits = page.path !== '404.md' ? (root?.source ?? null) : null
|
||||
return { path: page.path, inherits }
|
||||
}
|
||||
|
||||
return {
|
||||
name: 'vitepress:not-found',
|
||||
enforce: 'pre',
|
||||
|
||||
resolveId: {
|
||||
filter: { id: notFoundRE },
|
||||
handler(id, importer) {
|
||||
const [file, query] = splitQuery(id)
|
||||
// sub-requests (`?vue&type=…`) belong to the module that owns them
|
||||
if (query && !/^t=\d+$/.test(query)) return
|
||||
const resolved = file.startsWith(srcDir)
|
||||
? file
|
||||
: file.startsWith('/')
|
||||
? normalizePath(path.join(srcDir, file))
|
||||
: importer && file.startsWith('.')
|
||||
? normalizePath(path.resolve(path.dirname(importer), file))
|
||||
: undefined
|
||||
const page = resolved && virtualPage(resolved)
|
||||
if (page) return page.inherits ? VIRTUAL_PREFIX + resolved : resolved
|
||||
}
|
||||
},
|
||||
|
||||
load: {
|
||||
filter: { id: notFoundRE },
|
||||
handler(id) {
|
||||
const [file, query] = splitQuery(id)
|
||||
if (query) return
|
||||
const page = virtualPage(file)
|
||||
if (!page) return
|
||||
|
||||
if (page.inherits) {
|
||||
const source = normalizePath(path.resolve(srcDir, page.inherits))
|
||||
return [
|
||||
`import Root, { __pageData as base } from ${JSON.stringify(source)}`,
|
||||
`export * from ${JSON.stringify(source)}`,
|
||||
`export default Root`,
|
||||
`export const __pageData = { ...base, relativePath: ${JSON.stringify(page.path)} }`
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
const helper = normalizePath(path.join(APP_PATH, 'theme.js'))
|
||||
return [
|
||||
'---',
|
||||
'title: "404"',
|
||||
'description: Not Found',
|
||||
'---',
|
||||
'',
|
||||
'<script setup>',
|
||||
`import RawTheme from '@theme/index'`,
|
||||
`import { resolveNotFound } from ${JSON.stringify(helper)}`,
|
||||
'',
|
||||
'const NotFound = resolveNotFound(RawTheme)',
|
||||
'</script>',
|
||||
'',
|
||||
'<NotFound />',
|
||||
''
|
||||
].join('\n')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in new issue