В рамках, использующих правила перезаписи, как лучше всего интегрировать CSS и JS?

У меня есть структура, которая маршрутизирует все входящие URI через базовый файл и обрабатывает статические файлы. У меня есть подкаталог /static, в который я помещаю все CSS, JS и изображения (т.е./static/css/main.css), чтобы все было ясно.

Мой собственный код и плагины справляются с этим прекрасно, но иногда нужно реализовать другой код, и часто файлы CSS будут пытаться сочетать с вызовами URI в этих файлах. Как я могу справиться с этим наилучшим образом?

Пример:

/о/компании маршрутов /script? Д = о/компании и блокирует основную структуру сайта. Однако; /static/css/main.css использует фоновое изображение; /static/images/widget/bg -color.png

Поскольку это структура, я не рад жестко закодировать/статические пути в файлах CSS. Во-первых, я не хочу ограничивать веб-сайты только обслуживанием из некоторого корневого каталога.:) Для всех JS есть объекты, которые имеют дело с этим (т.е. Var x = $xs_dir.js + '/ script.js';), но ничего не существует для CSS. Думаю, у меня есть пять вариантов;

(худший). У меня есть опция в моем админ-инструменте, который сканирует все файлы CSS для ссылок URI и добавляет их в правильный статический каталог и записывает все CSS, как если бы они были статическими в корневой каталог.
(плохой). Положитесь на способность веб-сервера псевдонимы любого статического каталога в один корневой статический каталог и пусть администраторы справятся с ним.
(meh, slow) Подавайте файлы CSS через фреймворк, фильтруя URI с правильными статическими путями.
(простейший, но не очень простой) Ручной код статических частей моих CSS файлов для любой настройки сервера там может быть, и просто убедитесь, что их легко найти и изменить.
(возможно, лучший, но сложный?) У вас есть правило перезаписи, которое обнаруживает изображения в текущем каталоге, пересылает их в статический каталог и записывает все CSS с некоторым признанным динамическим путем. (т.е. вместо /static/images/img.png делать images/img.png и полагаться на правила перезаписи, чтобы подталкивать его туда, куда ему нужно идти, а также ограничивать структуру веб-сайта, чтобы никогда не иметь подкаталог под названием "изображения" )

Любые дополнительные опции? Идеи? Я знаю, что Joomla и аналогичные имеют некоторые перезаписи файлов, и, вероятно, нет. 5?

Ответ 1

Не уверен, что у вас есть файл .htaccess или нет, но один вариант заключается в том, чтобы включить правило перезаписи для запроса в папке "images" для перенаправления в вашу статическую (или любую другую) папку:

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

Таким образом, вы можете ссылаться на все ваши изображения как на /images/whatever.png в своем CSS.

Если вам нужна другая настройка для разных серверов, у вас всегда может быть отдельный файл .htaccess для каждой среды или сервера, а версия контролирует их.

Ответ 2

Вы можете использовать базовый тег HTML http://www.w3schools.com/tags/tag_base.asp, чтобы установить путь для всех относительных URL-адресов в вашем HTML-коде. Однако это может также повредить вашу относительную ссылку.

Ответ 3

Вероятно, немного оптимистично требовать такой подход от админов, особенно если они не контролируют серверную среду:

Вы можете сделать это, используя отдельный (дополнительный) домен для обслуживания статических файлов. Затем вы можете создать отдельный виртуальный хост на своем веб-сервере для обслуживания этих файлов. Этот подход также имеет то преимущество, что вы можете оптимизировать скорость, используя домен без файлов cookie и параметры агрессивного кеша. Кроме того, он позволяет браузеру запускать дополнительные потоки против поддомена, чтобы загрузить эти файлы параллельно с остальной частью страницы.

например. Google уже размещает несколько фреймворков с открытым исходным кодом, которые вы можете использовать напрямую, например JQuery UI с соответствующий css.

Еще один вариант для администраторов - использовать обратный прокси, например varnish, чтобы обслуживать и кэшировать любой существующий файл, а затем передавать каждый другие получают uri для сервера backend, содержащего контроллер структуры (тогда файлы фреймворка, за исключением "маршрутизатора", должны быть за пределами общей папки для обеспечения безопасности).

Я предполагаю, что по крайней мере иметь возможность обслуживать статические файлы из домена, не содержащего файлы cookie, будет удобно, иначе Duffmanss ответ будет достаточным.

Ответ 4

Вариант 5 работает с Apache. Если все ваши ссылки на изображения в ваших файлах css начинаются с относительного subdir без предшествующей косой черты (например, url(images/image.png)), то в <css_dir> вы можете переписать images/ на <where_the_images_are>. Ваш .htaccess остается и относится только к <css_dir> вместе с файлами css и работает там, где вы его уронили.

RewriteRule нужно только знать, что images/ по отношению к самому себе имеет значение.

Ответ 5

Предполагая, что вы маршрутизируете все на "script.php", это приведет к перенаправлению всех несуществующих файлов на script.php, что позволит обслуживать статический контент напрямую, а также маршрутизацию на ваши контроллеры.

RewriteEngine On

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

Ответ 6

Если все CSS файлы заканчиваются на /static/css/ и все изображения, на которые ссылаются ссылки на CSS, находятся в /static/images/, просто убедитесь, что всякий раз, когда вы ссылаетесь на изображение из CSS, которое вы используете относительный путь ../images/widget/bg-color.png и он должен работать нормально.