复制页面按钮

Installation

npm install docusaurus-plugin-copy-page-button

1. Clone and setup

git clone https://github.com/portdeveloper/docusaurus-plugin-copy-page-button.git
cd docusaurus-plugin-copy-page-button
npm install

Usage

Use Cases

• AI-Assisted Development: Quickly share documentation context with ChatGPT, Claude, Perplexity, or Gemini for coding help
• Code Reviews: Extract relevant documentation for code review discussions
• Content Analysis: Analyze documentation structure and content for improvements
• Knowledge Sharing: Easily share specific documentation sections with team members
• Documentation Migration: Extract content for migrating to other documentation platforms

Option 1: Auto-injection

Add the plugin to your docusaurus.config.js:

module.exports = {
  plugins: ["docusaurus-plugin-copy-page-button"],
};

The button automatically appears in the table of contents sidebar when one is visible. On mobile and no-TOC pages, it falls back to the top of the article.

Option 2: Choose placement

Use placement: "article" if your theme header, sidebar, or table of contents layout makes the sidebar placement awkward:

module.exports = {
  plugins: [
    [
      "docusaurus-plugin-copy-page-button",
      {
        placement: "article",
      },
    ],
  ],
};

Available values: - "auto" - sidebar on desktop when visible, article on mobile/no-TOC pages - "toc" - table of contents only - "article" - top of the article column

Option 3: Custom positioning

Use custom styles to position the button differently:

module.exports = {
  plugins: [
    [
      "docusaurus-plugin-copy-page-button",
      {
        customStyles: {
          button: {
            style: {
              position: "fixed",
              top: "20px",
              right: "20px",
            },
          },
        },
      },
    ],
  ],
};

Option 4: Render the React component yourself

For high-traffic docs sites that want zero client-side placement shift, disable auto-injection and render the button from a swizzled Docusaurus theme component.

// docusaurus.config.js
module.exports = {
  plugins: [
    [
      "docusaurus-plugin-copy-page-button",
      {
        injectButton: false,
        generateMarkdownRoutes: true,
      },
    ],
  ],
};

// src/theme/DocItem/Layout/index.tsx
import CopyPageButton from "docusaurus-plugin-copy-page-button/react";

export default function DocItemLayout(props) {
  return (
    <>
      <div style={{display: "flex", justifyContent: "flex-end"}}>
        <CopyPageButton generateMarkdownRoutes />
      </div>
      {/* render your normal Docusaurus DocItem layout here */}
    </>
  );
}

This path is best when maintainers care about first paint, exact visual placement, or avoiding any post-hydration DOM insertion.

Configuration

4. Configure in docusaurus.config.js

Add the plugin to your config:

module.exports = {
  plugins: ["docusaurus-plugin-copy-page-button"],
};

Docusaurus Copy Page Button Plugin

Live Demo · Read the story

<img src="https://github.com/user-attachments/assets/8e7351ba-0cab-489c-bbcf-543603c3bcf1" alt="Docusaurus Copy Page Button Plugin Preview" width="418" height="448" />

Extract Docusaurus documentation content as markdown for AI tools like ChatGPT, Claude, Perplexity, and Gemini

A lightweight Docusaurus plugin that adds a "Copy page" button to your documentation site. Perfect for developers who want to quickly extract documentation content for AI assistance, code reviews, or content analysis.

Why Use This Plugin?

• AI-Ready Content: Instantly convert documentation pages to clean markdown for ChatGPT, Claude, Perplexity, or other AI tools
• Developer Productivity: Copy entire documentation pages without manual selection and cleanup
• Zero Configuration: Works out of the box - just install and go
• Documentation Workflow: Streamline the process of getting documentation context for AI assistance

2. Link the package

npm link