Ankit Babbar <******@****.***>
Antee <******@****.***>
Aobo Yang <******@****.***>
Ardo Kusuma <******@****.***>
Arlindo Torres <******@****.***>
Arnab Sen <******@****.***>
Arthur Denner Oliveira Santos <******@****.***>
Artin <******@****.***>
Arvin Xu <******@****.***>
Ash Kumar <******@****.***>
Ashot Mnatsakanyan <******@****.***>
Austaras <******@****.***>

  <Space direction="vertical" style={{ width: '100%' }}>
    <Alert message="Warning text" banner />
    <Alert
      message="Very long warning text warning text text text text text text text"
      banner
      closable
    />
    <Alert showIcon={false} message="Warning text without icon" banner />
    <Alert type="error" message="Error text" banner />
  </Space>
);

.bd-banner {
  --background-color: #{$primary-light};
  --color: #{$primary-dark};

  background-color: var(--background-color);
  color: var(--color);
  padding: 0.5em;

  &.bd-is-bleeding {
    --background-color: var(--bleeding-light);
    --color: var(--bleeding-dark);
  }

  &.bd-is-sponsor {
    --background-color: var(--sponsor-light);
    --color: var(--sponsor);
  }
}

.bd-banner-body {
  align-items: center;

<section class="bd-banner bd-is-{{ include.color }}">
  <div class="bd-banner-body">
    <p class="bd-banner-title">
      {{ include.title }}
    </p>

    {{ include.more }}
  </div>

 */
`.trim()}\n`;
}
async function addBannerToFile(file, name) {
  const content = await fs.readFile(file, 'utf-8');
  await fs.writeFile(file, `${banner(name)}\n${content}`);
}
export { banner };
export { addBannerToFile };
export default {
  banner,
  addBannerToFile,

banner.jpg...

banner.png...

import { ExternalLink } from './ExternalLink';

export function Banner() {
  return null

## zh-CN

页面顶部通告形式，默认有图标且 `type` 为 'warning'。

## en-US

  children?: React.ReactNode;
}

export default function Banner({ children }: BannerProps) {
  const [locale] = useLocale(locales);
  const { pathname, search } = useLocation();
  const { token } = useSiteToken();
  const styles = useStyle();
  const { isMobile } = React.useContext(SiteContext);

  const isZhCN = utils.isZhCN(pathname);

  return (
    <>
      {/* Banner Placeholder Motion */}
      {isMobile ? (
        <img