如何在 Docusaurus 1.x 上添加顶部警报横幅？

Question

我想在我的 Docusaurus 站点上显示一些全局消息。类似于：

https://codesandbox.io/s/duudl

https://next.ant.design/components/alert/

这可能吗？

Answer 1

您必须通过脚本注入 DOM。一个例子是 React Native 网站，他们在页面底部注入了反馈横幅 - https://facebook.github.io/react-native/docs/getting-started

查看他们的存储库和他们使用的script。

Answer 2

更新：您现在可以将其添加到 docusaurus.config.js 文件中：

  themeConfig:
    /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
    ({
      announcementBar: {
        id: 'support_ukraine',
        content:
          'Support Ukraine  <a target="_blank" rel="noopener noreferrer" href="https://opensource.facebook.com/support-ukraine"> Help Provide Humanitarian Aid to Ukraine</a>.',
        backgroundColor: '#20232a',
        textColor: '#fff',
        isCloseable: false,
      },
 ...

您可以在 src/css/customTheme.scss:

中使用这些 CSS 选择器设置样式

/* Announcement banner */

:root {
  --docusaurus-announcement-bar-height: auto !important;
}

div[class^="announcementBar"][role="banner"] {
  border-bottom-color: var(--deepdark);

  button.close {
    svg {
      fill: white;
    }
  }
}

div[class^="announcementBarContent"] {
  line-height: 40px;
  font-size: 20px;
  font-weight: bold;
  padding: 8px 30px;

  a {
    text-decoration: underline;
    display: inline-block;
    color: var(--brand) !important;

    &:hover {
      color: var(--ifm-color-primary) !important;
    }
  }
}

@media only screen and (max-width: 768px) {
  .announcement {
    font-size: 18px;
  }
}

@media only screen and (max-width: 500px) {
  .announcement {
    font-size: 15px;
    line-height: 22px;
    padding: 6px 30px;
  }
}

如何在 Docusaurus 1.x 上添加顶部警报横幅？

How to add a top alert banner on Docusaurus 1.x?

docusaurus