在react gatbsy头盔中插入django标签

编程问答 2022-06-09

问题描述

我必须在头上放一个django标签，这样模板才能在服务器端呈现动态Metatags。

我想做的是：

{% 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 %}

现在，头盔内的Meta标签没有问题，因为它是头盔的公认元素。问题出在{％block Metatags％}和{％endblock％}。

编译后的页面不会包含这两个页面，可能是因为头盔忽略了它们。我还尝试将{％block Metatags％}和{％endblock％}手动放入已编译的页面中。

我想我不能仅凭头盔实现此目的，因为它将忽略我放入的所有无法识别的标签（脚本，元数据，脚本，..）。我该怎么办？

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

解决方法

您写的是如何在Django中使用django模板进行操作。您不能在React / 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填充Helmet。 一切正常，内置的html现在具有正确的元标记。

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

djangodjangogatsbyreact-helmetreactjsreactjsreactjsreactjs