1

我必须在头部放置一个 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 构建后调用脚本并手动添加这些脚本......有更好的解决方案吗？

4

2 回答 2

0

您所写的是如何在 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)}
    />
于 2020-10-07T17:11:14.703 回答
0

更新：

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

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

于 2020-10-09T19:46:57.587 回答