Reactjs Docusaurus：如何基于元标记更新页面

我希望能够在导航栏上方添加自定义标题。类似于公告栏，但不需要在配置中。我在我的标记文件的前面添加了一些元标记，然后我尝试包装标题组件

构建并运行之后发生的事情是，当我打开带有meta关键字“abcdefg”的页面时，什么都没有发生

这是我的Navbar.js：

import OriginalNavbar from '@theme-original/Navbar';
import React from 'react';

const aStyle = {
  fontSize: "20px",
  textAlign: "Center",
  backgroundColor: "Green",
  color: "Black",
};

export default function Heading(props) {
  if (typeof window !== 'undefined') {
    let keyVal = getMeta('keywords')

    console.log(keyVal)
    if(keyVal.includes('abcdefg')) {
      return (
        <>
        <div style={aStyle}>A Document</div>
        <OriginalNavbar {...props} />
        </>
      );
    }
  }

  return (
    <>
    <OriginalNavbar {...props} />
    </>
  );
}

function getMeta(metaName) {
  const metas = document.getElementsByTagName('meta');

  for (let i = 0; i < metas.length; i++) {
    if (metas[i].getAttribute('name') === metaName) {
      return metas[i].getAttribute('content');
    }
  }

  return '';
}

HTML标题包含以下行：

<meta name="keywords" content="abcdefg" data-react-helmet="true">

我要找的绿色条出现了

所以我的问题是，当我点击所需页面时，而不是点击下一页时，如何进行此更新

<meta name="keywords" content="abcdefg" data-react-helmet="true">

<empty string>

abcdefg