let MDX = dynamic(()=> import(`@/posts/${slug}.md`)); // √ 这是OK的slug动态改变的文件名
let MDX = dynamic(()=> import(`@/${month}/${slug}.md`)); // × 这会报错，变量动态修改了目录就会报错
Copy

swich(month) {
  case "18.1":
    MDX = dynamic(()=>import(`@/18.1/${slug}.md`))
    break
  case "18.2":
    MDX = dynamic(()=>import(`@/18.1/${slug}.md`))
    break
  ....
  // 这里要把我的所有目录结构都列出来
}
Copy

$ npm install --save mdx-bundler esbuild
Copy

import fs from 'fs';
import path from 'path';
import { bundleMDX } from 'mdx-bundler'
import { getMDXComponent } from 'mdx-bundler/client'

export default async function Post({ params }) {
    // 从param中能拿到路径中的month和slug
    let { month, slug } = params;
    // slug对应我们的文件名，因为有中文所以需要反转
    slug = querystring.unescape(slug);

    // 按照md或者mdx后缀去寻找对应的文件系统中的文件，读取文本内容
    var mdxPath = path.join(process.cwd(), month, `${slug}.mdx`);
    var mdPath = path.join(process.cwd(), month, `${slug}.md`);
    const mdxSource = fs.existsSync(mdxPath) ? 
        fs.readFileSync(mdxPath, 'utf8') : 
        fs.readFileSync(mdPath, 'utf8');

    // 用mdx-bundler解析mdx，解析成jsx代码
    const result = await bundleMDX({
        source: mdxSource,
    });

    // code是解析出的jsx代码，frontmatter是解析的前言部分
    const { code, frontmatter } = result

    // 通过getMDXComponent转换解析的code为react组件
    const Component = getMDXComponent(code)
    return (
        <>
            <main>
                <Component />
            </main>
        </>
  )
}
Copy

+ import remarkGfm from 'remark-gfm';
+ import rehypeSlug from 'rehype-slug';
+ import rehypePrismPlus from 'rehype-prism-plus';
+ import toc from "@jsdevtools/rehype-toc";
+ import remarkCodeTitles from "remark-flexible-code-titles";
+ import rehypeAutolinkHeadings from 'rehype-autolink-headings';

+ //注意@/rehypePlugins目录下是自定义的一部分组件后续会说他们的作用
+ import rehypeCodeCopyButton from '@/rehypePlugins/rehype-code-copy-button.mjs'
+ import rehypeImageSrcModifier from '@/rehypePlugins/rehype-image-src-modifier.mjs'
+ import rehypeTocExt from '@/rehypePlugins/rehype-toc-ext.mjs'

-     const result = await bundleMDX({
-         source: mdxSource,
-     });
+     const result = await bundleMDX({
+         source: mdxSource,
+         cwd: path.join(process.cwd(), 'app', 'components'),
+         mdxOptions: (options, frontmatter) => {
+           options.remarkPlugins = [
+                    ...(options.remarkPlugins ?? []), 
+                    ...[remarkGfm, remarkCodeTitles]
+                ]
+           options.rehypePlugins = [
+                    ...(options.rehypePlugins ?? []), 
+                    ...[
+                         rehypeSlug,
+                         [rehypeAutolinkHeadings, { behavior: 'wrap' }],
+                         [rehypePrismPlus, { ignoreMissing: true, showLineNumbers: true }],
+                         rehypeCodeCopyButton,
+                         rehypeImageSrcModifier,
+                         toc,
+                         rehypeTocExt,
+                     ]
+                 ]
+         return options;
+         },
+         esbuildOptions: options => {
+           options.outdir = path.join(process.cwd(), 'public')
+           options.write = true
+           return options
+         }
+     })
Copy

import { visit } from 'unist-util-visit';

