CSS / JS dinamik URL'ler

9 Cevap php

Benim büyük apps birini bölme ve tekrarını önlemek için CSS, javascript ve resim gibi ortak nesneler evine bir 'CDN' url tanıtan ediyorum. Yapmam gereken şey, bizim dev ortamlar için ayrı URL'leri sahip olduğunu, bu yüzden olabilir:

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

Ben bu bizim PHP kodu tarafından oluşturulan şeyler için işe almak içeri ne çalışıyoruz ortamına bağlı olarak, ama ben. css için bir kayıp değilim ve. js çağrılır dosyaları. Örneğin, nasıl böyle bir şey yapabilirim:

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

Farklı etki alanları arasında geçiş?

Bununla başa çıkmak için en iyi yolu nedir?

[EDIT]

Sadece bu yüzden herkes açıktır, CDN adres farklı bir etki sitedir. Yani, dev sitesi http://www-dev.domain.com hangi kullanmak http://cdn-dev.domain.com olurdu olabilir

9 Cevap

Göreli yolları, mutlak yolları kullanın. Bir CSS dosyası içinde, yol CSS dosyası ve HTML sayfasına göreli zaman.

CSS dosyası burada ise

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

Ve sınıf

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

Ardından tarayıcı görüntüyü yüklemeye çalışacaktır

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

Sadece etki göreli url kullanabilir?

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

Ardından tarayıcı geçerli etki altına bakacağız.

Ben gerçekten sadece bugün aynı şey üzerinde çalışıyor ve burada ben ile geldi ne ettik.

Sitenizin kök senin. Htaccess dosyasında bu sopa. Bu tabii ki Apache ve Mod_rewrite dayanır.

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]

Bu CDN parantez içinde dosya türleri için istekleri göndermek ve birincil sunucu üzerinde diğer türleri için istekleri devam edecektir.

Ayrıca, bir inşa süreci var ve belirli ortam dosyalarını oluşturmak için şablonlar kullanabilirsiniz

örneğin yoursite.template.css adlı bir dosyada

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

istediğiniz etki alanı ile @ @ @ @ @ URL yerine daha yoursite.css dosyası oluşturun.

. Sunucu yapılandırmasına bağlı olarak, ayrıca dosya için php-uzantısını ekler ve onları da PHP olarak tedavi olabilir:

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

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

Bu aynı zamanda JavaScript dosyaları için çalışır.

Sunucu aynı ise, göreli yolları kullanabilirsiniz. / Http / blah / test / images / button.png veya .. / images / button.png gibi

When using relative URLs, you can force a "base" url. In the <head> tag, use <base href="http://cdn-dev.example.com">. Then, every relative link "/style.css" will point to "http://cdn-dev.example.com/style.css"

Başvuru için: http://www.w3schools.com/TAGS/tag_base.asp

Şey ... Ben ile geldi çözüm ... sorta ... hackish çirkin ve aptal oldu. Ancak, cehennem, işe yaradı:

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

?>

Bu belirtildiği gibi, hacky ve çirkin ve çok daha hoş yapılabilir. Ama, en azından, sen ana bağlı dosyaların belirli gruplar için belirli yerleri tanımlamak için izin vermez.

Buna da bir cevap ararken, ben basit bir tane gördüm: yinelenen sınıfları, senaryo 1 için biri (images aynı etki yüklemek) ve senaryo 2 için başka (images CDN yüklemek) ile css dosyası oluşturun.

örneğin

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

Sonra index.php doğru sınıf aramak için PHP tanıtmak

örneğin

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

etiketler