跳至正文
Wener Notes

nextra

约 2 分钟阅读
  • 支持 SSG, SSR, ISR
bash
pnpm add next react react-dom
pnpm add nextra nextra-theme-{docs,blog}

pnpm run next dev
依赖包
  • /
    • theme.config.{jsx,tsx}
    • pages/
      • index.{md,mdx}
      • _meta.json
        • title 映射
        • 顺序

markdown

GFM

text
## 标题 [#title]

docs

theme.config.jsx

text
// https://nextra.site/docs/docs-theme/theme-configuration
export default {
  logo: <span>My Nextra Documentation</span>,
  project: {
    link: 'https://github.com/wenerme/wener',
  },
};

_meta.json

json
{
  "index": {
    "title": "Home",
    "type": "page",
    "theme": {
      "layout": "raw",
      "typesetting": "article",
      "breadcrumb": false,
      "footer": true,
      "sidebar": false,
      "toc": true,
      "pagination": false
    }
  },
  "contact": {
    "display": "hidden"
  },
  "about": "About Us",
  "github_link": {
    "title": "Wener Github",
    "href": "https://github.com/wenerme",
    "newWindow": true
  },
  "company": {
    "title": "Company",
    "type": "menu",
    "items": {
      "about": {
        "title": "About",
        "href": "/about"
      },
      "contact": {
        "title": "Contact Us",
        "href": "mailto:[email protected]"
      }
    }
  },
  "*": {
    "type": "page"
  },
  "---": {
    "type": "separator"
  }
}
  • typesetting - default, article
  • layout - raw, full

Notes

  • 内容目录 ./content, ./src/content
  • 默认后缀 js, jsx, ts, tsx, md mdx
  • env
    • NEXTRA_LOCALES
    • NEXTRA_DEFAULT_LOCALE
  • 通过插件 resolve 的虚拟 module
    • private-next-root-dir
    • private-next-content-dir
  • 核心逻辑 loader - webpack loader
    • findMetaAndPageFilePaths
      • 内容目录 **/_meta.{js,jsx,ts,tsx}, **/*.{md,mdx}
      • appDir 目录
        • 会额外扫描 **/page.{js,jsx,jsx,tsx,md,mdx}, _meta.global.{js,jsx,ts,tsx}
        • 会排除 _ 开头目录
    • const { pageMap, mdxPages } = convertToPageMap({filePaths})
    • _meta.global.
    • convertPageMapToJs({ pageMap, mdxPages, globalMetaPath })
  • 构建的 pageMap 会通过 placeholder.js 访问
    • {pageMap: PageMapItem[]}
TypeScript
type TPageItem = { name: string; route: string; __pagePath: string };
type TMetaItem = { __metaPath: string };

interface TFolder<T = TItem> {
  name: string;
  route: string;
  children: T[];
}

export type TItem = TPageItem | TMetaItem | TFolder;

export type PageMapItem = Folder | MdxFile | MetaJsonFile;
export interface Folder<FileType = PageMapItem> {
  name: string;
  route: string;
  children: FileType[];
}
export type MdxFile<FrontMatterType = FrontMatter> = {
  name: string;
  route: string;
  frontMatter?: FrontMatterType;
};
export type MetaJsonFile = {
  data: {
    [fileName: string]: Meta;
  };
};

Nextra v4

  • NextJS 15 app route
  • React 19

关联信息

反向链接、本文链接的其他页面和外部资料。

参考资料

GitHub9 条
其他外链2 条
最近更新commit 180567c编辑