如何在大型网站上正确维护 HTML <head> 内容？答案

【问题标题】：How do I properly maintain HTML <head> content on a large site?如何在大型网站上正确维护 HTML <head> 内容？
【发布时间】：2017-12-15 16:40:45
【问题描述】：

我正在建立我的第一个网站，并且预计会有数百页。我正在使用 Host Gator 并自己编写所有代码。

如果我需要更新我的 CDN 链接、元标记、Favicon 或添加新项目，我不想手动更新 100 多个页面。

我目前的解决方案是一个位于头部的 JS 文件，如下所示：

<head>
     <script src="assets/generateHead.js"></script>
</head>

它包含（添加）我的 google 字体、引导 cdn、站点 css 样式表、favicon、jQuery CDN 和站点 .js 文件。给我的。

脚本示例：

if(!document.getElementById('googleFont1')) {
var link = document.createElement('link');
link.id = 'googleFont1';
link.rel = 'stylesheet';
link.href = 'https://fonts.googleapis.com/css?family=Architects+Daughter';
document.head.appendChild(link);

等等。等等

这是维护 HTML 内容的良好做法还是最佳做法？我应该把我的 site.css 和 .js 文件放在外面，只保留 meta、cdn 和 favicon 链接吗？

【问题讨论】：

你的服务器可以运行 PHP 吗？如果是这样，您可以为您的页眉和页脚使用 PHP “包含” - 允许您在单独的 PHP 文件中维护全局页眉/页脚。如果没有，那么您可以使用 Moustache.js 之类的模板框架来维护动态应用于每个页面的单个页眉和单个页脚模板。
你可以这样做。你最终可能会得到fout/fouc。如果服务器支持 PHP，您总是可以使用 PHP 包含。 stackoverflow.com/questions/8054638/…
关闭 JS 的设备和浏览器怎么办？没有爱？
@I haz kode 你关闭了 js 吗？现在关心的比例太小了。
@Morpheus -- 请记住，人类并不是您网站的唯一用户。另见：stephanboyer.com/post/122/does-google-execute-javascript

标签： javascript html css html-head

【解决方案1】：

简短回答：不，这不是“最佳实践”。 It may even be bad for your SEO（阅读：人们可能无法找到您的网站，这使得没有打开 JS 的人数成为一个争论点）。

这也可以说是不必要的。拥有资产后，您真正打算多久更改一次资产名称？作为一名专业开发人员，我认为答案是“很少”，尤其是如果您基于 CDN 的资产要求您请求主要版本（即“3.x”）并让库维护者处理次要版本。

如果您要处理数百个页面，则需要研究某种模板，因为以任何形式（不仅仅是资产）维护它都会很麻烦。

根据您的主机，您可能可以访问 PHP 或 Ruby 或 Python。这些服务器端语言中的每一种都有网站模板系统，现在是检查它们的好时机。

如果您的托管选项没有，还有 JavaScript 选项。

正如 cmets 中所述，Moustache.js 是一个不错的选择，并且可用于多种语言（包括 JavaScript、PHP 和 Ruby），无论您的托管选项有什么可用，它都是一个不错的选择。

如果您只是在试验，您也可以玩弄HTML Templates，它是新 HTML 组件标准的一部分。但是请注意，Internet Explorer 根本不支持它们。

一旦您选择了模板解决方案，您就可以创建一个包含所有头部内容的模板部分（或者，根据模板系统，您可以创建一个包含该数据的“布局”，以及您网站的核心结构；请参阅文档以获取有关路径的信息）。这样，您只需要在事情发生变化时更新一个文件。

然后，您还可以从 JavaScript 文件中提取 CSS，这样您在页面加载时就不会出现无样式内容 (FOUC)（无论如何，无论采用何种路径，您都可能想要这样做你去）。

【讨论】：

非常感谢肖娜！你是对的，我看不出有什么理由改变他们的资产名称（mysite.css、mysite.js），但肯定是网站图标和 CDN 文件（例如 Bootstrap 发布了我想要的新功能）。我将研究模板、PHP、Ruby 和 Python，这些我以前没有做过，只是在研究 javascript 解决方案。

【解决方案2】：

好吧，我当然不会为此使用 JavaScript，因为这对 SEO 来说很糟糕。您需要使用服务器端解决方案。其中，我有两个。

第一个是PHP，它允许include 'head.txt'

第二个是SSI（.shtml），允许

如果您不懂任何服务器端语言，请使用此语言。它不是最好的语言，但是，它是迄今为止最容易使用的语言，并且您的服务器会支持它。此外，它本质上是一个 HTML 文件，您可以在其中将扩展名更改为 .shtml

记住，类似的功能和方法可能存在于其他语言中，我从朋友那里知道，asp和asp.NET都有这个能力，我只是不知道如何使用它们。

【讨论】：

谢谢本！我以前从未听说过.shtml。所以两个回复都告诉我最好的解决方案是服务器端解决方案。这真的很有帮助！

【解决方案3】：

您已经有了解释为什么需要服务器端解决方案的答案。我想提供一个替代解决方案。您真正需要的是某种脚本语言来自动完成更新标签中所有链接的繁琐工作。这些服务器端解决方案为您提供了这样的功能：一种编程语言（经常提到 PHP），可以自动组合您的模板（您网站的一部分，在所有 100 个页面上都是相同的，例如页眉和页脚以及里面的所有内容) 与您的真实内容。

静态站点生成器为您提供相同的功能，但在您自己的计算机上。您手动编写必须在每个页面上重复的 html（就像您现在似乎正在做的那样）并将其保存为模板。静态站点生成器是在您自己的计算机上运行的脚本。它将您所有的 100 多个内容页面与模板结合在一起，并生成 100 多个完整的 html 页面，然后您可以将这些页面上传到您的托管服务提供商。

如果您想更新 favicon 或 bootstrap 版本，您只需再次运行脚本，100 多个页面就会一次全部更新。

在您自己的计算机上生成网站然后上传它们有一些优势：有些人认为，仅提供 html 页面的服务器比同时运行脚本语言的服务器更快且更不易受到攻击。

这种解决方案也有一些缺点，主要是每次重新生成它们时都需要重新上传所有的 html 页面，因为您的模板有一个小的变化。

This article is a good introduction

【讨论】：

我必须看看 Host gator 是否允许从根目录批量上传所有内容。如果是这样，这也是一个很好的解决方案。谢谢snwclone！