如何在Docusaurus网站中获取Front Matter集成Cusdis评论系统？

你用{props.id}读取到front matter里的introduction是正常行为——这个props就是对应页面front matter中定义的字段值。如果这不是你需要的页面标识，得根据需求调整获取方式，以下是几种常见场景的解决方案：

场景1：在MDX页面中嵌入Cusdis #

将Cusdis封装成React组件，通过MDX内置钩子获取页面数据：

import React from 'react';
import { useMDXFrontmatter } from '@docusaurus/mdx-loader';
import { useLocation } from '@docusaurus/router';

export default function CusdisComment() {
  const { frontMatter } = useMDXFrontmatter();
  const location = useLocation();
  
  // 可按需选择用页面路径作为唯一标识，或保留front matter的id
  const pageId = location.pathname; 
  
  return (
    <>
      <script async defer src="https://cusdis.com/js/cusdis.es.js"></script>
      <div id="cusdis"
        data-host="https://cusdis.com"
        data-app-id="**********************************"
        data-page-id={pageId}
        data-page-url={window.location.href}
        data-page-title={frontMatter.title}
        data-theme="auto"
      ></div>
    </>
  );
}

// 在MDX页面中调用组件
<CusdisComment />

场景2：在全局布局中添加Cusdis（所有页面自动加载评论） #

修改自定义布局组件，用useCurrentPage钩子获取全局页面数据：

import React from 'react';
import Layout from '@theme/Layout';
import { useCurrentPage } from '@docusaurus/theme-common';

function CustomLayout(props) {
  const currentPage = useCurrentPage();
  
  return (
    <Layout {...props}>
      {props.children}
      {/* 仅在文档页面加载评论，可按需调整判断条件 */}
      {currentPage.type === 'doc' && (
        <>
          <script async defer src="https://cusdis.com/js/cusdis.es.js"></script>
          <div id="cusdis"
            data-host="https://cusdis.com"
            data-app-id="**********************************"
            data-page-id={currentPage.path}
            data-page-url={window.location.href}
            data-page-title={currentPage.metadata.title}
            data-theme="auto"
          ></div>
        </>
      )}
    </Layout>
  );
}

export default CustomLayout;

关键说明 #

• 如果需要用页面的路径/URL作为评论系统的唯一标识，优先用location.pathname或currentPage.path，避免和front matter的id混淆。
• 如果确实要使用front matter里的id，你之前的写法本身无问题，只需确认这符合Cusdis对data-page-id的需求（通常建议用唯一且稳定的标识，比如页面路径）。

内容的提问来源于stack exchange，提问作者Bhavya Verma