"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { a: "a", blockquote: "blockquote", code: "code", em: "em", figure: "figure", h1: "h1", h3: "h3", h4: "h4", hr: "hr", li: "li", p: "p", pre: "pre", span: "span", strong: "strong", table: "table", tbody: "tbody", td: "td", th: "th", thead: "thead", tr: "tr", ul: "ul", ..._provideComponents(), ...props.components }; return _jsxs(_Fragment, { children: [_jsxs(_components.blockquote, { children: ["\n", _jsxs(_components.p, { children: ["在寻找个人博客解决方案的过程中，我发现市面上现有的博客系统要么过于简单，要么难以深度定制。虽然有许多一键部署的博客模板，但这些魔改套壳的方案往往无法满足个性化需求。作为一名开发者，我希望打造一个真正属于自己的博客平台，不仅用于知识分享和写作积累，更要通过这个过程", _jsx(_components.code, { children: "提升技术能力" }), "。"] }), "\n", _jsxs(_components.p, { children: ["在学习 ", _jsx(_components.code, { children: "Next.tsx" }), " 和 ", _jsx(_components.code, { children: "Nest.tsx" }), " 的过程中，我萌生了从零开始搭建博客系统的想法。这个项目不仅能满足我对博客平台的需求，还能作为一次", _jsx(_components.code, { children: "Node.tsx" }), "全栈开发的实践机会。本系列将详细介绍这个项目的开发历程和技术要点，希望能为有类似需求的开发者提供参考。"] }), "\n"] }), "\n", _jsx(_components.p, { children: _jsx(_components.a, { href: "https://wanyue.me/", children: "相关博客地址" }) }), "\n", _jsx(_components.h1, { id: "一nextjs简介", children: "一、Next.js简介" }), "\n", _jsx(_components.p, { children: "Next.tsx 是一个基于 React 的开源框架，旨在帮助开发者构建高性能、易于扩展的现代 Web 应用程序" }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h1, { id: "二为什么选用nextjs", children: "二、为什么选用Next.js" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "服务端渲染（SSR）与 SEO 优化" }), "：Next.tsx 提供的服务端渲染能力，使得页面内容在服务器端渲染后返回客户端，有助于提升首屏加载速度和搜索引擎优化（SEO）效果，尤其适用于需要良好 SEO 表现的博客系统。"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "App Router 路由系统" }), "：Next.tsx 采用的全新 App Router 路由系统提供了更清晰、灵活的路由配置方式，使得开发过程更加高效。"] }), "\n", _jsxs(_components.li, { children: [_jsxs(_components.strong, { children: ["活跃的社区和完善的", _jsx(_components.a, { href: "https://nextjs.org/", children: "官方文档" })] }), "：Next.tsx 拥有一个活跃的开发者社区，并且提供了详尽的官方文档，能帮助开发者快速上手和解决开发中遇到的问题。"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "React 技术栈的同步学习" }), "：作为一个基于 React 的框架，Next.tsx 与 React 的技术栈高度契合，开发者可以同步学习。"] }), "\n"] }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h1, { id: "三关键技术要点", children: "三、关键技术要点" }), "\n", _jsxs(_components.p, { children: ["在搭建博客系统的过程中，整体的安装步骤可以参考 Next.tsx 官方文档，根据自身需求进行定制。通过执行 ", _jsx(_components.code, { children: "npx create-next-app@latest" }), " 命令即可快速启动项目，创建符合需求的基础框架。接下来，本文将详细介绍在构建过程中涉及到的关键技术要点。"] }), "\n", _jsx(_components.h3, { id: "1app-router", children: "1、App Router" }), "\n", _jsxs(_components.p, { children: ["Next.js采用", _jsx(_components.code, { children: "文件路由" }), ",根据", _jsx(_components.a, { href: "https://nextjs.org/docs/app/getting-started/project-structure#folder-and-file-conventions", children: "文件夹以及文件名约定" }), "来动态生成路由，舍去了传统router路由编写，大大方便了开发者开发。"] }), "\n", _jsx(_components.h4, { id: "11基本路由构建", children: "1.1.基本路由构建" }), "\n", _jsx(_components.p, { children: "简单看下本项目目录结构：" }), "\n", _jsx("img", { src: "https://p.ipic.vip/np998q.jpg", alt: "image-20250102095517883" }), "\n", _jsxs(_components.p, { children: ["每个根路由的基本文件结构下一般都会", _jsx(_components.code, { children: "layout.tsx" }), "以及", _jsx(_components.code, { children: "page.tsx" }), "两个文件，对应布局以及具体页面内容"] }), "\n", _jsxs(_components.p, { children: ["layout中依靠", _jsx(_components.code, { children: "children" }), "挂在page页面内容。"] }), "\n", _jsx("img", { src: "https://p.ipic.vip/rpfuqc.jpg", alt: "image-20250102094751761" }), "\n", _jsx(_components.h4, { id: "12路由跳转", children: "1.2.路由跳转" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "客户端组件" }), "：使用", _jsx(_components.code, { children: "next/navigation" }), "的", _jsx(_components.code, { children: "useRouter" }), "函数，用法同vue-router"] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#FAFAFA", color: "#90A4AE" }, tabIndex: "0", "data-language": "tsx", "data-theme": "material-theme-lighter", children: _jsxs(_components.code, { "data-language": "tsx", "data-theme": "material-theme-lighter", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "use client" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "import" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " useRouter" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " }" }), _jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " from" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " \"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "next/navigation" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#9C3EDA" }, children: "const" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " router " }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "=" }), _jsx(_components.span, { style: { color: "#6182B8" }, children: " useRouter" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "()" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#90A4AE" }, children: "router" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#6182B8" }, children: "push" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "(" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "'" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "/xxx" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "'" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: ")" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: "..." }) })] }) }) }), "\n"] }), "\n", _jsxs(_components.li, { children: ["\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "服务端组件" }), "：使用", _jsx(_components.code, { children: "next/navigation" }), "的", _jsx(_components.code, { children: "redirect" }), "函数"] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#FAFAFA", color: "#90A4AE" }, tabIndex: "0", "data-language": "tsx", "data-theme": "material-theme-lighter", children: _jsxs(_components.code, { "data-language": "tsx", "data-theme": "material-theme-lighter", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "import" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " redirect" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " }" }), _jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " from" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " \"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "next/navigation" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#6182B8" }, children: "redirect" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "(" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "'" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "/xxx" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "'" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: ")" })] })] }) }) }), "\n"] }), "\n", _jsxs(_components.li, { children: ["\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "组件跳转" }), "：使用next/link的", _jsx(_components.code, { children: "" }), "组件"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "" }), "是一个内置组件，它扩展了 HTML", _jsx(_components.code, { children: "" }), "标签以提供路由之间的", _jsx(_components.a, { href: "https://nextjs.org/docs/app/building-your-application/routing/linking-and-navigating#2-prefetching", children: "预取" }), "和客户端导航。这是 Next.js 中路由之间导航的主要和推荐方式。"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "" }), "特性"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "客户端路由" }), "：\n", _jsx(_components.code, { children: "Link" }), " 使用的是 Next.js 的客户端路由，点击链接时无需刷新整个页面，页面切换更快。"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "预加载优化" }), "：\nNext.js 会自动预加载 ", _jsx(_components.code, { children: "Link" }), " 指向的页面（在页面视口内的链接），提升性能。"] }), "\n"] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#FAFAFA", color: "#90A4AE" }, tabIndex: "0", "data-language": "tsx", "data-theme": "material-theme-lighter", children: _jsx(_components.code, { "data-language": "tsx", "data-theme": "material-theme-lighter", style: { display: "grid" }, children: _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: "<" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: "Link" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " href" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "={" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "url" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "}>" })] }) }) }) }), "\n", _jsxs(_components.p, { children: ["一般来说在 Next.js 中，如果是", _jsx(_components.strong, { children: "应用内导航" }), "，优先使用 ", _jsx(_components.code, { children: "Link" }), "；如果是", _jsx(_components.strong, { children: "外部导航" }), "或与 SPA 优化无关的场景，使用原生 ", _jsx(_components.code, { children: "a" }), " 标签更为合适。"] }), "\n"] }), "\n", _jsxs(_components.li, { children: ["\n", _jsx(_components.p, { children: _jsx(_components.a, { href: "https://nextjs.org/docs/app/building-your-application/routing/linking-and-navigating#using-the-native-history-api", children: "history原生" }) }), "\n", _jsx(_components.p, { children: "具体参考官网文档，本项目暂未涉及" }), "\n"] }), "\n"] }), "\n", _jsx(_components.h4, { id: "13动态路由以及路由传参", children: "1.3.动态路由以及路由传参" }), "\n", _jsxs(_components.p, { children: ["Next.js中的动态路由需要涉及到一些特殊的文件夹命名格式（具体见下面整理）来设置，如上图posts目录下，存在[sort]这种的特殊目录结构，用于匹配单一路径段", _jsx(_components.code, { children: "/posts/xxx" }), "，如图所示，可以直接在page.tsx获取params的时候获取到所需要的id以及sort等参数。"] }), "\n", _jsxs(_components.p, { children: ["例子：访问", _jsx(_components.code, { children: "https://wanyue.me/posts/自动化工具/11" }), "对应的params为", _jsx(_components.code, { children: "{id:11,sort:\"自动化工具\"}" })] }), "\n", _jsx("img", { src: "https://p.ipic.vip/mr93pb.jpg", alt: "image-20250102095953906" }), "\n", _jsx(_components.h4, { id: "14文件约定整理", children: "1.4.文件约定整理" }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "1️⃣文件名格式和功能整理" }) }), "\n", _jsxs(_components.table, { children: [_jsx(_components.thead, { children: _jsxs(_components.tr, { children: [_jsx(_components.th, { children: "文件名" }), _jsx(_components.th, { children: "功能描述" })] }) }), _jsxs(_components.tbody, { children: [_jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx(_components.code, { children: "page.tsx" }) }), _jsx(_components.td, { children: "页面内容文件，定义路由的主渲染内容。" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx(_components.code, { children: "layout.tsx" }) }), _jsx(_components.td, { children: "布局文件，为当前及其子路由提供共享布局。" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx(_components.code, { children: "error.tsx" }) }), _jsx(_components.td, { children: "错误边界文件，捕获页面或子路由的运行时错误并显示自定义错误界面。" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx(_components.code, { children: "loading.tsx" }) }), _jsx(_components.td, { children: "加载状态文件，定义页面或子路由的数据加载时显示的占位内容。" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx(_components.code, { children: "default.tsx" }) }), _jsx(_components.td, { children: "默认子页面内容，当某个路由路径未匹配具体页面时显示的内容。" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx(_components.code, { children: "not-found.tsx" }) }), _jsx(_components.td, { children: "自定义 404 页面，用于处理路径未匹配的情况。" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx(_components.code, { children: "global-error.tsx" }) }), _jsxs(_components.td, { children: ["全局错误边界文件，用于捕获整个应用的运行时错误（需要放在 ", _jsx(_components.code, { children: "app" }), " 根目录下）。"] })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx(_components.code, { children: "head.tsx" }) }), _jsxs(_components.td, { children: ["自定义 ", _jsx(_components.code, { children: "" }), " 标签内容，例如动态设置页面标题和元信息（在 App Router 模式中已被弃用，改用 ", _jsx(_components.code, { children: "metadata" }), " API）。"] })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx(_components.code, { children: "template.tsx" }) }), _jsx(_components.td, { children: "动态布局文件，为路由提供动态布局切换功能。" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx(_components.code, { children: "route.tsx" }) }), _jsxs(_components.td, { children: ["定义 API 路由，用于提供服务端接口（在 App Router 中的路由定义方式，与 Pages Router 的 ", _jsx(_components.code, { children: "api" }), " 不同）。"] })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx(_components.code, { children: "middleware.tsx" }) }), _jsx(_components.td, { children: "定义全局中间件，用于处理请求的预处理，例如认证或重定向。" })] })] })] }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "2️⃣特殊格式和功能整理" }) }), "\n", _jsxs(_components.table, { children: [_jsx(_components.thead, { children: _jsxs(_components.tr, { children: [_jsx(_components.th, { children: "格式" }), _jsx(_components.th, { children: "功能描述" }), _jsx(_components.th, { children: "示例路由" })] }) }), _jsxs(_components.tbody, { children: [_jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx(_components.code, { children: "[param]" }) }), _jsx(_components.td, { children: "动态路由，匹配单一路径段" }), _jsx(_components.td, { children: _jsx(_components.code, { children: "/blog/:slug" }) })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx(_components.code, { children: "[[...param]]" }) }), _jsx(_components.td, { children: "可选动态路由，路径可空或多段匹配" }), _jsx(_components.td, { children: _jsx(_components.code, { children: "/docs/*" }) })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx(_components.code, { children: "[...param]" }) }), _jsx(_components.td, { children: "匹配所有路径段，至少一段" }), _jsx(_components.td, { children: _jsx(_components.code, { children: "/catch-all/*" }) })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx(_components.code, { children: "@folder" }) }), _jsx(_components.td, { children: "逻辑分组，不参与路由生成" }), _jsx(_components.td, { children: "不生成路由" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx(_components.code, { children: "(folder)" }) }), _jsx(_components.td, { children: "逻辑嵌套，不影响路由路径" }), _jsx(_components.td, { children: _jsx(_components.code, { children: "/login" }) })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx(_components.code, { children: "_folder" }) }), _jsx(_components.td, { children: "忽略文件夹，不参与路由或构建" }), _jsx(_components.td, { children: "不生成路由，不可导入" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx(_components.code, { children: "segment@condition" }) }), _jsx(_components.td, { children: "匹配特定条件的动态路由" }), _jsx(_components.td, { children: _jsx(_components.code, { children: "/product/electronics" }) })] })] })] }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { id: "2数据请求", children: "2、数据请求" }), "\n", _jsxs(_components.p, { children: ["Next.js支持多种常用的网络请求，像", _jsx(_components.code, { children: "axios" }), "、", _jsx(_components.code, { children: "fecth" }), "等，本项目封装了axios进行网络数据请求，一般在", _jsx(_components.code, { children: "服务端组件" }), "中请求"] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#FAFAFA", color: "#90A4AE" }, tabIndex: "0", "data-language": "tsx", "data-theme": "material-theme-lighter", children: _jsxs(_components.code, { "data-language": "tsx", "data-theme": "material-theme-lighter", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#9C3EDA" }, children: "class" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: " Request" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#9C3EDA" }, children: " private" }), _jsx(_components.span, { style: { color: "#E53935" }, children: " instance" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: " AxiosInstance" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#9C3EDA" }, children: " constructor" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "(" }), _jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: "config" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: " AxiosRequestConfig" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ")" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " this." }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "instance" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " =" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " axios" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#6182B8" }, children: "create" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "(" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "config" }), _jsx(_components.span, { style: { color: "#E53935" }, children: ")" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: " // 请求拦截器" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " this." }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "instance" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "interceptors" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "request" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#6182B8" }, children: "use" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "(" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#9C3EDA" }, children: " async" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " (" }), _jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: "config" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: " InternalAxiosRequestConfig" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ")" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " =>" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: " // 默认用户鉴权" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " if" }), _jsx(_components.span, { style: { color: "#E53935" }, children: " (" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "config" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "url" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "?." }), _jsx(_components.span, { style: { color: "#6182B8" }, children: "includes" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "(" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "auth" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#E53935" }, children: ")) " }), _jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "return" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " config" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#9C3EDA" }, children: " const" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " token" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " =" }), _jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " await" }), _jsx(_components.span, { style: { color: "#6182B8" }, children: " getToken" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "()" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#90A4AE" }, children: " config" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "headers" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "[" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "Authorization" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "] " }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "=" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " \"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "Bearer " }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " +" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " token" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " return" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " config" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: " }," }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " (" }), _jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: "error" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: " AxiosError" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ")" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " =>" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " return" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: " Promise" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#6182B8" }, children: "reject" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "(" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "error" }), _jsx(_components.span, { style: { color: "#E53935" }, children: ")" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: " }" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E53935" }, children: " )" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: " // 响应拦截器" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " this." }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "instance" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "interceptors" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "response" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#6182B8" }, children: "use" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "(" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " (" }), _jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: "response" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: " AxiosResponse" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ")" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " =>" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " return" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " response" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "data" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: " }," }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " (" }), _jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: "error" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: " AxiosError" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ")" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " =>" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " return" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: " Promise" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#6182B8" }, children: "reject" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "(" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "error" }), _jsx(_components.span, { style: { color: "#E53935" }, children: ")" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: " }" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E53935" }, children: " )" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: " }" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: " // 公共方法" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " fetchData" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "<" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: "T" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ">(" }), _jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: "options" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: " AxiosRequestConfig" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "):" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: " Promise" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "<" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: "T" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ">" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " return" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " new" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: " Promise" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "(" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "(" }), _jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: "resolve" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," }), _jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: " reject" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ")" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " =>" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " this." }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "instance" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " ." }), _jsx(_components.span, { style: { color: "#6182B8" }, children: "request" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "<" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: "any" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," }), _jsx(_components.span, { style: { color: "#E2931D" }, children: " T" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ">" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "(" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "options" }), _jsx(_components.span, { style: { color: "#E53935" }, children: ")" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " ." }), _jsx(_components.span, { style: { color: "#6182B8" }, children: "then" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "(" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "(" }), _jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: "res" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ")" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " =>" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#6182B8" }, children: " resolve" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "(" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "res" }), _jsx(_components.span, { style: { color: "#E53935" }, children: ")" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " }" }), _jsx(_components.span, { style: { color: "#E53935" }, children: ")" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " ." }), _jsx(_components.span, { style: { color: "#6182B8" }, children: "catch" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "(" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "(" }), _jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: "err" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ")" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " =>" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#6182B8" }, children: " reject" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "(" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "err" }), _jsx(_components.span, { style: { color: "#E53935" }, children: ")" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " }" }), _jsx(_components.span, { style: { color: "#E53935" }, children: ")" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " }" }), _jsx(_components.span, { style: { color: "#E53935" }, children: ")" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: " }" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " get" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "<" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: "T" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ">(" }), _jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: "options" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: " AxiosRequestConfig" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "):" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: " Promise" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "<" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: "T" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ">" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " return" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " this." }), _jsx(_components.span, { style: { color: "#6182B8" }, children: "fetchData" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "<" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: "T" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ">" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "(" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "{" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " ..." }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "options" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," }), _jsx(_components.span, { style: { color: "#E53935" }, children: " method" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " \"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "GET" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " }" }), _jsx(_components.span, { style: { color: "#E53935" }, children: ")" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: " }" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " post" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "<" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: "T" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ">(" }), _jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: "options" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: " AxiosRequestConfig" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "):" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: " Promise" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "<" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: "T" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ">" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " return" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " this." }), _jsx(_components.span, { style: { color: "#6182B8" }, children: "fetchData" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "(" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "{" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " ..." }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "options" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," }), _jsx(_components.span, { style: { color: "#E53935" }, children: " method" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " \"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "POST" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " }" }), _jsx(_components.span, { style: { color: "#E53935" }, children: ")" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: " }" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " put" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "<" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: "T" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ">(" }), _jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: "options" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: " AxiosRequestConfig" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "):" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: " Promise" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "<" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: "T" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ">" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " return" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " this." }), _jsx(_components.span, { style: { color: "#6182B8" }, children: "fetchData" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "(" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "{" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " ..." }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "options" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," }), _jsx(_components.span, { style: { color: "#E53935" }, children: " method" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " \"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "PUT" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " }" }), _jsx(_components.span, { style: { color: "#E53935" }, children: ")" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: " }" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " delete" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "<" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: "T" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ">(" }), _jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: "options" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: " AxiosRequestConfig" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "):" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: " Promise" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "<" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: "T" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ">" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " return" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " this." }), _jsx(_components.span, { style: { color: "#6182B8" }, children: "fetchData" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "(" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "{" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " ..." }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "options" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," }), _jsx(_components.span, { style: { color: "#E53935" }, children: " method" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " \"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "DELETE" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " }" }), _jsx(_components.span, { style: { color: "#E53935" }, children: ")" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: " }" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: "}" }) })] }) }) }), "\n", _jsx(_components.p, { children: "在服务端组件中正常在页面函数中请求即可" }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#FAFAFA", color: "#90A4AE" }, tabIndex: "0", "data-language": "tsx", "data-theme": "material-theme-lighter", children: _jsx(_components.code, { "data-language": "tsx", "data-theme": "material-theme-lighter", style: { display: "grid" }, children: _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#9C3EDA" }, children: " const" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " posts " }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "=" }), _jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " await" }), _jsx(_components.span, { style: { color: "#6182B8" }, children: " getPostList" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "(queryParams)" })] }) }) }) }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { id: "3数据渲染", children: "3、数据渲染" }), "\n", _jsxs(_components.p, { children: ["Next.js的数据渲染主要分为两块：", _jsx(_components.strong, { children: "服务端组件" }), "和", _jsx(_components.strong, { children: "客户端组件" })] }), "\n", _jsx(_components.h4, { id: "31服务端组件", children: "3.1.服务端组件" }), "\n", _jsxs(_components.p, { children: ["Next.js组件", _jsx(_components.strong, { children: "默认服务端组件" }), "，服务端组件在服务器端渲染完成后，将生成的 HTML 直接发送到客户端。客户端仅接收 HTML，减轻了 JavaScript 的负担。"] }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "主要优势" }) }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "安全性" }), "大大提高，可将涉密的数据直接保存在服务器上，不会暴露给客户端。"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "首屏加载" }), "速率提高（SSR），我们可以生成 HTML 以允许用户立即查看页面，而无需等待客户端下载、解析和执行呈现页面所需的 JavaScript。"] }), "\n"] }), "\n", _jsx(_components.p, { children: _jsx(_components.a, { href: "https://nextjs.org/docs/app/building-your-application/rendering/server-components#benefits-of-server-rendering", children: "...更多优点" }) }), "\n", _jsx(_components.p, { children: "三种不同的服务器渲染策略：" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.a, { href: "https://nextjs.org/docs/app/building-your-application/rendering/server-components#static-rendering-default", children: "静态渲染" }), "：一般不会变动的页面渲染，例如：首页渲染"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.a, { href: "https://nextjs.org/docs/app/building-your-application/rendering/server-components#dynamic-rendering", children: "动态渲染" }), "：根据数据渲染的页面，比如post详情页面"] }), "\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "https://nextjs.org/docs/app/building-your-application/rendering/server-components#streaming", children: "流媒体" }) }), "\n"] }), "\n", _jsx(_components.h4, { id: "32客户端组件", children: "3.2.客户端组件" }), "\n", _jsxs(_components.p, { children: ["在Next.js中，要使用客户端组件的话需在顶部增加", _jsx(_components.code, { children: "use client" })] }), "\n", _jsxs(_components.p, { children: ["由于服务端组件不具备一些", _jsx(_components.strong, { children: "api" }), "以及一些", _jsx(_components.strong, { children: "页面交互" }), "逻辑的能力，这时候一般需要用到客户端组件，例如：", _jsx(_components.code, { children: "useState" }), "、", _jsx(_components.code, { children: "useEffet" }), "......"] }), "\n", _jsxs(_components.p, { children: ["两者具体使用场景可看官网介绍：", _jsx(_components.a, { href: "https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#when-to-use-server-and-client-components", children: "何时使用" })] }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { id: "4内置优化组件", children: "4、内置优化组件" }), "\n", _jsxs(_components.p, { children: ["Next,js做了许多", _jsx(_components.strong, { children: "内置优化" }), "，大大增强了用户体验。"] }), "\n", _jsxs(_components.p, { children: ["本次主要用到了以下几种优化：", _jsx(_components.code, { children: "" }), "、", _jsx(_components.code, { children: "" }), "、", _jsx(_components.code, { children: "" }), "、", _jsx(_components.code, { children: "Metadata" })] }), "\n", _jsxs(_components.h4, { id: "41图像优化image", children: ["4.1.图像优化", _jsx(_components.code, { children: "" })] }), "\n", _jsxs(_components.p, { children: ["Next.js 图像组件扩展了 HTML", _jsx(_components.code, { children: "" }), "元素，具有自动图像优化功能："] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "尺寸优化" }), "：使用 WebP 和 AVIF 等现代图像格式，自动为每台设备提供正确尺寸的图像。"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "视觉稳定性" }), "：加载图像时自动防止", _jsx(_components.a, { href: "https://nextjs.org/learn/seo/web-performance/cls", children: "布局偏移。" })] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "更快的页面加载" }), "：仅当图像进入视口时，才使用本机浏览器延迟加载来加载图像，并带有可选的模糊占位符。"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "资产灵活性" }), "：按需调整图像大小，即使对于存储在远程服务器上的图像也是如此"] }), "\n"] }), "\n", _jsxs(_components.p, { children: ["两种使用：本地图片、远程图片，使用方法同原生", _jsx(_components.code, { children: "" })] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#FAFAFA", color: "#90A4AE" }, tabIndex: "0", "data-language": "tsx", "data-theme": "material-theme-lighter", children: _jsxs(_components.code, { "data-language": "tsx", "data-theme": "material-theme-lighter", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "import" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " Image " }), _jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "from" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " '" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "next/image" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "'" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: "<" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: "Image" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#9C3EDA" }, children: " className" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "=" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "rounded-full" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#9C3EDA" }, children: " src" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "={" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "/images/avg.png" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "} " }), _jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: "//src分别挂在本地图片路径和远程图片路径即可" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#9C3EDA" }, children: " alt" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "=" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "头像" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#9C3EDA" }, children: " width" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "={" }), _jsx(_components.span, { style: { color: "#F76D47" }, children: "300" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "}" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#9C3EDA" }, children: " height" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "={" }), _jsx(_components.span, { style: { color: "#F76D47" }, children: "300" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "}" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " >" })] })] }) }) }), "\n", _jsxs(_components.h4, { id: "42字体优化font", children: ["4.2.字体优化", _jsx(_components.code, { children: "" })] }), "\n", _jsx(_components.p, { children: "如果需要获取和加载字体文件，则在项目中使用自定义字体可能会影响性能" }), "\n", _jsxs(_components.p, { children: ["Next.js 会自动优化应用程序中的字体", _jsx(_components.code, { children: "next/font" }), "。它会在构建时下载字体文件并将其与您的其他静态资产一起托管。这意味着当用户访问您的应用程序时，不会有额外的字体网络请求，从而影响性能。"] }), "\n", _jsxs(_components.p, { children: ["可以加载", _jsx(_components.strong, { children: "谷歌字体" }), "，也可以加载", _jsx(_components.strong, { children: "本地字体" })] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#FAFAFA", color: "#90A4AE" }, tabIndex: "0", "data-language": "tsx", "data-theme": "material-theme-lighter", children: _jsxs(_components.code, { "data-language": "tsx", "data-theme": "material-theme-lighter", style: { display: "grid" }, children: [_jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: "// 谷歌字体" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "import" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " Inter" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " }" }), _jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " from" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " '" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "next/font/google" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "'" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#90A4AE" }, children: " " }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "export" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " const" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " inter " }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "=" }), _jsx(_components.span, { style: { color: "#6182B8" }, children: " Inter" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "(" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "{" }), _jsx(_components.span, { style: { color: "#E53935" }, children: " subsets" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " [" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "'" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "latin" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "'" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "] " }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "}" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: ")" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "import" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " '" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "@/app/ui/global.css" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "'" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "import" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " inter" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " }" }), _jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " from" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " '" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "@/app/ui/fonts" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "'" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#90A4AE" }, children: " " }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "export" }), _jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " default" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " function" }), _jsx(_components.span, { style: { color: "#6182B8" }, children: " RootLayout" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "({" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: " children" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: "}:" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " children" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: " React" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#E2931D" }, children: "ReactNode" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: "})" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " return" }), _jsx(_components.span, { style: { color: "#E53935" }, children: " (" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " <" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "html" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " lang" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "=" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "en" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " <" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "body" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " className" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "={" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "`${" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "inter" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "className" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "}" }), _jsx(_components.span, { style: { color: "#91B859" }, children: " antialiased" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "`" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "}>{" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "children" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "}" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " )" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: "}" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: "// 本地字体" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "import" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " localFont " }), _jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "from" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " '" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "next/font/local" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "'" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#9C3EDA" }, children: "const" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " myFont " }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "=" }), _jsx(_components.span, { style: { color: "#6182B8" }, children: " localFont" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "(" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "{" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " src" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " \"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "../../public/fonts/LXGWWenKaiMonoScreen.ttf" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: "}" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: ")" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "export" }), _jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " default" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " async" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " function" }), _jsx(_components.span, { style: { color: "#6182B8" }, children: " RootLayout" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "({" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: " children" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: "}:" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: " Readonly" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "<{" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " children" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: " React" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#E2931D" }, children: "ReactNode" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: "}>)" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " return" }), _jsx(_components.span, { style: { color: "#E53935" }, children: " (" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " <" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "html" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " lang" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "=" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "en" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " className" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "=" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "light" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " <" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "body" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#9C3EDA" }, children: " className" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "={" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "`${" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "myFont" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "className" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "}" }), _jsx(_components.span, { style: { color: "#91B859" }, children: " relative m-0 h-full overflow-y-auto overflow-x-hidden p-0 text-default-700" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "`" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "}" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: " >" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " <>{" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "children" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "}" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " " })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E53935" }, children: " )" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: "}" }) })] }) }) }), "\n", _jsx(_components.h4, { id: "43metadata", children: "4.3.MetaData" }), "\n", _jsx(_components.p, { children: "Next.js 有一个元数据 API，可用于定义应用程序元数据。您可以通过两种方式向应用程序添加元数据：" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "基于配置" }), "：在或文件中导出", _jsxs(_components.a, { href: "https://nextjs.org/docs/app/api-reference/functions/generate-metadata#metadata-object", children: ["静态", _jsx(_components.code, { children: "metadata" }), "对象"] }), "或动态", _jsxs(_components.a, { href: "https://nextjs.org/docs/app/api-reference/functions/generate-metadata#generatemetadata-function", children: [_jsx(_components.code, { children: "generateMetadata" }), "函数"] }), "。", _jsx(_components.code, { children: "layout.js``page.js" })] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "基于文件" }), "：Next.js 有一系列专门用于元数据目的的特殊文件：", "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "favicon.ico" }), "、", _jsx(_components.code, { children: "apple-icon.jpg" }), "和", _jsx(_components.code, { children: "icon.jpg" }), "：用于网站图标和图标"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "opengraph-image.jpg" }), "和", _jsx(_components.code, { children: "twitter-image.jpg" }), "：用于社交媒体图片"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "robots.txt" }), "：提供搜索引擎抓取的说明"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "sitemap.xml" }), "：提供有关网站结构的信息"] }), "\n"] }), "\n"] }), "\n"] }), "\n", _jsx(_components.p, { children: "您可以灵活地使用这些文件作为静态元数据，也可以在您的项目中以编程方式生成它们。" }), "\n", _jsxs(_components.p, { children: ["通过这两个选项，Next.js 将自动", _jsx(_components.code, { children: "" }), "为您的页面生成相关元素。"] }), "\n", _jsxs(_components.p, { children: ["本项目使用MetaData设置", _jsx(_components.strong, { children: "页面图标" }), "、", _jsx(_components.strong, { children: "页面标题" }), "、", _jsx(_components.strong, { children: "页面描述" })] }), "\n", _jsxs(_components.p, { children: ["页面图标即用", _jsx(_components.code, { children: "favicon.ico" }), "以及", _jsx(_components.code, { children: "opengraph-image.jpg" })] }), "\n", _jsx("u", { children: _jsx(_components.strong, { children: "页面标题" }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "静态标题" }), "，直接export metaData对象即可"] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#FAFAFA", color: "#90A4AE" }, tabIndex: "0", "data-language": "tsx", "data-theme": "material-theme-lighter", children: _jsxs(_components.code, { "data-language": "tsx", "data-theme": "material-theme-lighter", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "import" }), _jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " type" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " Metadata" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " }" }), _jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " from" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " \"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "next" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "export" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " const" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " metadata" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: " Metadata" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " =" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " title" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " `" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "文章" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "`" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: "}" }) })] }) }) }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "页面标题模版" }) }), "\n", _jsxs(_components.p, { children: ["在根布局中，更新", _jsx(_components.code, { children: "metadata" }), "对象以包含模板："] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#FAFAFA", color: "#90A4AE" }, tabIndex: "0", "data-language": "tsx", "data-theme": "material-theme-lighter", children: _jsxs(_components.code, { "data-language": "tsx", "data-theme": "material-theme-lighter", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "export" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " const" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " metadata" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: " Metadata" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " =" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " title" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " template" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " `" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "%s | " }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "${" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "process" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "env" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "NEXT_PUBLIC_BOK_NAME" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "}`" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " default" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " process" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "env" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "NEXT_PUBLIC_BOK_NAME " }), _jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "as" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: " string" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: " }," }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " description" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " process" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "env" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "NEXT_PUBLIC_BOK_NAME" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: "}" }) })] }) }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "%s" }), "模板中的将被替换为特定的页面标题。"] }), "\n", _jsx("img", { src: "https://p.ipic.vip/mqn74t.jpg", alt: "image-20250108155027128" }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "动态标题" }), "，比如具体id的文章页面"] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#FAFAFA", color: "#90A4AE" }, tabIndex: "0", "data-language": "tsx", "data-theme": "material-theme-lighter", children: _jsxs(_components.code, { "data-language": "tsx", "data-theme": "material-theme-lighter", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "export" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " async" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " function" }), _jsx(_components.span, { style: { color: "#6182B8" }, children: " generateMetadata" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "({" }), _jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: " params" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " }:" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: " Props" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "):" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: " Promise" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "<" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: "Metadata" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ">" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#9C3EDA" }, children: " const" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " post" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " =" }), _jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " await" }), _jsx(_components.span, { style: { color: "#6182B8" }, children: " getPostById" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "(" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "params" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "id" }), _jsx(_components.span, { style: { color: "#E53935" }, children: ")" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " return" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " title" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " post" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "title" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: " }" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: "}" }) })] }) }) }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { id: "5系统样式", children: "5、系统样式" }), "\n", _jsx(_components.h4, { id: "51样式-tailwindcss", children: "5.1.样式-TailwindCss" }), "\n", _jsxs(_components.p, { children: ["本项目采用", _jsx(_components.strong, { children: "Tailwind Css" }), "结合css的形式控制系统样式"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://tailwindcss.com/", children: "Tailwind CSS" }), "是一个实用优先的 CSS 框架，与 Next.js 配合得非常好。"] }), "\n", _jsx(_components.p, { children: "Nextjs项目初始化的时候可以直接安装，也可以手动安装" }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#FAFAFA", color: "#90A4AE" }, tabIndex: "0", "data-language": "shell", "data-theme": "material-theme-lighter", children: _jsxs(_components.code, { "data-language": "shell", "data-theme": "material-theme-lighter", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E2931D" }, children: "npm" }), _jsx(_components.span, { style: { color: "#91B859" }, children: " install" }), _jsx(_components.span, { style: { color: "#91B859" }, children: " -D" }), _jsx(_components.span, { style: { color: "#91B859" }, children: " tailwindcss" }), _jsx(_components.span, { style: { color: "#91B859" }, children: " postcss" }), _jsx(_components.span, { style: { color: "#91B859" }, children: " autoprefixer" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E2931D" }, children: "npx" }), _jsx(_components.span, { style: { color: "#91B859" }, children: " tailwindcss" }), _jsx(_components.span, { style: { color: "#91B859" }, children: " init" }), _jsx(_components.span, { style: { color: "#91B859" }, children: " -p" })] })] }) }) }), "\n", _jsx(_components.p, { children: "导入Tailwind样式" }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#FAFAFA", color: "#90A4AE" }, tabIndex: "0", "data-language": "css", "data-theme": "material-theme-lighter", children: _jsxs(_components.code, { "data-language": "css", "data-theme": "material-theme-lighter", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#90A4AE" }, children: "// global" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#E2931D" }, children: "css" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "@tailwind" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " base" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "@tailwind" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " components" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "@tailwind" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " utilities" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ";" })] })] }) }) }), "\n", _jsx(_components.p, { children: "推荐两个Tailwind插件" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "prettier-plugin-tailwindcss" }) }), "\n", _jsx(_components.p, { children: "tailwindcss格式化插件，搭配使用更佳" }), "\n"] }), "\n", _jsxs(_components.li, { children: ["\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "tailwind-merge" }) }), "\n", _jsxs(_components.p, { children: ["用于合并tailwindcss变量语句，搭配", _jsx(_components.code, { children: "clsx" }), "使用"] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#FAFAFA", color: "#90A4AE" }, tabIndex: "0", "data-language": "ts", "data-theme": "material-theme-lighter", children: _jsxs(_components.code, { "data-language": "ts", "data-theme": "material-theme-lighter", style: { display: "grid" }, children: [_jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: "// @/lib/helper" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "import" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " clsx " }), _jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "from" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " \"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "clsx" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "import" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " twMerge" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " }" }), _jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " from" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " \"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "tailwind-merge" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "export" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " const" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " clsxm " }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "=" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " (..." }), _jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: "args" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: " any" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "[]" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ")" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " =>" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " return" }), _jsx(_components.span, { style: { color: "#6182B8" }, children: " twMerge" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "(" }), _jsx(_components.span, { style: { color: "#6182B8" }, children: "clsx" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "(" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "args" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "))" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: "}" }) })] }) }) }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#FAFAFA", color: "#90A4AE" }, tabIndex: "0", "data-language": "tsx", "data-theme": "material-theme-lighter", children: _jsxs(_components.code, { "data-language": "tsx", "data-theme": "material-theme-lighter", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "import" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " clsxm" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " }" }), _jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " from" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " \"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "@/lib/helper" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#90A4AE" }, children: "className" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "={" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "clsxm" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "(" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " \"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "text-default-400 hover:text-default-700 items-center gap-1 cursor-pointer bg-white shadow-lg rounded-full border border-solid border-[#eee]" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: " isAtTop" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " ?" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " \"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "hidden" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " :" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " \"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "flex" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: ")}" }) })] }) }) }), "\n"] }), "\n"] }), "\n", _jsx(_components.h4, { id: "52组件库-nextui", children: "5.2.组件库-NextUI" }), "\n", _jsxs(_components.p, { children: ["市面上Next.js适用的UI组件库主要包括", _jsx(_components.strong, { children: "NextUI、Headless UI、Primereact、Mantine、Ant Design" }), "等，它们各具特色，分别适用于不同的开发需求和场景。", _jsx(_components.a, { href: "https://nextui.org/", children: "NextUI" }), " 听名字就是专门为 Next.js 量身定制的一款UI组件库，官网组件风格符合现代化审美，故本次选用NextUI。"] }), "\n", _jsx(_components.p, { children: "NextUI 将 TailwindCSS 的强大功能与 React Aria 相结合，提供完整的组件（逻辑和样式），由于 NextUI 使用 TailwindCSS 作为其样式引擎，因此两者适配性非常高。" }), "\n", _jsx(_components.p, { children: "安装：" }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#FAFAFA", color: "#90A4AE" }, tabIndex: "0", "data-language": "shell", "data-theme": "material-theme-lighter", children: _jsx(_components.code, { "data-language": "shell", "data-theme": "material-theme-lighter", style: { display: "grid" }, children: _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E2931D" }, children: "pnpm" }), _jsx(_components.span, { style: { color: "#91B859" }, children: " add" }), _jsx(_components.span, { style: { color: "#91B859" }, children: " @nextui-org/react" }), _jsx(_components.span, { style: { color: "#91B859" }, children: " framer-motion" })] }) }) }) }), "\n", _jsxs(_components.p, { children: ["pnpm安装需在", _jsx(_components.code, { children: ".npmrc" }), "中加入代码，将nextui包提升至根目录", _jsx(_components.code, { children: "node_modules" })] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { children: "public-hoist-pattern[]=*@nextui-org/*\n" }) }), "\n", _jsx(_components.p, { children: "Tailwindcss配置" }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#FAFAFA", color: "#90A4AE" }, tabIndex: "0", "data-language": "ts", "data-theme": "material-theme-lighter", children: _jsxs(_components.code, { "data-language": "ts", "data-theme": "material-theme-lighter", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#9C3EDA" }, children: "const" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "nextui" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "}" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " =" }), _jsx(_components.span, { style: { color: "#6182B8" }, children: " require" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "(" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "@nextui-org/react" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: ")" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: "/** " }), _jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "@" }), _jsx(_components.span, { style: { color: "#9C3EDA", fontStyle: "italic" }, children: "type" }), _jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " {" }), _jsx(_components.span, { style: { color: "#E2931D", fontStyle: "italic" }, children: "import('tailwindcss').Config" }), _jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "}" }), _jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: " */" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: "module.exports" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " =" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " content" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " [" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " \"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "./src/pages/**/*.{js,ts,jsx,tsx,mdx}" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " \"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "./src/components/**/*.{js,ts,jsx,tsx,mdx}" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " \"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "./src/app/**/*.{js,ts,jsx,tsx,mdx}" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " \"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "./src/ui/**/*.{js,ts,jsx,tsx,mdx}" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " \"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#90A4AE" }, children: " ]" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " theme" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " extend" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {}," })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: " }," }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " darkMode" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " \"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "class" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " plugins" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " [" }), _jsx(_components.span, { style: { color: "#6182B8" }, children: "nextui" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "(" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "{" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " prefix" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " \"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "nextui" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " addCommonColors" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#FF5370" }, children: " true" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " }" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: ")]" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: "};" }) })] }) }) }), "\n", _jsxs(_components.p, { children: ["设置", _jsx(_components.strong, { children: "NextUI Provider" })] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#FAFAFA", color: "#90A4AE" }, tabIndex: "0", "data-language": "tsx", "data-theme": "material-theme-lighter", children: _jsxs(_components.code, { "data-language": "tsx", "data-theme": "material-theme-lighter", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "import" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " NextUIProvider" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " }" }), _jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " from" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " \"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "@nextui-org/react" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "export" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " function" }), _jsx(_components.span, { style: { color: "#6182B8" }, children: " Providers" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "({" }), _jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: " children" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " }:" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" }), _jsx(_components.span, { style: { color: "#E53935" }, children: " children" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: " React" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#E2931D" }, children: "ReactNode" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " })" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " return" }), _jsx(_components.span, { style: { color: "#E53935" }, children: " (" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " <" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: "NextUIProvider" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "children" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "}" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " " })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E53935" }, children: " )" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: "}" }) })] }) }) }), "\n", _jsx(_components.p, { children: "app根目录下添加Providers" }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#FAFAFA", color: "#90A4AE" }, tabIndex: "0", "data-language": "tsx", "data-theme": "material-theme-lighter", children: _jsxs(_components.code, { "data-language": "tsx", "data-theme": "material-theme-lighter", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "export" }), _jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " default" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " function" }), _jsx(_components.span, { style: { color: "#6182B8" }, children: " RootLayout" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "({" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: " children" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: "}:" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: " Readonly" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "<{" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " children" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: " React" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#E2931D" }, children: "ReactNode" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: "}>)" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " return" }), _jsx(_components.span, { style: { color: "#E53935" }, children: " (" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " <" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: "Providers" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " <" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: "Header" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " <" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "main" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " className" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "=" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "relative z-[1] pt-[4.5rem] min-h-[calc(100vh-4.5rem)] " }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " <" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: "Toaster" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " position" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "=" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "bottom-right" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " />" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "children" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "}" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " <" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: "Footer" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " " })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E53935" }, children: " )" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: "}" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " })] }) }) }), "\n", _jsx(_components.p, { children: "即可使用NextUI组件" }), "\n", _jsx(_components.p, { children: "Button例子" }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#FAFAFA", color: "#90A4AE" }, tabIndex: "0", "data-language": "tsx", "data-theme": "material-theme-lighter", children: _jsxs(_components.code, { "data-language": "tsx", "data-theme": "material-theme-lighter", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "import" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " Button" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " }" }), _jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " from" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " \"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "@nextui-org/react" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: "<" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: "Button" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#9C3EDA" }, children: " disabled" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "={" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "copied" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "}" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#9C3EDA" }, children: " onPress" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "={" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "onCopy" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "}" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " isIconOnly" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#9C3EDA" }, children: " size" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "=" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "sm" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " fullWidth" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#9C3EDA" }, children: " variant" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "=" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "light" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: ">" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "copied " }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "?" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " (" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " <" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: "CopiedIcon" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " className" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "=" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "h-6 w-6" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " />" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#90A4AE" }, children: " ) " }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " (" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " <" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: "CopyIcon" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " className" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "=" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "h-6 w-6" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " />" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#90A4AE" }, children: " )" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "}" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: "" })] })] }) }) }), "\n", _jsxs(_components.h4, { id: "53动画库-framer-motion", children: ["5.3.动画库-", _jsx(_components.code, { children: "framer-motion" })] }), "\n", _jsx(_components.p, { children: "NextUI自身采用framer-motion实现组件动画等，本项目也采用framer-motion以此学习" }), "\n", _jsx(_components.p, { children: "NextUI安装的时候已经一并安装framer-motion" }), "\n", _jsxs(_components.p, { children: ["使用方法比较简单，看自身动画需要去参考", _jsx(_components.a, { href: "https://motion.dev/", children: "官方文档" }), "即可"] }), "\n", _jsx(_components.p, { children: "例子：" }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#FAFAFA", color: "#90A4AE" }, tabIndex: "0", "data-language": "tsx", "data-theme": "material-theme-lighter", children: _jsxs(_components.code, { "data-language": "tsx", "data-theme": "material-theme-lighter", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: "<" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: "motion.div" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#9C3EDA" }, children: " whileHover" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "={{" }), _jsx(_components.span, { style: { color: "#E53935" }, children: " scale" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#F76D47" }, children: " 1.2" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " }}" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#9C3EDA" }, children: " whileTap" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "={{" }), _jsx(_components.span, { style: { color: "#E53935" }, children: " scale" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#F76D47" }, children: " 0.8" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " }}" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#9C3EDA" }, children: " className" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "={" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "commonClassName" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "}" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: ">" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " <" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: "Icon" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " />" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: "" })] })] }) }) }), "\n", _jsx(_components.h4, { id: "54svg图标导入", children: "5.4.SVG图标导入" }), "\n", _jsxs(_components.p, { children: ["Next.js需要通过", _jsx(_components.code, { children: "@svgr/webpack" }), "才能直接导入SVG作为组件使用"] }), "\n", _jsxs(_components.p, { children: ["安装", _jsx(_components.code, { children: "@svgr/webpack" })] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#FAFAFA", color: "#90A4AE" }, tabIndex: "0", "data-language": "bash", "data-theme": "material-theme-lighter", children: _jsx(_components.code, { "data-language": "bash", "data-theme": "material-theme-lighter", style: { display: "grid" }, children: _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E2931D" }, children: "pnpm" }), _jsx(_components.span, { style: { color: "#91B859" }, children: " install" }), _jsx(_components.span, { style: { color: "#91B859" }, children: " @svgr/webpack" })] }) }) }) }), "\n", _jsxs(_components.p, { children: ["在", _jsx(_components.code, { children: "next.config.mjs" }), "设置"] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#FAFAFA", color: "#90A4AE" }, tabIndex: "0", "data-language": "ts", "data-theme": "material-theme-lighter", children: _jsxs(_components.code, { "data-language": "ts", "data-theme": "material-theme-lighter", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#9C3EDA" }, children: "const" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " nextConfig " }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "=" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " webpack" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "(" }), _jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: "config" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ")" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#90A4AE" }, children: " config" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "module" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "rules" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#6182B8" }, children: "push" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "(" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "{" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " test" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " /" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "\\." }), _jsx(_components.span, { style: { color: "#91B859" }, children: "svg" }), _jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "$" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "/" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " use" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#E53935" }, children: " [" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "@svgr/webpack" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "]" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " }" }), _jsx(_components.span, { style: { color: "#E53935" }, children: ") " }), _jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: "// 针对 SVG 的处理规则" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " return" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " config" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: " }" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: "}" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " })] }) }) }), "\n", _jsx(_components.p, { children: "即可直接导入使用" }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { id: "6主题切换", children: "6、主题切换" }), "\n", _jsxs(_components.p, { children: ["目前系统设置了", _jsx(_components.strong, { children: "明暗" }), "两套主题，主要是通过**", _jsx(_components.code, { children: "next-themes" }), "**实现"] }), "\n", _jsx(_components.p, { children: "安装：" }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#FAFAFA", color: "#90A4AE" }, tabIndex: "0", "data-language": "bash", "data-theme": "material-theme-lighter", children: _jsx(_components.code, { "data-language": "bash", "data-theme": "material-theme-lighter", style: { display: "grid" }, children: _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E2931D" }, children: "pnpm" }), _jsx(_components.span, { style: { color: "#91B859" }, children: " add" }), _jsx(_components.span, { style: { color: "#91B859" }, children: " next-themes" })] }) }) }) }), "\n", _jsx(_components.p, { children: "添加全局Provider包装组件" }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#FAFAFA", color: "#90A4AE" }, tabIndex: "0", "data-language": "tsx", "data-theme": "material-theme-lighter", children: _jsxs(_components.code, { "data-language": "tsx", "data-theme": "material-theme-lighter", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "use client" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "import" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " NextUIProvider" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " }" }), _jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " from" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " \"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "@nextui-org/react" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "import" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " ThemeProvider" }), _jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " as" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " NextThemesProvider" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " }" }), _jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " from" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " \"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "next-themes" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "export" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " function" }), _jsx(_components.span, { style: { color: "#6182B8" }, children: " Providers" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "({" }), _jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: " children" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " }:" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" }), _jsx(_components.span, { style: { color: "#E53935" }, children: " children" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: " React" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#E2931D" }, children: "ReactNode" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " })" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " return" }), _jsx(_components.span, { style: { color: "#E53935" }, children: " (" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " <" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: "NextUIProvider" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " <" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: "NextThemesProvider" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " attribute" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "=" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "class" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " defaultTheme" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "=" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "light" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "children" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "}" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " " })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E53935" }, children: " )" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: "}" }) })] }) }) }), "\n", _jsxs(_components.p, { children: ["通过", _jsx(_components.code, { children: "defaultTheme" }), "设置默认样式"] }), "\n", _jsxs(_components.p, { children: ["设置主题切换组件", _jsx(_components.code, { children: "ThemeSwitcher" })] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#FAFAFA", color: "#90A4AE" }, tabIndex: "0", "data-language": "tsx", "data-theme": "material-theme-lighter", children: _jsxs(_components.code, { "data-language": "tsx", "data-theme": "material-theme-lighter", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "use client" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "import" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " *" }), _jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " as" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " lodash " }), _jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "from" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " \"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "lodash" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "import" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " useTheme" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " }" }), _jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " from" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " \"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "next-themes" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "import" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " useCallback" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " useEffect" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " useState" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " }" }), _jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " from" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " \"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "react" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "import" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " Morning " }), _jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "from" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " \"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "../../public/svgs/太阳.svg" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "import" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " Night " }), _jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "from" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " \"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "../../public/svgs/月亮.svg" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#9C3EDA" }, children: "enum" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: " Themes" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " \"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "DARK" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " =" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " \"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "dark" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " \"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "LIGHT" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " =" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " \"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "light" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: "}" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#9C3EDA" }, children: "const" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " debouncedChangeTheme " }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "=" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " lodash" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#6182B8" }, children: "debounce" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "(" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "(" }), _jsx(_components.span, { style: { color: "#6182B8" }, children: "fn" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " ()" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " =>" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: " void" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ")" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " =>" }), _jsx(_components.span, { style: { color: "#6182B8" }, children: " fn" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "()" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," }), _jsx(_components.span, { style: { color: "#F76D47" }, children: " 200" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: ")" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "export" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " function" }), _jsx(_components.span, { style: { color: "#6182B8" }, children: " ThemeSwitcher" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "()" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#9C3EDA" }, children: " const" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " [" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "mounted" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " setMounted" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "]" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " =" }), _jsx(_components.span, { style: { color: "#6182B8" }, children: " useState" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "(" }), _jsx(_components.span, { style: { color: "#FF5370" }, children: "false" }), _jsx(_components.span, { style: { color: "#E53935" }, children: ")" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#9C3EDA" }, children: " const" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " theme" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " setTheme" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " }" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " =" }), _jsx(_components.span, { style: { color: "#6182B8" }, children: " useTheme" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "()" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#9C3EDA" }, children: " const" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " changeAnimation" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " =" }), _jsx(_components.span, { style: { color: "#6182B8" }, children: " useCallback" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "(" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "()" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " =>" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#9C3EDA" }, children: " const" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " morningDom" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " =" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " document" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#6182B8" }, children: "getElementsByClassName" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "(" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " \"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "morning" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " )[" }), _jsx(_components.span, { style: { color: "#F76D47" }, children: "0" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "] " }), _jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "as" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: " HTMLElement" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#9C3EDA" }, children: " const" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " nightDom" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " =" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " document" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#6182B8" }, children: "getElementsByClassName" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "(" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "night" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#E53935" }, children: ")[" }), _jsx(_components.span, { style: { color: "#F76D47" }, children: "0" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "] " }), _jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "as" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: " HTMLElement" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#9C3EDA" }, children: " const" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " ANIMATION_CLASSES" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " =" }), _jsx(_components.span, { style: { color: "#E53935" }, children: " [" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "-translate-y-full" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " \"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "opacity-0" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "]" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " if" }), _jsx(_components.span, { style: { color: "#E53935" }, children: " (" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "theme" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " ===" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " Themes" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "LIGHT" }), _jsx(_components.span, { style: { color: "#E53935" }, children: ") " }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "{" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#90A4AE" }, children: " nightDom" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "classList" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#6182B8" }, children: "add" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "(" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "..." }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "ANIMATION_CLASSES" }), _jsx(_components.span, { style: { color: "#E53935" }, children: ")" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#90A4AE" }, children: " morningDom" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "classList" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#6182B8" }, children: "remove" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "(" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "..." }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "ANIMATION_CLASSES" }), _jsx(_components.span, { style: { color: "#E53935" }, children: ")" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " }" }), _jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " else" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#90A4AE" }, children: " nightDom" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "classList" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#6182B8" }, children: "remove" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "(" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "..." }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "ANIMATION_CLASSES" }), _jsx(_components.span, { style: { color: "#E53935" }, children: ")" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#90A4AE" }, children: " morningDom" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "classList" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#6182B8" }, children: "add" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "(" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "..." }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "ANIMATION_CLASSES" }), _jsx(_components.span, { style: { color: "#E53935" }, children: ")" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: " }" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " }," }), _jsx(_components.span, { style: { color: "#E53935" }, children: " [" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "theme" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "])" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#9C3EDA" }, children: " const" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " changeTheme" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " =" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " ()" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " =>" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " switch" }), _jsx(_components.span, { style: { color: "#E53935" }, children: " (" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "theme" }), _jsx(_components.span, { style: { color: "#E53935" }, children: ") " }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "{" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " case" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " Themes" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "DARK" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#6182B8" }, children: " setTheme" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "(" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "Themes" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "LIGHT" }), _jsx(_components.span, { style: { color: "#E53935" }, children: ")" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " break" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " case" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " Themes" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "LIGHT" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#6182B8" }, children: " setTheme" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "(" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "Themes" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "DARK" }), _jsx(_components.span, { style: { color: "#E53935" }, children: ")" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " break" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " default" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#6182B8" }, children: " setTheme" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "(" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "Themes" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "LIGHT" }), _jsx(_components.span, { style: { color: "#E53935" }, children: ")" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: " }" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#6182B8" }, children: " changeAnimation" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "()" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: " }" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#9C3EDA" }, children: " const" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " callbackRef" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " =" }), _jsx(_components.span, { style: { color: "#6182B8" }, children: " useCallback" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "(" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " (" }), _jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: "ref" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: " HTMLDivElement" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " |" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: " null" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ")" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " =>" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " if" }), _jsx(_components.span, { style: { color: "#E53935" }, children: " (" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "!" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "ref" }), _jsx(_components.span, { style: { color: "#E53935" }, children: ") " }), _jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "return" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#6182B8" }, children: " changeAnimation" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "()" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: " }," }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " [" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "changeAnimation" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "]" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E53935" }, children: " )" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#6182B8" }, children: " useEffect" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "(" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "()" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " =>" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#6182B8" }, children: " setMounted" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "(" }), _jsx(_components.span, { style: { color: "#FF5370" }, children: "true" }), _jsx(_components.span, { style: { color: "#E53935" }, children: ")" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " }," }), _jsx(_components.span, { style: { color: "#E53935" }, children: " [])" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " if" }), _jsx(_components.span, { style: { color: "#E53935" }, children: " (" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "!" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "mounted" }), _jsx(_components.span, { style: { color: "#E53935" }, children: ") " }), _jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "return" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " null" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " return" }), _jsx(_components.span, { style: { color: "#E53935" }, children: " (" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " <" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "div" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " className" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "=" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "p-2" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " <" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "div" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#9C3EDA" }, children: " className" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "=" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "relative flex h-10 w-10 cursor-pointer items-center justify-center rounded-full border border-solid bg-gradient-to-b from-orange-400 to-yellow-400 p-2 dark:from-[#39598a] dark:to-[#79d7ed]" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#9C3EDA" }, children: " onClick" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "={()" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " =>" }), _jsx(_components.span, { style: { color: "#6182B8" }, children: " debouncedChangeTheme" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "(changeTheme)" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "}" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: " >" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " <" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "div" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#9C3EDA" }, children: " ref" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "={" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "callbackRef" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "}" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#9C3EDA" }, children: " className" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "=" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "morning absolute h-6 w-6 transform duration-1000 ease-in-out" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: " >" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " <" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: "Morning" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " className" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "=" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "h-full w-full" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " <" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "div" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " className" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "=" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "night absolute h-6 w-6 transform duration-1000 ease-in-out" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " <" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: "Night" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " className" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "=" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "h-full w-full" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " " })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E53935" }, children: " )" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: "}" }) })] }) }) }), "\n", _jsxs(_components.p, { children: ["通过使用", _jsx(_components.code, { children: "nest-themes" }), "中的", _jsx(_components.code, { children: "useTheme" }), "钩子可直接修改主题"] }), "\n", _jsxs(_components.p, { children: ["修改后结合TailwindCss的", _jsx(_components.a, { href: "https://tailwindcss.com/docs/customizing-colors", children: "colors" }), "可实现颜色自动切换"] }), "\n", _jsxs(_components.p, { children: ["例如全局文字颜色：", _jsx(_components.code, { children: "text-default-700" })] }), "\n", _jsxs(_components.p, { children: ["也可以通过", _jsx(_components.code, { children: "dark:***" }), "来设置，比如全局明暗高亮色"] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#FAFAFA", color: "#90A4AE" }, tabIndex: "0", "data-language": "ts", "data-theme": "material-theme-lighter", children: _jsxs(_components.code, { "data-language": "ts", "data-theme": "material-theme-lighter", style: { display: "grid" }, children: [_jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: "// tailwind.config.ts" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E2931D" }, children: " theme" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E2931D" }, children: " extend" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {}," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E2931D" }, children: " colors" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: " ...{" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E2931D" }, children: " highlight" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E2931D" }, children: " light" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " \"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "#61B9AF" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E2931D" }, children: " dark" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " \"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "pink" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: " }" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: " }" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: " }" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: " }," }) })] }) }) }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#FAFAFA", color: "#90A4AE" }, tabIndex: "0", "data-language": "css", "data-theme": "material-theme-lighter", children: _jsxs(_components.code, { "data-language": "css", "data-theme": "material-theme-lighter", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#90A4AE" }, children: "文字高亮：" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: "text-highlight-light" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " dark:" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: "text-highlight-dark" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#90A4AE" }, children: "背景高亮：" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: "bg-highlight-light" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " dark:" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: "bg-highlight-dark" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#90A4AE" }, children: "……" }) })] }) }) }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { id: "7环境变量", children: "7、环境变量" }), "\n", _jsxs(_components.p, { children: ["同React、Vue一样设置", _jsx(_components.code, { children: ".env" }), "文件"] }), "\n", _jsx("img", { src: "https://p.ipic.vip/lf3oe5.jpg", alt: "image-20250109143707419" }), "\n", _jsxs(_components.p, { children: ["使用还是直接", _jsx(_components.code, { children: "process.env.BOK_AUTHOR" })] }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { id: "8markdown渲染", children: "8、MarkDown渲染" }), "\n", _jsxs(_components.p, { children: ["具体可见：", _jsx(_components.a, { href: "https://wanyue.me/posts/%E8%87%AA%E5%8A%A8%E5%8C%96%E5%B7%A5%E5%85%B7/12", children: "Next.js 如何优雅地渲染 Markdown 文件？" })] }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { id: "9自动化部署", children: "9、自动化部署" }), "\n", _jsxs(_components.p, { children: ["采用", _jsx(_components.strong, { children: "Vercel" }), "导入Github仓库，进行自动更新部署，再通过Vercerl代理到自己服务器上。"] }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h1, { id: "四未来规划", children: "四、未来规划" }), "\n", _jsx(_components.h3, { id: "近期计划", children: _jsx(_components.strong, { children: "近期计划" }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "-" }), " ", _jsx(_components.em, { children: "[ ] SEO全文搜索" })] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "-" }), " ", _jsx(_components.em, { children: "[ ] 用户认证系统（OAuth 集成）" })] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "-" }), " ", _jsx(_components.em, { children: "[ ] 评论互动功能" })] }), "\n", _jsx(_components.h3, { id: "长期规划", children: "长期规划" }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "-" }), " ", _jsx(_components.em, { children: "[ ] 性能优化" })] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "-" }), " ", _jsx(_components.em, { children: "[ ] SEO完善" })] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "-" }), " ", _jsx(_components.em, { children: "[ ] 国际化支持" })] }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h1, { id: "五小结", children: "五、小结" }), "\n", _jsx(_components.p, { children: "本文主要介绍了Next.js博客前端的构建要点，涉及到Next.js小白学习的大部分基础要点，希望有所帮助～" }), "\n", _jsxs(_components.p, { children: ["代码地址： ", _jsx(_components.a, { href: "https://github.com/Lizh606/bok-next-client", children: "bok-next-client" })] })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent };

从零开始，打造属于自己的个性博客（Next.js 前端篇）

目录