# 功能标记

{% hint style="warning" %}
将自适应内容与功能标志一起使用需要向你的应用程序添加代码。

目前，GitBook helper 仅支持基于 React 的设置。
{% endhint %}

GitBook 为诸如以下流行的功能标志服务提供商提供辅助函数和集成： [**LaunchDarkly**](#launchdarkly) 并 [**Reflag**](#reflag).

这使你能够在用户阅读文档时读取他们在产品中可访问的功能标志。如果你需要为仅对特定人群开放的功能展示文档，这将非常有用。

### LaunchDarkly

LaunchDarkly 允许你通过以下方式将功能标志访问作为声明发送： [`launchdarkly-react-client-sdk`](https://launchdarkly.com/docs/sdk/client-side/react/react-web) 以及 GitBook 的 [`@gitbook/adaptive`](https://gitbook-v2-5hpihs24d-gitbook.vercel.app/url/gitbook.com/docs/documentation/zh/zhan-dian-fang-wen/adaptive-content/enabling-adaptive-content/broken-reference) 包。

如果你已经在产品中使用 LaunchDarkly 功能标志，那么很可能你已经配置了这个包。

要将这些功能标志作为声明传递给 GitBook，请按以下步骤操作：

{% stepper %}
{% step %}
**安装 LaunchDarkly 集成**

要开始使用，你首先需要 [安装 LaunchDarkly 集成](https://app.gitbook.com/integrations/launchdarkly) 到你的 GitBook 站点中。
{% endstep %}

{% step %}
**设置你的项目和访问密钥**

将你的项目密钥和服务访问令牌从你的 [LaunchDarkly 设置](https://app.launchdarkly.com/settings) 添加到该集成的配置中。
{% endstep %}

{% step %}
**将 GitBook helper 安装并添加到你的应用程序中**

在设置好 LaunchDarkly 集成后，你需要在应用程序中安装 GitBook 自适应内容 helper。

```bash
npm install @gitbook/adaptive
```

{% endstep %}

{% step %}
**配置你的应用程序**

你需要将 `withLaunchDarkly` helper 与 LaunchDarkly React SDK 一起使用，以将上下文传递给 GitBook。

<pre class="language-javascript"><code class="lang-javascript">import { render } from 'react-dom';
<strong>import { withLaunchDarkly } from '@gitbook/adaptive';
</strong><strong>import { asyncWithLDProvider, useLDClient } from 'launchdarkly-react-client-sdk';
</strong>import MyApplication from './MyApplication';

function PassFeatureFlagsToGitBookSite() {
<strong>    const ldClient = useLDClient();
</strong>    React.useEffect(() => {
        if (!ldClient) {
            return;
        }
<strong>        return withLaunchDarkly(ldClient);
</strong>    }, [ldClient]);
    return null;
}
(async () => {
    const LDProvider = await asyncWithLDProvider({
        clientSideID: 'client-side-id-123abc',
        context: {
            kind: 'user',
            key: 'user-key-123abc',
            name: 'Sandy Smith',
            email: 'sandy@example.com'
        },
        options: { /* ... */ }
    });
    render(
        &#x3C;LDProvider>
            &#x3C;PassFeatureFlagsToGitBookSite />
            &#x3C;MyApplication />
        &#x3C;/LDProvider>,
        document.getElementById('reactDiv'),
    );
})();
</code></pre>

{% endstep %}

{% step %}
**检查你的访客 schema**

一项 [访客 schema](https://gitbook-v2-5hpihs24d-gitbook.vercel.app/url/gitbook.com/docs/documentation/zh/zhan-dian-fang-wen/adaptive-content/enabling-adaptive-content/..#set-your-visitor-schema) 是必需的，这样你的声明才能在已发布站点中被读取。安装并配置 LaunchDarkly 集成应会自动为你设置访客 schema。
{% endstep %}

{% step %}
**个性化你的内容**

设置好访客 schema 后，你就可以使用用户可访问的功能标志，为访问你站点的用户定制文档体验。

LaunchDarkly 中可用的任何功能标志值都会作为访客 schema 的一部分，显示在 `visitor.claims.unsigned.launchdarkly` 对象下。阅读更多关于未签名声明的信息 [这里](https://gitbook-v2-5hpihs24d-gitbook.vercel.app/url/gitbook.com/docs/documentation/zh/zhan-dian-fang-wen/adaptive-content/enabling-adaptive-content/..#set-an-unsigned-claim).

进入 [调整你的内容](https://gitbook-v2-5hpihs24d-gitbook.vercel.app/url/gitbook.com/docs/documentation/zh/zhan-dian-fang-wen/adaptive-content/adapting-your-content) 以了解更多关于为用户个性化文档的信息。
{% endstep %}
{% endstepper %}

### Reflag

Reflag 允许你通过以下方式将功能标志访问作为声明发送： [`@reflag/react-sdk`](https://www.npmjs.com/package/@reflag/react-sdk) 以及 GitBook 的 [`@gitbook/adaptive`](https://github.com/GitbookIO/integrations/tree/main/packages/adaptive) 包。

如果你已经在产品中使用 Reflag 功能标志，那么很可能你已经配置了这个包。

要将这些功能标志作为声明传递给 GitBook，请按以下步骤操作：

{% stepper %}
{% step %}
**安装 Reflag 集成**

要开始使用，你首先需要 [安装 Reflag 集成](https://app.gitbook.com/integrations/bucket) 到你的 GitBook 站点中。
{% endstep %}

{% step %}
**设置你的密钥**

将你的密钥从你的 [Reflag 设置](https://app.reflag.com/envs/current/settings/app-environments) 添加到该集成的配置中。
{% endstep %}

{% step %}
**将 GitBook helper 安装到你的应用程序中**

在设置好 Reflag 集成后，你需要在应用程序中安装 GitBook 自适应内容 helper。

```bash
npm install @gitbook/adaptive
```

{% endstep %}

{% step %}
**配置你的应用程序**

你需要将 `withReflag` helper 与 Reflag React SDK 一起使用，以将上下文传递给 GitBook。

<pre class="language-javascript"><code class="lang-javascript"><strong>import { withReflag } from '@gitbook/adaptive';
</strong><strong>import { ReflagProvider, useClient } from '@reflag/react-sdk';
</strong>import MyApplication from './MyApplication';

function PassFeatureFlagsToGitBookSite() {
<strong>    const client = useClient();
</strong>    React.useEffect(() => {
        if (!client) {
            return;
        }
<strong>        return withReflag(client);
</strong>    }, [client]);
    return null;
}
export function Application() {
    const currentUser = useLoggedInUser();
    const appConfig = useAppConfig();
    return (
        &#x3C;ReflagProvider
            publishableKey={appConfig.reflagCom.publishableKey}
            user={{
                id: currentUser.uid,
                email: currentUser.email ?? undefined,
                name: currentUser.displayName ?? '',
            }}
            company={{
                id: currentUser.company.id,
            }}
        >
            &#x3C;PassFeatureFlagsToGitBookSite />
            &#x3C;MyApplication />
        &#x3C;/ReflagProvider>
    );
}
</code></pre>

{% endstep %}

{% step %}
**检查你的访客 schema**

一项 [访客 schema](https://gitbook-v2-5hpihs24d-gitbook.vercel.app/url/gitbook.com/docs/documentation/zh/zhan-dian-fang-wen/adaptive-content/enabling-adaptive-content/..#set-your-visitor-schema) 是必需的，这样你的声明才能在已发布站点中被读取。安装并配置 Reflag 集成应会自动为你设置访客 schema。
{% endstep %}

{% step %}
**个性化你的内容**

设置好访客 schema 后，你就可以使用用户可访问的功能标志，为访问你站点的用户定制文档体验。

Reflag 中可用的任何功能标志值都会作为访客 schema 的一部分，显示在 `visitor.claims.unsigned.reflag` 对象下。阅读更多关于未签名声明的信息 [这里](https://gitbook-v2-5hpihs24d-gitbook.vercel.app/url/gitbook.com/docs/documentation/zh/zhan-dian-fang-wen/adaptive-content/enabling-adaptive-content/..#set-an-unsigned-claim).

进入 [调整你的内容](https://gitbook-v2-5hpihs24d-gitbook.vercel.app/url/gitbook.com/docs/documentation/zh/zhan-dian-fang-wen/adaptive-content/adapting-your-content) 以了解更多关于为用户个性化文档的信息。
{% endstep %}
{% endstepper %}

{% hint style="info" %}
功能标志值是在客户端计算的，因此避免使用此方法传递敏感或对安全至关重要的数据。
{% endhint %}