企业官网建设流程全解析

深圳网站优化方案,顺德网站建设信息,全国市场主体登记注册服务网,网站建设的基础服务器MDX MDX是一种将Markdown和React组件混合在一起的语法#xff0c;它可以在Markdown中使用React组件#xff0c;从而实现更复杂的页面。另外就是我们在编写技术文档或者博客的时候#xff0c;配合SSG模式#xff0c;更喜欢用Markdown来编写#xff0c;MDX他正好将Markdown和…MDXMDX是一种将Markdown和React组件混合在一起的语法它可以在Markdown中使用React组件从而实现更复杂的页面。另外就是我们在编写技术文档或者博客的时候配合SSG模式更喜欢用Markdown来编写MDX他正好将Markdown和React组件混合在一起实在是方便至极。安装依赖npminstallnext/mdx mdx-js/loader mdx-js/react types/mdx启用MDX功能1.next.config.js配置以下内容//next.config.jsimporttype{NextConfig}fromnext;importcreateMDXfromnext/mdxconstwithMDXcreateMDX({//extension: /\.(md|mdx)$/ 默认只支持mdx文件,如果想额外支持md文件编写次行代码。});constnextConfig:NextConfig{reactCompiler:true,pageExtensions:[js,jsx,md,mdx,ts,tsx],};exportdefaultwithMDX(nextConfig);2.根目录下面创建mdx-components.tsx文件importtype{MDXComponents}frommdx/typesconstcomponents:MDXComponents{}exportfunctionuseMDXComponents():MDXComponents{returncomponents}创建文件my-project ├── app │ └── mdx-page │ └── page.(mdx/md) |── mdx-components.(tsx/js) └── package.json代码高亮打开编辑器-插件市场-搜索MDX-安装MDX插件基础使用可以支持(Markdown语法 React组件 HTML标签)# welcome to MDX 这是一段文字**他加粗了**并且有重点内容important。 - one - two - three div classNamebg-red-500 p自定义标签/p /div引入自定义组件引入自定义组件一定要跟md语法之间空一行否则会报错src/app/home/page.mdximport MyComponent from ./my-component; //引入自定义组件一定要跟md语法之间空一行否则会报错。 # welcome to MDX 这是一段文字**他加粗了**并且有重点内容important。 - one - two - three div classNamebg-red-500 p自定义标签/p /div MyComponent /mdx文件无法实现一些复杂的交付逻辑如果有复杂的交付逻辑我们可以使用React组件来实现然后在mdx文件中引入即可。//src/app/home/my-component.tsxuse clientimport{useState}fromreact;exportdefaultfunctionMyComponent(){const[count,setCount]useState(0);return(divpCount:{count}/pbutton onClick{()setCount(count1)}Increment/button/div);}全局样式如果你希望在这个项目中修改所有的MDX文件的样式你可以使用mdx-components.tsx文件来修改。//mdx-components.tsximporttype{MDXComponents}frommdx/typesconstcomponents:MDXComponents{h1:({children})h1 classNametext-2xl text-red-400 font-bold{children}/h1,//# 代表h1 你可以自定义修改样式li:({children})li classNamelist-disc text-blue-500 list-inside{children}/li,//- 代表li 你可以自定义修改样式//...你可以自定义修改更多的样式}exportfunctionuseMDXComponents():MDXComponents{returncomponents}远程加载mdx/md文件如果你的MDX文件存储在远程服务器上你可以使用远程mdx来加载文件。npminstallnext-mdx-remote-client//src/app/home/page.tsximport{MDXRemote}fromnext-mdx-remote-client/rscexportdefaultasyncfunctionHome(){constresawaitfetch(https://nextjs-docs-henna-six.vercel.app/xm.mdx)//链接是彩蛋constsourceawaitres.text()return(MDXRemote source{source}/);}