CSS/JS의 동적 URL

내 큰 응용 프로그램 중 하나를 분할하고 CSS, 자바 스크립트 및 이미지와 같은 일반적인 객체를 포함하는 'cdn'URL을 소개하여 중복을 피합니다. 내가해야 할 일은하지만, 우리의 dev에 환경을위한 별도의 URL이, 그래서 내가있을 수 있습니다. CSS/JS의 동적 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 주소가 다른 도메인 사이트입니다. 따라서 dev 사이트는 http://www-dev.domain.com 일 수 있습니다. http://cdn-dev.domain.com

출처

2009-05-13 dragonmantank

절대 경로가 아닌 상대 경로를 사용하십시오. CSS 파일 내부에서 경로는 HTML 파일이 아닌 CSS 파일과 관련이 있습니다.

CSS 파일은 여기

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

입니다 그리고 당신의 클래스는 다음 브라우저가 서버가 동일한 경우

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

출처

2009-05-13 16:01:05

보통 CSS 테마 폴더 아래에 이미지 폴더를 놓을 것입니다. 특정 스타일 시트 문서와 관련이없는 이미지 이름을 사용할 수 있기 때문입니다. 나는/this_theme/아래에 button.png를 가질 수 있으며,/that_theme/아래에 동일한 파일 이름을 가질 수 있으며 클래스 정의는 그대로 유지 될 수 있습니다. –

상대/절대 URI 경로를 절대/상대 URI와 혼동하지 마십시오. '/ css/style.css'는 절대 URI 경로이지만 상대 URI이기 때문입니다. 'http : //'로 시작하는'http : // cdn.example.com/css/style.css'는 절대 URI이지만 URI 경로는 아닙니다 (단지 URI 경로 만 포함합니다). – Gumbo

물론 이것은 이미지와 동일한 도메인에서 CSS 파일을 호스팅하는 경우에만 작동합니다. 보통은 그렇지 않습니다. –

도메인 상대 URL을 사용 하시겠습니까?

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

그러면 브라우저가 현재 도메인 아래에서 보입니다.

출처

2009-05-13 16:00:01 gnud

저는 문자 그대로 방금 같은 일을하고 있으며, 여기에 제가 생각해 냈습니다.

사이트의 루트에있는 .htaccess 파일에 붙여 넣으십시오. 이것은 분명히 아파치와 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에 괄호에있는 파일 형식에 대한 요청을 보내고 기본 서버의 다른 유형에 대한 요청을 계속합니다.

출처

2009-05-13 16:00:40

CDN의 목적을 저버리지 않습니까? 즉, 클라이언트가 CDN에 대한 모든 요청에 대해 서버에 계속 연락해야한다는 것입니다. – davr

참이지만 내용은 서버에서 제공되지 않습니다. 따라서 5Mb FLV 대신 서버에서 제공됩니다. 실제 다운로드가 이루어지는 CDN으로 리디렉션됩니다. 이 구성을 사용하면 변경없이 단일 서버 개발 환경에서 실제 환경으로 쉽게 전환 할 수 있습니다. 나는 이것을 할 방법으로 이것을지지하지 않는다. 그것은 나를 위해 일하고 301을위한 아주 작은 왕복은 그것의 가치가있다. –

CDN 및 기타 로컬 파일에 일부 파일이있는 경우 어떻게됩니까? – dragonmantank

에서 이미지를로드하려고 시도합니다

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

경우 상대 경로를 사용할 수 있습니다. like /http/blah/test/images/button.png 또는 ../images/button.png

출처

2009-05-13 16:01:08 NinethSense

상대 URL을 사용하는 경우 "기본"URL을 사용할 수 있습니다. < 머리 > 태그에서 < 기본 href = "http://cdn-dev.example.com">을 사용하십시오. 그런 다음 모든 상대 링크 "/ 스타일.CSS는 "가리 킵니다에"http://cdn-dev.example.com/style.css "참고로

: http://www.w3schools.com/TAGS/tag_base.asp

출처

2009-05-13 16:05:52

그러나 단점도 있습니다.예를 들어 조각 식별자 'foo'를 가진 URI 참조는 같은 문서에서'# foo'가 아니라'/ # foo'로 해석됩니다. – Gumbo

또한 환경을

yoursite.template.css라는 특정 파일 파일에

예를 들어

를 생성하는 빌드 프로세스 및 사용할 수있는 템플릿을 가질 수 있습니다

.cool 버튼 {배경 - 이미지 : 홈페이지 ('@@ URL @@/이미지/button.png');} 도메인과 @@ URL을 @@ 교체보다

는 yoursite.css 파일을 생성 너는 원해.

출처

2009-05-13 16:10:01 Robbie

음 ... 내가 생각해 낸 해결책은 ... 일종의 ... 하키하고, 추악하고, 멍청한 말입니다. 그러나, 지옥, 그것은 일했다 : 그것은 일했다 : 그것은 언급 한 바와 같이, hacky이고 추한 훨씬 더 예쁘게 할 수 있었다. 그러나 최소한 호스트에 따라 특정 파일 그룹에 대한 특정 위치를 정의 할 수 있습니다.

출처

2009-05-13 16:12:48

및 도메인 관련 URL은 아마도 훨씬 더 예쁘고 유용 할 것입니다. 내 생각에, 내 생각에, 그렇지 않으면 개인 정보에 연결하는 데 더 유용합니다 (나는 db 암호와 웹 응용 프로그램과 같은 이런 종류의 것을 사용하는 경향이 있습니다). –

서버 구성에 따라, 당신은 또한 당신의 파일 이름에 .PHP-확장을 추가 할 수 있습니다 그들도 PHP 스크립트로 처리 한 :이 또한 자바 스크립트 파일에 사용

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

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

합니다.

출처

2009-05-14 13:00:17

중복 된 클래스로 하나의 시나리오 (이미지가 동일한 도메인에서로드 됨)와 시나리오 2 (이미지가 CDN에서로드 됨)에 대한 CSS 파일을 만드는 간단한 방법을 찾았습니다.

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

출처

2011-05-12 11:45:23 newyuppie

나는 팁을 주셔서 감사합니다. 이걸 sass와 함께 사용하는 것은 꽤 쉬워야합니다. – TWilly

CSS/JS의 동적 URL

답변

관련 문제