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 (将#修改为@)

相关问答

Selenium Web驱动程序和Java。元素在(x,y)点处不可单击。其...
Python-如何使用点“。” 访问字典成员?
Java 字符串是不可变的。到底是什么意思?
Java中的“ final”关键字如何工作?(我仍然可以修改对象。...
“loop:”在Java代码中。这是什么,为什么要编译?
java.lang.ClassNotFoundException:sun.jdbc.odbc.JdbcOdbc...