Question

我有一个框架，通过一个基本文件路由所有传入的URI，并处理静态文件我有一个子目录/静态，我把所有的CSS，JS和图像（即./静态） /css/main.css）为了保持清晰。

我自己的代码和插件处理这个很好，但有时需要实现其他代码，并且CSS文件通常会尝试调整这些文件中的URI。我怎样才能以最好的方式解决这个问题？

一个例子;

/左右/公司路线到 /脚本？Q =约/公司并锁定网站的主要结构。然而; /static/css/main.css 使用来自的背景图像; /static/images/widget/bg-color.png

由于这是一个框架，我不乐意对CSS文件中的/ static路径进行硬编码。首先，我不希望将网站限制为仅从某个根目录提供。 :)对于所有JS，有对象处理这个问题（即.var x = $ xs_dir.js +'/ script.js';）但CSS没有任何内容。我认为我有五种选择;

（最糟糕）在我的管理工具中有一个选项，它扫描所有CSS文件以获取URI引用，并在它们前面添加正确的静态目录，并将所有CSS编写为静态到根目录。 / p>
（差）依靠网络服务器将任何静态目录别名为一个根目录静态目录的能力，让管理员处理它。
（meh，slow）通过框架提供CSS文件，使用正确的静态路径过滤URI。
（最简单，但不是很容易）手工编写我的CSS文件的静态部分，以便进行任何可能的服务器设置，并确保它们易于查找和更改。
< / LI>
（可能最好，但很复杂？）有一个重写规则，可以检测当前目录中的图像，将它们转发到静态目录，并用一些识别的动态路径写入所有CSS。（即代替/static/images/img.png执行images / img.png并依赖重写规则将其推送到需要的位置，同时限制网站结构永远不会有一个名为'images'的子目录）

还有其他选择吗？想法？我知道Joomla和类似的有一些文件的重写，可能没有。 5？

Answer 1

不确定您是否有.htaccess文件，但有一个选项是在“images”文件夹下为请求添加重写规则，以重定向到您的静态（或其他）文件夹：

RewriteRule ^[^\?]*(images/)(.*)$ /static/$1$2 [NC,L]

通过这种方式，您可以将所有图像引用为CSS中的/images/whatever.png。

如果您需要为不同的服务器设置不同的设置，您可以为每个环境或服务器提供单独的.htaccess文件，并对这些文件进行版本控制。

Answer 2

您可以使用HTML基本代码http://www.w3schools.com/tags/tag_base.asp为HTML中的所有相对网址设置路径。但是，这也可能会破坏您的所有相关链接。

Answer 3

从管理员那里要求这种方法可能有点乐观，特别是如果他们不控制服务器环境，那么：

您可以通过使用单独的（子）域来提供静态文件。然后，您可以在Web服务器中创建单独的虚拟主机以提供这些文件。此方法还具有以下优势：您可以通过使用无cookie域和积极的缓存选项来优化速度。此外，它允许浏览器针对子域启动其他线程，与页面的其余部分并行下载这些文件。

E.G。 Google已经托管了许多可以直接使用的开源框架，例如Jquery UI和corresponding css。

管理员的另一个选择是使用反向代理（如varnish）来提供和缓存任何现有文件，然后将每个其他get uri传递给包含框架控制器的后端服务器（然后是框架文件，除了对于'router'，应该在公共文件夹之外以保证安全性。）

我想至少可以选择从无cookie域中提供静态文件会很方便，否则Duffmanss的回答就足够了。

Answer 4

选项5适用于Apache。如果css文件中的所有图像引用都以没有前面斜杠的相对子目录开头（例如url(images/image.png)），那么在<css_dir>中，您可以将images/重写为<where_the_images_are>。您的.htaccess留在，并且仅适用于<css_dir>以及css文件，并且可以在您放弃它的任何地方工作。

RewriteRule只需要知道相对于自身的images/是重要的。{/ p>

Answer 5

假设您将所有内容路由到'script.php'，这会将所有不存在的文件路由到script.php，从而允许直接提供静态内容，同时路由到您的控制器。

RewriteEngine On

RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.*)$ script.php [QSA,L]

Answer 6

如果所有CSS文件都以/static/css/结尾，并且CSS引用的所有图像都以/static/images/结尾，那么只需确保每当您从CSS引用图像时使用相对路径../images/widget/bg-color.png，它应该可以正常工作。

在使用重写规则的框架中，如何最好地集成CSS和JS？

6 个答案: