Динамические URL-адреса в CSS/JS

Я разделяю одно из моих более крупных приложений и представляю URL-адрес 'cdn' для размещения общих объектов, таких как CSS, javascript и изображения, чтобы избежать дублирования. Однако мне нужно иметь отдельные URL-адреса для наших сред dev, поэтому я могу:

http://cdn-dev.example.com
http://cdn-qua.example.com
http://cdn.example.com

в зависимости от того, в какой среде мы работаем. Я могу заставить это работать на вещи, которые генерируются нашим PHP-кодом, но я не понимаю, какие файлы .css и .js будут вызваны. Например, как мне сделать что-то вроде:

.cool-button { background-image: url('http://cdn.example.com/images/button.png'); }

переключаться между разными доменами?

Какой лучший способ справиться с этим?

[EDIT]

Просто, так что все понятны, адрес CDN - это другой домен, который находится на сайте. Таким образом, сайт dev может быть http://www-dev.domain.com, который будет использовать http://cdn-dev.domain.com

ОТВЕТЫ

Ответ 1

Используйте относительные пути, а не абсолютные пути. Внутри файла CSS путь относится к файлу CSS, а не к HTML-странице.

Если ваш файл CSS находится здесь

http://cdn.example.com/css/style.css

И ваш класс

.cool-button { background-image: url('../images/button.png'); }

Затем браузер попытается загрузить изображение из

http://cdn.example.com/images/button.png

Ответ 2

Просто используйте URL-адрес относительного URL?

.cool-button { background-image: url('/images/button.png'); }

Затем браузер будет выглядеть под текущим доменом.

Ответ 3

Вы также можете создать процесс сборки и использовать шаблоны для создания файлов, специфичных для среды

например. в файле с именем yoursite.template.css

.cool-button {background-image: url ('@@URL @@/images/button.png'); }

создайте файл yoursite.css, а не замените @@URL @@на домен, который вы хотите.

Ответ 4

В зависимости от конфигурации вашего сервера вы также можете добавить расширение .php к вашим именам файлов и также обработать их как скрипты PHP:

I.E.: style.css.php would contain:

.cool-button { background-image url(<?php echo $bgImgUrl;?>); }

Это также работает для JavaScript файлов.

Ответ 5

Я буквально только что работал над тем же и сегодня, и вот что я придумал.

Вставьте этот файл в .htaccess в корневой каталог вашего сайта. Это, очевидно, зависит от Apache и Mod_rewrite.

RewriteEngine on
RewriteBase /

# Redirect content to the CDN

RewriteCond %{HTTP_HOST} !^cdn\.server\.com$    [NC]
RewriteRule .*\.(jpg|gif|png|flv|css|js|swf)$   http://cdn.server.com/$0    [R=301,L]

Это отправит запросы на типы файлов в скобках в ваш cdn и сохранит запросы на другие типы на вашем основном сервере.

Ответ 6

Ища ответ на этот вопрос, я увидел простой: создайте свой файл css с повторяющимися классами, один для сценария 1 (загрузка изображений из того же домена), а другой для сценария 2 (загрузка изображений с CDN).

например.

.container {background-image:url(my/site/image.png;)}
.container-CDN {background-image:url(http://my.site.cdn.com/image.png;)}

Затем на вашем index.php введите PHP, чтобы вызвать правильный класс

например.

<body class="container<?PHP if ($whatever) {echo "-CDN";} ?>">

Ответ 7

Если сервер такой же, вы можете использовать относительные пути. Например /http/blah/test/images/button.png или../images/button.png

Ответ 8

При использовании относительных URL-адресов вы можете принудительно создать "базовый" URL-адрес. В <head> тег, используйте < base href= "http://cdn-dev.example.com" > . Затем каждая относительная ссылка "/style.css" будет указывать на " http://cdn-dev.example.com/style.css"

Для справки: http://www.w3schools.com/TAGS/tag_base.asp

Ответ 9

Ну... решение, которое я придумал, было... просто... хакерским, уродливым и немым. Но, черт возьми, это сработало:

<?php
    if ($_SERVER['SERVER_NAME'] == "www.domain.tld") {

        $incs_path  = "/usr/local/psa/home/vhosts/domain.tld/non-web-root-folder/private-files";

    }
    else {
        $incs_path  = "incs";
    }

require_once "$incs_path/$file-to-be-called.inc";

?>

Это, как уже отмечалось, взломанно и уродливо и может быть сделано гораздо красивее. Но это, по крайней мере, позволяет вам определять конкретные местоположения для определенных групп файлов в зависимости от хоста.