微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

Docusaurus:如何根据元标记更新页面

如何解决Docusaurus:如何根据元标记更新页面

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

在我构建并运行之后发生的事情是,当我打开带有元关键字“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 '';
}

我的 md 文件有这个前端问题:

---
id: Classic
hide_title: true
keywords: unclassified
---

HTML 标题包含以下行:

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

但是控制台输出说:

<empty string>

当我在我的网站中点击另一个页面之后,控制台显示

abcdefg

然后出现了我要找的绿色条。

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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。