Skip to Content
🎉 Nextra 4.0 已发布。Dima Machina 正在 寻找新的工作或咨询机会

远程内容

Note

您可以查看 SWR i18n 示例 的源代码。

创建 [[...slug]]/page.tsx 文件

app/ 目录中创建 [[...slug]]/page.tsx 文件,内容如下:

app/graphql-eslint/[[...slug]]/page.tsx
import { notFound } from 'next/navigation' import { compileMdx } from 'nextra/compile' import { Callout, Tabs } from 'nextra/components' import { evaluate } from 'nextra/evaluate' import { convertToPageMap, mergeMetaWithPageMap, normalizePageMap } from 'nextra/page-map' import { useMDXComponents } from '../../../../../mdx-components' const user = 'graphql-hive' const repo = 'graphql-eslint' const branch = '34b722a2a520599ce06a4ddcccc9623b76434089' const docsPath = 'website/src/pages/docs/' const filePaths = [ 'configs.mdx', 'custom-rules.mdx', 'getting-started.mdx', 'getting-started/parser-options.mdx', 'getting-started/parser.mdx', 'index.mdx' ] const { mdxPages, pageMap: _pageMap } = convertToPageMap({ filePaths, basePath: 'graphql-eslint' }) export const [eslintPage] = _pageMap[0].children const eslintPageMap = mergeMetaWithPageMap(eslintPage, { index: 'Introduction', 'getting-started': { title: 'Getting Started', items: { index: 'Overview', 'parser-options': '', parser: '' } }, configs: '', 'custom-rules': '' }) export const pageMap = normalizePageMap(eslintPageMap) const { wrapper: Wrapper, ...components } = useMDXComponents({ $Tabs: Tabs, Callout }) type PageProps = Readonly<{ params: Promise<{ slug: string[] }> }> export default async function Page(props: PageProps) { const params = await props.params const route = params.slug.join('/') const filePath = mdxPages[route] if (!filePath) { notFound() } const response = await fetch( `https://raw.githubusercontent.com/${user}/${repo}/${branch}/${docsPath}${filePath}` ) const data = await response.text() const rawJs = await compileMdx(data, { filePath }) const { default: MDXContent, toc, metadata } = evaluate(rawJs, components) return ( <Wrapper toc={toc} metadata={metadata}> <MDXContent /> </Wrapper> ) } export function generateStaticParams() { const params = Object.keys(mdxPages).map(route => ({ slug: route.split('/') })) return params }

增强 pageMap

您需要修改 layout 文件中的 pageMap 列表,以正确显示侧边栏和移动导航。

app/layout.tsx
import { getPageMap } from 'nextra/page-map' import { pageMap as graphqlEslintPageMap } from './graphql-eslint/[[...slug]]/page' // ... const pageMap = [...(await getPageMap()), graphqlEslintPageMap]
Last updated on