如何克隆并定制Docusaurus Showcase页面？

别直接复制官网代码，提取核心逻辑就行 #

官网项目堆了大量自定义配置、内部组件和无关内容，直接复制大概率出问题，不如从零搭建Showcase核心结构，复用官网的展示逻辑但适配自己的项目。

解决"React is not defined"错误 #

• 确保你的组件文件顶部必须写：import React from 'react';，哪怕Docusaurus默认支持自动导入，手动加能避免很多奇怪的报错
• 执行npm install重新安装依赖，有时候依赖缺失也会引发这类问题
• 清除项目缓存：运行npm run clear，再重启npm start，缓存冲突也可能导致该错误

从零搭建自己的Showcase页面 #

1. 在你的Docusaurus项目src/pages目录下新建showcase.js（用TypeScript的话就建showcase.tsx）
2. 基础结构示例：

import React from 'react';
import Layout from '@theme/Layout';

// 你的项目数据，按需修改字段和内容
const projects = [
  {
    name: '项目1',
    description: '这是我的第一个项目，主要实现了XX功能',
    image: '/img/project1.png', // 图片放在项目根目录的static/img文件夹里，没有就新建
    link: 'https://your-project-link.com'
  },
  {
    name: '项目2',
    description: '第二个项目的核心亮点是XX',
    image: '/img/project2.png',
    link: 'https://another-project.com'
  }
];

export default function Showcase() {
  return (
    <Layout title="我的作品集" description="展示我的个人项目成果">
      <div style={{ maxWidth: '1200px', margin: '0 auto', padding: '2rem' }}>
        <h1>我的作品集</h1>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: '2rem', marginTop: '2rem' }}>
          {projects.map((project, index) => (
            <div key={index} style={{ border: '1px solid #eee', borderRadius: '8px', padding: '1.5rem', textAlign: 'center', transition: 'box-shadow 0.2s' }}>
              <img src={project.image} alt={project.name} style={{ width: '100%', height: '200px', objectFit: 'cover', borderRadius: '4px' }} />
              <h2 style={{ marginTop: '1rem', fontSize: '1.2rem' }}>{project.name}</h2>
              <p style={{ color: '#666', marginTop: '0.5rem' }}>{project.description}</p>
              <a href={project.link} target="_blank" rel="noopener noreferrer" style={{ display: 'inline-block', marginTop: '1rem', padding: '0.5rem 1rem', backgroundColor: '#165DFF', color: 'white', borderRadius: '4px', textDecoration: 'none' }}>
                查看项目
              </a>
            </div>
          ))}
        </div>
      </div>
    </Layout>
  );
}

3. 把项目图片放到static/img目录下，没有这个目录就手动新建
4. 启动项目npm start，访问http://localhost:3000/showcase就能看到效果

优化小技巧 #

• 样式可以换成CSS模块：新建showcase.module.css文件，把样式写进去，再在组件里导入使用，比内联样式更整洁
• 如果想要官网的筛选功能，自己加个下拉框或搜索框，过滤projects数组就行，逻辑很简单
• 可以用Docusaurus自带的Card组件（版本支持的话）替换手写卡片，样式更贴合官方风格

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