是否可以在一个共同的地方设置样式和 JavaScript 引用并将其用于所有 HTML 页面？

Posted 2023-03-06

【中文标题】是否可以在一个共同的地方设置样式和 JavaScript 引用并将其用于所有 HTML 页面？

【英文标题】：Is it possible to set style and JavaScript reference in a common place and use it all HTML page?

【发布时间】：2020-06-18 23:52:25

【问题描述】：

我有 50 多个 html 页面，在所有页面中我都使用样式、javascript 和 bootstarp 参考。

如果我想更改样式路径，那么我必须对所有页面都这样做，这是一项耗时的任务。

那么有什么方法可以让我以通用方式定义（全局）我的样式、javascript 和 bootstarp 并与所有页面共享，这样如果我需要更改样式路径，那么我只需在全局位置进行一次更改.

例如：我在所有 HTML 页面中都有以下 5 个参考。

<link rel="stylesheet" href="../styles/jquery.contextMenu.css">
<link rel="stylesheet" href="../styles/style.css">
 <script src="../scripts/constants.js"></script>
    <script src="../scripts/resources.js"></script>
    <script src="../scripts/utilities.js"></script>

现在，如果我想更改任何样式的位置，那么我必须更改所有 HTML 页面。 有什么办法可以让我们在一个共同的地方声明参考路径吗？

谢谢

【参考方案1】：

您可以通过在函数外部声明来取出路径并使其成为全局路径：

//declared once only
var css_path = "../styles/";
var js_path = "../scripts/";

//the below in all the HTML files
<link rel="stylesheet" href= css_path + "jquery.contextMenu.css">
<link rel="stylesheet" href= css_path + "style.css">
<script src= js_path + "constants.js"></script>
<script src= js_path + "resources.js"></script>
<script src= js_path + "utilities.js"></script>

【讨论】：

如果您的结构中有 2 个或更多文件夹，这并不能解决问题。

@Ezan​​i，我在哪里声明 css_path 和 js_path？在任何全局 js 文件中？

您只能在任何 js 文件中声明它一次，但在任何函数之外（这就是使其成为全局的原因）。

【参考方案2】：

只需使所有路径都相对于站点的根目录，而不是相对于当前文件夹。您可以通过在路径上使用 / 前缀来做到这一点：

<link rel="stylesheet" href="/styles/jquery.contextMenu.css" />
<link rel="stylesheet" href="/styles/style.css" />
<script src="/scripts/constants.js"></script>
<script src="/scripts/resources.js"></script>
<script src="/scripts/utilities.js"></script>

然后您可以将所有这些引用放在一个服务器端包含中，您可以将其添加到所有相关页面。

【讨论】：

谢谢@Rory，我不想使用相对路径。我想在全局级别声明路径并在 HTML 中使用该路径

为什么？这充其量是一种反模式，最坏的情况是纯粹的糟糕做法。

我将该 HTML 用作 SharePoint Web 部件，并上传网站资产上的所有 css 和 js 文件。此路径对于所有 SharePoint 客户端都不相同。

这不是不让所有路径都相对于根目录的理由。

是的，这就是原因，因为我们必须上传网站资产上的所有 js 和 css，并且我们创建 SharePoint 页面（具有不同的文件夹结构），我们在那里使用 css 和 js，但它不起作用.因此，我们需要根据 SharePoint 页面和站点资产更改所有 html 文件中的 css 和 js 引用。那么是否有任何共同的地方，以便我们可以在一个地方进行更改并在所有 html 页面中使用该路径。