在反应盖茨比头盔中插入 django 标签答案

【问题标题】：insert django tag in react gatbsy helmet在反应盖茨比头盔中插入 django 标签
【发布时间】：2021-01-22 12:09:26
【问题描述】：

我必须在头部放置一个 django 标记，所以模板将呈现动态元标记服务器端。

我想做的是：

{% block metatags %}

<meta name="description" content="{{ metatags.description }}" />
<meta name="keywords" content="{{ metatags.keywords }}" />
<meta property="og:url" content="{{ metatags.og_url }}" />
<meta property="og:title" content="{{ metatags.og_title }}" />
<meta property="og:description" content="{{ metatags.og_description }}" />
<meta property="og:image" content="{{ metatags.og_image }}" />
<meta property="og:image:url" content="{{ metatags.og_image_url }}" />
<meta property="og:image:type" content="{{ metatags.og_image_type }}" />

{% endblock %}

现在，头盔内的元标记没有问题，因为它是头盔的公认元素。问题出在 {% block metatags %} 和 {% endblock %}。

编译后的页面不会有这两个，可能是因为头盔忽略了它们。我还尝试在编译页面中手动放置 {% block metatags %} 和 {% endblock %} 并且它可以工作。

我认为我不能仅使用头盔来实现这一点，因为它会忽略我放入其中的每个无法识别的标签（脚本、元、noscript、..）。我怎么能这样做？

唯一的解决方案可能是在 gatsby 构建后调用脚本并手动添加它们。有更好的解决方案吗？

【问题讨论】：

标签： reactjs django gatsby react-helmet

【解决方案1】：

您所写的是如何在 Django 中使用 django 模板进行操作。你不能在 React/Gatsby 中使用那种语法。您如何在 Gatsby 中访问您的 django 数据？

假设您有来自源的站点数据，在 gatsby 中使用 react-helmet 您的代码将如下所示。

import { Helmet } from "react-helmet"

<Helmet
        meta={[
            {
                name: `description`,
                content: metatags.description,
            },
            {
                name: `keywords`,
                content: metatags.keywords,
            },
            {
                property: `og:url`,
                content: metatags.og_url,
            },
            {
                property: `og:title`,
                content: metatags.og_title,
            },
            {
                property: `og:description`,
                content: metatags.og_description,
            },
            {
                property: `og:image`,
                content: metatags.og_image,
            },
            {
                property: `og:image:url`,
                content: metatags.og_image_url,
            },
            {
                property: `og:image:type`,
                content: metatags.og_image_type,
            },
        ].concat(meta)}
    />

【讨论】：

是的，谢谢，在那个可怕的解决方案之后，我决定让自己理解 graphql 并通过它远程获取元标记。但元标记仍然存在问题。我将在下面发布我的问题

【解决方案2】：

更新：

在考虑了所提出的解决方案并意识到这非常可怕之后，我决定使用常见且正确的方法，远程获取数据并用 graphql 填充 Helmet。一切正常，构建的 html 现在具有正确的元标记。

但对于 facebook 调试器，仍然缺少 og 道具。这是不可能的，因为我检查了 .html 文件并且它们以正确的方式存在。我尝试了很多次重新获取FB调试器，但仍然没有

【讨论】：