You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Docusaurus生产静态站点切换站点警告渲染逻辑失效问题

Docusaurus生产环境条件渲染警告消息异常问题

我编写了以下代码,用于实现站点切换时的警告消息渲染逻辑:当用户通过点击按钮或直接URL访问切换站点(community/cloud)时,页面显示警告消息,刷新页面后消息消失。该逻辑在Docusaurus本地开发服务器中运行正常,但构建为生产静态站点后表现异常。

import Cookies from 'js-cookie';
import React from 'react';

import { DocProvider } from '@docusaurus/theme-common/internal';
import { HtmlClassNameProvider } from '@docusaurus/theme-common';
import { translate } from '@docusaurus/Translate';
import CommunityLinkGroup from "@site/src/components/LinkGroup";
import DocItemLayout from '@theme/DocItem/Layout';
import DocItemMetadata from '@theme/DocItem/Metadata';
import styles from "./index.module.css";

export default function DocItem(props) {
  const docHtmlClassName = `docs-doc-id-${props.content.metadata.unversionedId}`;
  const MDXComponent = props.content;

  const url = props.location.pathname;
  const prevEdition = Cookies.get('doc_edition');
  let displayAlert = false;
  if (url.includes('/community/')) {
    Cookies.set('doc_edition', 'community');
    if (prevEdition === 'cloud') {
      displayAlert = true;
    }
  } else if (url.includes('/cloud/')) {
    Cookies.set('doc_edition', 'cloud');
    if (prevEdition === 'community') {
      displayAlert = true;
    }
  }
  let alertMsg = "bad msg";
  let alertClass = "badcls";
  let alertRole = "badrole";
  if (displayAlert) {
    alertMsg = translate({
      id: 'theme.DocItem.switchDocAlertMsg',
      message: 'you just switched site, please notice.',
    });
    alertClass = "alert alert--warning";
    alertRole = "alert";
  }
  console.log(alertMsg, alertClass, alertRole);
  return (
    <DocProvider content={props.content}>
      <HtmlClassNameProvider className={docHtmlClassName}>
        <div className={alertClass} role={alertRole}>{alertMsg}</div>
        <DocItemMetadata />
        <DocItemLayout>
          <MDXComponent />
        </DocItemLayout>
        <div className={styles.communityLinkContainer}>
          <CommunityLinkGroup />
        </div>
      </HtmlClassNameProvider>
    </DocProvider>
  );
}

本地开发服务器效果(正常)

本地正常效果

生产静态站点效果(异常)

生产环境异常效果

异常细节

  • 生产站点控制台输出you just switched site, please notice. alert alert--warning alert,说明displayAlert的值应为true
  • 但DOM显示状态却同时包含了displayAlert为true和false时的内容(警告消息和"bad msg"同时出现)
  • 仅当直接通过URL路径访问时会触发该问题,点击网站内部按钮切换站点时,警告消息可正常动态渲染

内容的提问来源于stack exchange,提问作者timfeirg

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.02 10:01:44