#rspress-plugin-third-parties

源码

该插件提供 YouTube、Twitter/X 和 Google 地图嵌入组件，支持接入 Google Analytics 和 Google Tag Manager，并通过 Script 组件控制脚本加载时机。

#安装

npm add rspress-plugin-third-parties -D

yarn add rspress-plugin-third-parties -D

pnpm add rspress-plugin-third-parties -D

bun add rspress-plugin-third-parties -D

deno add npm:rspress-plugin-third-parties -D

#全局统计

在 rspress.config.ts 中注册插件，为所有页面添加 Google Analytics。将 G-XXXXXXXXXX 替换为你的 GA4 衡量 ID：

import { defineConfig } from '@rspress/core';
import { pluginThirdParties } from 'rspress-plugin-third-parties/plugin';

export default defineConfig({
  plugins: [
    pluginThirdParties({
      googleAnalytics: { gaId: 'G-XXXXXXXXXX' },
    }),
  ],
});

如需跟踪客户端路由跳转，请配置 GA4 单页应用衡量。

#组件

在 MDX 页面或自定义主题中导入组件。下方的 YouTube 和 Tweet 示例提供实时预览及对应代码。

#<YouTubeEmbed />

先显示视频缩略图，点击播放后加载 YouTube 播放器。

import { YouTubeEmbed } from 'rspress-plugin-third-parties';

<YouTubeEmbed
  videoid="sSbDtQTtwBY"
  playlabel="Digital Tamizh - A Lineage of Logic, A Future of Code (Unreal Engine Showcase)"
/>

#<TweetEmbed />

嵌入 Twitter/X 推文，并跟随站点的亮色或暗色主题。

import { TweetEmbed } from 'rspress-plugin-third-parties';

<TweetEmbed id="2017178323550605790" />

#<GoogleMapsEmbed />

嵌入 Google 地图。使用此示例时，请将占位符替换为你的 Google Maps Embed API Key。

import { GoogleMapsEmbed } from 'rspress-plugin-third-parties';

<GoogleMapsEmbed
  apiKey="YOUR_GOOGLE_MAPS_API_KEY"
  mode="place"
  q="Point Pedro, Sri Lanka"
  height={400}
/>

#<Script />

加载外部或内联脚本，并在页面切换时避免重复加载同一外部脚本。默认策略为 afterInteractive；使用 lazyOnload 可等到页面加载完成且浏览器空闲时再加载。

import { Script } from 'rspress-plugin-third-parties';

<Script src="https://example.com/widget.js" strategy="lazyOnload" />

#<GoogleTagManager />

在自定义主题布局中添加 Google Tag Manager。

import { GoogleTagManager } from 'rspress-plugin-third-parties';

<GoogleTagManager gtmId="GTM-XXXXXXX" />

#<GoogleAnalytics />

在自定义主题布局中添加 GA4。如果已通过全局插件注册同一个衡量 ID，则无需再添加此组件。

import { GoogleAnalytics } from 'rspress-plugin-third-parties';

<GoogleAnalytics gaId="G-XXXXXXXXXX" />

配置 Google Analytics 后，可以在事件处理函数中使用 sendGAEvent 发送自定义事件：

import { sendGAEvent } from 'rspress-plugin-third-parties';

sendGAEvent('event', 'documentation_feedback', { sentiment: 'yes' });