如何为Docusaurus每篇博客添加分享按钮？能否通过docusaurus.config.js实现？

方法1：使用社区插件（支持docusaurus.config.js配置） #

多数Docusaurus社区插件可以直接实现分享功能，且完全通过配置文件完成设置：

1. 先安装插件（以常见的分享插件为例）：

npm install @docusaurus/plugin-share
# 或者用yarn
yarn add @docusaurus/plugin-share

2. 在docusaurus.config.js的plugins数组中添加配置：

module.exports = {
  plugins: [
    [
      '@docusaurus/plugin-share',
      {
        // 指定要启用的分享平台，如Twitter、Facebook、微信等
        platforms: ['twitter', 'facebook', 'wechat'],
        // 设置分享按钮显示位置：顶部/底部
        position: 'bottom',
        // 按钮样式：图标/文字
        style: 'icon'
      }
    ]
  ]
};

配置完成后重启Docusaurus服务，所有博客文章会自动带上配置好的分享按钮，无需修改页面代码。

方法2：自定义分享组件（可结合docusaurus.config.js动态配置） #

如果插件无法满足定制需求，可以手动编写组件并注入到博客模板中：

1. 在src/components目录下新建ShareButtons.jsx：

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

const ShareButtons = ({ pageUrl, pageTitle }) => {
  // 从config文件读取自定义配置
  const { shareOptions } = useThemeConfig();
  const platforms = shareOptions?.platforms || ['twitter', 'facebook'];

  const getShareUrl = (platform) => {
    switch (platform) {
      case 'twitter':
        return `https://twitter.com/intent/tweet?url=${encodeURIComponent(pageUrl)}&text=${encodeURIComponent(pageTitle)}`;
      case 'facebook':
        return `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(pageUrl)}`;
      case 'wechat':
        return `https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=${encodeURIComponent(pageUrl)}`;
      default:
        return '';
    }
  };

  return (
    <div className="share-buttons" style={{ marginTop: '2rem', paddingTop: '1rem', borderTop: '1px solid #eee' }}>
      <span style={{ marginRight: '1rem' }}>分享到：</span>
      {platforms.map(platform => (
        <a 
          key={platform}
          href={getShareUrl(platform)} 
          target="_blank" 
          rel="noopener noreferrer"
          style={{ marginRight: '1rem', textDecoration: 'none' }}
        >
          {platform === 'twitter' && '🐦 Twitter'}
          {platform === 'facebook' && '📘 Facebook'}
          {platform === 'wechat' && '📱 微信'}
        </a>
      ))}
    </div>
  );
};

export default ShareButtons;

2. 定制博客文章模板：先通过命令复制官方主题的博客组件到本地：

npx docusaurus swizzle @docusaurus/theme-classic BlogPostItem

然后在src/theme/BlogPostItem.jsx中引入自定义组件，添加到文章末尾：

import ShareButtons from '@site/src/components/ShareButtons';

// 在组件的render逻辑中，找到文章内容结束的位置，插入：
<ShareButtons
  pageUrl={typeof window !== 'undefined' ? window.location.href : ''}
  pageTitle={props.metadata.title}
/>

3. 在docusaurus.config.js的themeConfig中添加自定义配置项（可选）：

module.exports = {
  themeConfig: {
    shareOptions: {
      platforms: ['twitter', 'wechat']
    }
  }
};

关于docusaurus.config.js配置的可行性 #

完全可以通过该配置文件实现分享功能：

• 使用社区插件时，所有分享规则（平台、位置、样式）都直接写在plugins数组的配置项中；
• 自定义组件时，也可以在themeConfig中定义全局配置，通过钩子读取后动态渲染分享按钮，实现配置统一管理。

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