export default function rehypeTocExt() {
  return (tree) => {
    let tocNav = null;
    
    // 遍历ast树所有dom节点找到 nav标签，并且class=toc将其删除
    // nav.toc是另一个toc插件生成的dom
    visit(tree, 'element', (node, index, parent) => {
      if (node.tagName === 'nav' && node.properties && node.properties.className && node.properties.className.includes('toc')) {
        tocNav = node;
        parent.children.splice(index, 1); 
      }
    });

    // 创建3个div，一个是container，一个是content，一个是toc
    // 第1个 包含 后面2个
    const { children } = tree;
    const container = {
      type: 'element',
      tagName: 'div',
      properties: { className: ['container-wrapper', 'container'] },
      children: [],
    };
    const contentDiv = {
      type: 'element',
      tagName: 'div',
      properties: { className: ['content-wrapper'] },
      children: [],
    };

    // 把tocNav塞到toc中
    const tocDiv = {
      type: 'element',
      tagName: 'div',
      properties: { className: ['toc-wrapper'] },
      children: [tocNav],
    };

    // 把原来tree下面所有节点，塞到content中
    while (children.length > 0) {
      contentDiv.children.push(children.shift());
    }

    container.children.push(contentDiv);
    container.children.push(tocDiv);
    children.push(container);
  };
}
Copy

import readingTime from'reading-time'

......
......
    // 这个库根据字数，推算大概需要的阅读时间
    const { text: readingTimeText } = readingTime(mdxSource);
......
    const { code, frontmatter } = result
......

    return 
    <>
     <header>
        {/* 从frontmatter中获取title展示到最上面作为标题 */}
        <h1>{frontmatter.title || slug}</h1>

        {/* 从frontmatter中获取description展示到第2行 */}
        {frontmatter.description && <p>{frontmatter.description}</p>}
        
        <div className='flex gap-4'>
             {/* 阅读时间和tags展示 */}
            <span>{readingTimeText  + (frontmatter.created ? (" created at" + frontmatter.created):  "")}</span>
          <div>
            {frontmatter.tags && frontmatter.tags
                .split(',').filter(item => item.trim().length)
                .map((tag, i) => 
                (<span key={i} 
                    className='bg-green-600 text-white px-2 py-1 rounded-md mr-1 text-sm'>
                    {tag.trim()}
                </span>))}
          </div>
        </div>
        <hr></hr>
      </header>
      <main>
        <Component />
      </main>
    </>
Copy

......
export async function generateStaticParams() {
  const path = require('path');
  const POSTS_PATH = process.cwd();
  var filenames = fs.readdirSync(POSTS_PATH);
  // 搜索当前路径下所有的24.06这种格式的路径，这是我存放blog文件的地方
  const monthes = filenames.filter(item => item.match(/\d\d\.\d\d?/));

  // 然后在这个月份路径下面，搜索所有的md和mdx格式的文件
  return monthes.flatMap((month) => {
    const filenames = fs.readdirSync(path.join(POSTS_PATH, month));
    const posts = filenames.filter(item => item.match(/\.mdx?/))
      .map(item => {
        const slug = item.replace(/\.mdx?/, '');
        return { slug, month };
      });
    return posts;
  })
}
Copy

$ npm i @giscus/react
Copy

'use client'
import Giscus from '@giscus/react';

export default function () {
    return <Giscus
        id="comments"
        repo="sunwu51/notebook"
        repoId="MDEwOlJlcG9zaXRvcnkxMTkxNjk2MzE="
        category="General"
        categoryId="DIC_kwDOBxpiX84CfzJL"
        mapping="url"
        term=""
        reactionsEnabled="1"
        emitMetadata="0"
        inputPosition="top"
        theme="light"
        lang="zh-CN"
        loading="lazy"
    />
}
Copy

import Discussion from '@/app/components/Discussion';

......
    <main>
        <Component />
    </main>
    <div className='container mx-auto py-12 px-0'>
        <Discussion />
    </div>
Copy

<DirectoryTree
    multiple        
    defaultExpandAll
    treeData={[
        {title: '文章1的题目', children: [{ title: 'page.mdx', isLeaf: true}]},
        {title: '文章2的题目', children: [{ title: 'page.mdx', isLeaf: true}]},
        {title: '文章3的题目', children: [{ title: 'page.mdx', isLeaf: true}]},
        ]}
    />
Copy

$ npm i antd
Copy

'use client'
import { Tree } from 'antd'; // 这里还可以引入其他你需要的组件
const { DirectoryTree } = Tree; 

export {  DirectoryTree }
Copy

import { DirectoryTree } from '@/app/components/Antd';
......
        <main>
            <Component components={{
                DirectoryTree,
                // 如果其他第三方组件要注册，写在这里即可
            }} />
        </main>
Copy