如何基于组件库修改Docusaurus博客外观及实现自定义功能？

博客列表页卡片样式改造 #

• 首先通过Docusaurus的Swizzle能力导出默认博客列表组件，执行命令：npm run swizzle @docusaurus/theme-classic BlogListPage -- --eject，执行后项目根目录会生成src/theme/BlogListPage目录，里面就是默认博客列表的完整源码，你可以直接修改。
• 因为Infima是Docusaurus内置的样式框架，不需要额外引入依赖，直接在组件的博客条目循环逻辑中，给每个条目外层添加Infima的卡片类名即可，示例结构参考：

{posts.map((post) => (
  <div key={post.id} className="card margin-bottom--lg">
    <div className="card__header">
      <h3><Link to={post.metadata.permalink}>{post.metadata.title}</Link></h3>
    </div>
    <div className="card__body">
      {post.metadata.description}
    </div>
    <div className="card__footer">
      <span>{post.metadata.date.toLocaleDateString()}</span>
    </div>
  </div>
))

• 修改完成后重启本地开发服务即可看到卡片效果，若需要调整样式，直接在项目的自定义CSS文件中覆写对应的Infima类属性即可。

底部横幅（Banner）实现 #

• 同样使用Swizzle能力导出默认底部组件，执行命令：npm run swizzle @docusaurus/theme-classic Footer -- --eject，导出后可在src/theme/Footer目录拿到Footer组件源码。
• 直接复用Infima的公告栏样式类实现和顶部公告栏一致的视觉效果，在Footer组件的最开头加入Banner结构即可，若需要可关闭能力，添加简单的React状态控制即可，示例代码：

import React, { useState } from 'react';

export default function Footer(props) {
  const [showBanner, setShowBanner] = useState(true);
  
  return (
    <>
      {showBanner && (
        <div className="alert alert--info padding-horiz--md padding-vert--sm">
          <div className="container">
            这里是你要展示的横幅内容
            <button 
              className="button button--link button--sm margin-left--md"
              onClick={() => setShowBanner(false)}
            >
              关闭
            </button>
          </div>
        </div>
      )}
      {/* 原有Footer的其他代码保持不变 */}
    </>
  )
}

• 如果需要固定在页面底部，给Banner的外层div添加position: sticky; bottom: 0; z-index: 100;的样式即可。

注意事项 #

• Swizzle导出的组件优先级高于Docusaurus默认组件，修改仅影响当前项目的对应功能，不会改动框架核心逻辑。
• 首次修改组件时建议仅调整UI结构和类名，保留原有数据获取和props传递逻辑，避免出现功能异常。
• Docusaurus版本升级时如果对应默认组件有变更，手动同步新的组件源码再应用你的自定义修改即可。

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