如何在不重复的情况下包含即插即用小部件静态 [CSS/JS]？

Question

我有一个可重复使用的 google-maps 小部件，可以将其插入任何可能想要使用它的页面。

小部件具有：

• Google 地图特定 js 包含。
• 地图特定的 css 来设置地图样式。

问题：

• 小部件代码被包含为服务器端包含。
• 小部件特定的 js 和 css 必须包含在小部件代码中。
• 因此，如果小部件在页面上重复 5 次，则 js 和 css 的 include 语句将被包含 5 次。
• 我无法将小部件特定包含在 标记中，因为如果页面上未使用该小部件，则未使用的 js 和 css 下载到客户端。

那么，我应该如何保留 js 和 css 以便仅在使用小部件时才包含它们，并且在重复小部件的情况下不进行多次包含。

我的技术：

• Django-Python [如果这很重要]
• 我在 php 上也遇到了同样的问题

注意：

• 我了解在页面上多次包含相同的 js 和 css 不会强制客户端多次下载它们，但我想避免多次包含。

我应该如何解决这个问题？

如果我错过了什么，请随时询问更多信息。 :)

Answer 1

根据您的用例，有几个选项：

1. 为需要该小部件的所有页面使用单独的基本模板；在该库中添加所需的 js/css 文件。对于所有需要该小部件的视图，请从修改后的基础继承。

2. 使用javascript实现条件包含。