使用react和mdx设置网站链接预览（网站每个页面一个单独的图像）

Question

我有一个网站，例如“example.com”，主要的layout.jsx具有以下元数据。

export const metadata = {
  title: {
    template: '%s - example',
    default: 'example - exampledescriptionwebsite',
  },
  openGraph: {
    title: 'example',
    description: 'exampledescriptionwebsite',
    url: 'https://example.com/',
    type: 'website',
    images: [
      {
        url: 'https://example.com/previewimages.png',
        width: 800,
        height: 600,
        alt: 'Preview image of example.com',
      },
    ],
  },
};

我有一个博客版块，文件目录如下：

src
L public
  L images
    L previewimages.png
Lapp
 L Blog
   L page.jsx
   L wrapper.jsx 
   L BlogTitle
     L page.mdx
L layout.jsx

所以我试图让 example.com/BlogTitle 在复制链接并将其粘贴到 facebook/telegram/etc 时显示不同的标题、描述和图像，目前它仅根据 app/layout.jsx 显示页。

当我将layout.jsx添加到博客文件夹时，我无法使其动态化，因为该页面将加载所有博客基本详细信息（如博客列表页面），并包含指向wrapper.jsx的链接，这是实际的具体博客页面，将根据 BlogTitle page.mdx 文件中的博客详细信息填充。

因此它将把链接缩略图设置为博客列表页面而不是单个博客。

我已经在 BlogTitle/page.mdx 文件和 page,jsx 文件中设置了所有元数据只是为了测试，但所有元数据信息在网站渲染时都没有被读取或没有实现。

推送到 github 并托管在 vercel 上

如何使 src/app/layout.jsx 接受标题和描述， 动态图像？这似乎是我唯一的解决方案，拜托 如果我错了请纠正我

Answer 1

所以我只是创建元数据参数来接受来自layout.jsx 文件中的参数的数据。我确保参数是从 page.mdx 文件本身获取的，如下所示并且它有效......不敢相信我被困在这里这么久。只是将代码留在这里，以便它可以帮助像我这样的人，因为我还没有在 stackOverflow 中看到对我有帮助的回复

（mdx.js 内）

export async function getArticleBySlug(slug, type) {
  const filePath = path.join(process.cwd(), `src/app/${type}/${slug}/page.mdx`);

  if (!fs.existsSync(filePath)) {
    return null; // Return null if the file does not exist
  }

  const fileContent = fs.readFileSync(filePath, 'utf8');
  const { data, content } = matter(fileContent);

  return {
    metadata: data, // Frontmatter metadata
    content: await serialize(content), // Serialized MDX content
  };
}

（在layout.jsx内）

export async function generateMetadata({ params }) {
  // Dynamically load content based on the route
  const { slug } = params;
  let pageMetadata = {
    title: 'page title',
    description: 'page description',
    url: 'https://page/',
    image: 'https://page/defaultimage.png',
  };

  if (slug) {
    // Example for blog articles
    const articles = await loadArticles();
    const article = articles.find((a) => a.slug === slug);

    if (article) {
      pageMetadata = {
        title: `${article.title} - page`,
        description: article.description || pageMetadata.description,
        url: `https://page/${slug}`,
        image: article.image || pageMetadata.image,
      };
    }
  }

  return {
    title: {
      template: '%s - page',
      default: 'page description',
    },
    openGraph: {
      title: pageMetadata.title,
      description: pageMetadata.description,
      url: pageMetadata.url,
      type: 'website',
      images: [
        {
          url: pageMetadata.image,
          width: 800,
          height: 600,
          alt: 'image',
        },
      ],
    },
  };
}