Динамические URL в CSS / JS - PullRequest
Новая
       23

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

13 голосов
/ 13 мая 2009

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

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'); }

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

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

[РЕДАКТИРОВАТЬ]

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

Ответы [ 9 ]

22 голосов
/ 13 мая 2009

Используйте относительные пути, а не абсолютные. Внутри файла 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
5 голосов
/ 13 мая 2009

Просто использовать доменные ссылки? 

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

Тогда браузер будет искать под текущим доменом.

2 голосов
/ 14 мая 2009

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

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

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

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

2 голосов
/ 13 мая 2009

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

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

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

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

1 голос
/ 12 мая 2011

В поисках ответа на этот вопрос я также увидел простую: создайте свой 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";} ?>">
1 голос
/ 13 мая 2009

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

Вставьте это в ваш файл .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 и сохранит запросы на другие типы на вашем основном сервере.

0 голосов
/ 13 мая 2009

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

<?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";

?>

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

0 голосов
/ 13 мая 2009

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

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

0 голосов
/ 13 мая 2009

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

...