将 TypeKit 代码（或任何代码）添加到 Magento 2 站点的头部

Question

我只想将 TypeKit 中的自定义字体添加到我的 Magento 2 网站中。

以前我只是用来查找 /app/design/frontend/XXX/XXX/page/head.phtml 并对其进行编辑。简单。

对于 Magento 2，它似乎非常复杂。 I keep finding articles like this。我真的需要创建一个完整的模块只是为了在文档的头部添加 2 行基本的 HTML 吗？

一定有更简单的方法吗？

I found this similar question，但我没有得到答案。我在哪里创建我的主题布局文件？还是建议我重新创建一个完整的独立模块？

I also found this question，看起来很疯狂。我认为他们正在编辑 3 个单独的文件，只是为了将 JS 文件添加到 head 中吗？

这肯定不对吧？没有我可以编辑的 head.phtml 文件吗？

谁能帮我分解一下，假设我是个白痴，并解释一下我如何轻松地向 Head 添加 2 行 TypeKit 代码。非常感谢。

Answer 1

我还不知道如何将它添加到 phtml 文件中，但这是我将自定义字体添加到我的主题中的方法。

在： app/design/frontend/<vendor_name>/<theme_name>/Magento_Theme/layout/default_head_blocks.xml

使用（示例）：

<block type="core/text" name="example_font">
    <action method="setText">
        <text>
            <![CDATA[<script src="https://blahblahblah.js"></script><script>try{Typekit.load();}catch(e){}</script>]]>
        </text>
    </action>
</block>

然后将其设置为基本字体/任何你想要的： app/design/frontend/<vendor_name>/<theme_name>/web/css/source/_variables.less

希望能有所帮助，哪怕只是一点点！

Answer 2

在您的 magento 管理区域：导航至 "Stores" 菜单项，在标题 "Settings" 下，单击 "Configuration"，在 "Configuration" 中单击一次 "Design". 在 "HTML Head" 部分下，您会看到一个框，上面写着 "Miscellaneous Scripts" 您在此处添加的任何内容都将添加到网站的头部部分。

Answer 3

仅供参考，此处提到的 "HTML Head" 似乎已移至 Magento 2 管理员中。现在位于：

管理 > 内容 > 配置 > [单击主题名称上的 "Edit"] > 其他设置 > HTML 标题

Answer 4

尽管我喜欢根据 knarfeolhcs 的回答使用布局 xml 的想法，但建议的布局 xml 不正确，因为 type="core/text" 在 Magento 2 中不存在. 这是布局xml 我用来添加typekit app/design/frontend/<vendor_name>/<theme_name>/Magento_Theme/layout/default_head_blocks.xml

<?xml version="1.0" ?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <script src="https://use.typekit.net/xxxxxxx.js" src_type="url" />
    </head>

    <body>
        <referenceBlock name="head.additional">
            <block class="Magento\Framework\View\Element\Text" name="typekit">
                <arguments>
                    <argument name="text" xsi:type="string"><![CDATA[<script>try{Typekit.load({ async: true });}catch(e){}</script>]]></argument>
                </arguments>
            </block>
        </referenceBlock>
    </body>
</page>

将 TypeKit 代码（或任何代码）添加到 Magento 2 站点的头部

Adding TypeKit code (or any code) into the Head of a Magento 2 site

magento

head

magento2