Page Source 和 Inspect Element i 中 DOM 的区别

Question

我想在我的其中一个网页中添加元标记。但是，我使用的是 CMS (ocotberCMS)，它只允许我访问页面的 body。我试图将元标记添加到标记中，如下所示：

<meta name="robots" content="noindex, nofollow, noarchive">
{% partial "temp-partial" %}

页面源和检查元素中的结果不同：

页面来源：

<meta name="robots" content="noindex, nofollow, noarchive">
<div>
    .......// the body of the page generated by {% partial "temp-partial" %}
</div>

检查元素：

<html>
   #shadow-root
<head>
<meta name="robots" content="noindex, nofollow, noarchive">
</head>
<body>
<div>
    .......// the body of the page generated by {% partial "temp-partial" %}
</div>
</body>
</html>

我读到有必要根据 HTML4++ 文档将元标记添加到 header。我想知道这是否意味着它会在上述情况下工作还是不会？

Answer 1

页面源是您在创建网站时看到的内容。

检查元素源包括生成的数据，例如附加样式属性、数据库导出等

关于您的问题，请尝试使用 Jquery 并在头部附加 (http://api.jquery.com/append/) 元标记。

Answer 2

您可以在模板布局中编辑头部部分。转到 CMS -> Layout -> default.htm 并在那里添加元标记。

实际布局文件名可能不同，但如果您查看那里的 html，您应该会看到哪个是主要布局文件。

Answer 3

OctoberCMS 有一个 "Placeholder" 功能，非常适合您要执行的操作：

https://octobercms.com/docs/markup/tag-placeholder

您可以像这样在 HTML 布局中使用它：

<html>
     <head>
         <meta name="robots" content="noindex, nofollow, noarchive">
         {% placeholder meta %}
     </head>

     <body>
         {% page %}
     </body>
</html>

然后，稍后在任何页面中：

{% put meta %}
    <meta name="robots" content="noindex, nofollow, noarchive">
{% endput %}

编译时 {% put %} 标签之间的任何内容都将放在布局中 {% placeholder %} 所在的位置。

Answer 4

您在检查器 DOM 树的 <head> 部分中看到 <meta name="robots" content="noindex, nofollow, noarchive"> 而它位于源代码的 <body> 部分并查看页面源代码的原因是因为 inspector DOM 树是你的浏览器已经解析过的版本。

由于浏览器愿意接受所谓的 "tag soup"（HTML 的不正确语法和布局），并简单地猜测它应该如何工作；您的浏览器将向您显示的检查器 DOM 树已经是浏览器对代码应该是什么的最佳猜测；不管该代码的实际有效性如何。

因此，从本质上讲，您在查看源代码时会在正文中看到元标记的原因是因为那是它实际所在的位置。您在检查器的头部看到它的原因是浏览器猜测头部是元标记的正确位置。

要真正将它添加到您的头部部分，机器人应该在其中实际看到它，您需要编辑您的 CMS 布局。如果您无权访问 CMS 菜单或布局子菜单，那么您的用户帐户没有权限，您将不得不与构建您网站的人联系或在 IRC 中寻求进一步帮助（freenode.net - #october) 或 Slack。

Page Source 和 Inspect Element i 中 DOM 的区别

Difference between DOM in Page Source and Inspect Element i

html

meta-tags

octobercms