CakePHP의 CSS 파일 내부에서 URL이 어떻게 처리되어 올바른 위치를 참조합니까?
https://stackoverflow.com/questions/512556
-
21-08-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian문제
CSS 파일을 사용하여 웹 사이트를 많이 디자인하고 있지만 몇 가지 배경 이미지, 목록에 총알 이미지가 있으며 CSS에 대한 또 다른 필요성을 찾을 것입니다. url() 기능.
그러나 케이크에서 모든 URL은 Route::url() 여러 가지면에서 가장 일반적으로 기능합니다. $html->url()
그러나 내 문제는 CSS 파일이 PHP에 의해 해석되지 않는다는 것입니다. 다음과 같은 내용이 포함 된 CSS 파일을 만드는 방법
div.coolbg {
background-image: url('<?= $html->url("/img/coolbg.jpg") ?>');
}
마지막 옵션은 레이아웃에서 CSS 파일을 인라인으로 가져 와서 해석 할 수 있도록하는 것입니다. 그러나 나는 더 "케이크"접근법을 사용하는 것을 선호합니다.
감사!
해결책
CSS 파일에서 $ html-> url ()를 사용할 필요가 없으므로 PHP를 통해 CSS 파일을 구문 분석하거나 CSSController를 만들 필요가 없습니다.
케이크 앱이 Virtual Hosts DocumentRoot에 설치된 경우 Webroot에서 이미지의 모든 경로를 절대적으로 만듭니다. 예를 들어
div.coolbg {
background-image: url(/img/coolbg.jpg);
}
이것은 app/webroot/img/coolbg.jpg의 이미지를 귀하에게 적용합니다.
케이크 앱이 가상 호스트에 설치되어 있지 않은 경우 DocumentRoot, 즉 URL을 통해 케이크 앱에 액세스 할 수 있습니다. http://www.domain.com/myapp/, 그런 다음 CSS 파일과 관련하여 이미지로가는 길을 만듭니다. app/webroot/css/cake.generic.css의 스타일 규칙을 확인하십시오.
#header h1 {
background:#003D4C url(../img/cake.icon.gif) no-repeat scroll left center;
color:#FFFFFF;
padding:0 30px;
}
스타일 시트가 앱/webroot/css/directory에 살고 이미지가 앱/webroot/img/directory에 살고 있기 때문에 작동하기 때문에 "../img/cake.icon.gif"는 CSS에서 나옵니다. 디렉토리, IMG 디렉토리로 돌아갑니다.
다른 팁
나는 ZAM3858이 제안한 솔루션을 확실히 갈 것입니다. 그리고 두 개의 별개의 위치에 이미지를 갖고 싶지 않다면 이미지를 가리키는 CSS 디렉토리에 상징적 링크를 만듭니다. 이와 같이:
$ cd app/webroot/css
$ ln -s ../img .
이제 이미지 경로는 HTML 헬퍼와 스타일 시트 모두에 대해 올바르게 해결됩니다.
// css:
url(img/image.png);
// view.ctp
echo $html->image('image.png');
가장 간절한 솔루션은 아니지만 CakePhp가 제공하는 것처럼 보이지 않습니다.
라인을 변경하십시오 background 에게
background:url(../img/menu_027_l.jpg) no-repeat left;
Apache에서 .htaccess 파일을 편집하여 PHP를 통해 처리 할 CSS를 추가 할 수 있습니다. 그것을 처리하는 것만으로, 그것을 처리하는 것은 약간의 성능이 히트합니다.
AddType application/x-httpd-php .css
케이크 물체를 처음 인스턴스화하지 않는 한 케이크 물건에 너무 도움이되지 않습니다. HTML 헬퍼를 사용하려면 첫 번째 케이크 객체가 어떻게 인스턴스화되는지 알아 내고 CSS에서 그것을 모방 할 것입니다. 정확히 어떻게 해야하는지 확실하지 않습니다. 전체 CSSController를 갖는 것이 과잉 일 것이라고 생각하지만 앱 컨트롤러를 인스턴스화해야 할 수도 있습니다 (결국 다시 작성된 CSS URL이 앱의 설정을 반영하기를 원하십니까? ). 어쨌든 CSSController를 만들어야 할 것 같습니다.
Cakephp 전문가들이 아마도 이것을 제안한 것에 대해 나를 미워할 것입니다 .. :)
가장 쉬운 솔루션은 CSS 폴더에 이미지 파일을 포함시키는 것이 었습니다. 이 같은
/app/webroot/css/css_images/mypic.jpg
그래서 CSS 파일에서는 다음과 같습니다.
background-image: url(css_images/mypic.jpg);
나쁜 일은 분명히 가장 열렬한 일이 아닙니다. 좋은 점은 CSS가 CSS 파일과 관련하여 이미지를 찾기 때문에 멋진 URL을 사용하는지 여부에 관계없이 작동한다는 것입니다.
CakePHP의 도우미에 CSS를 포함시킬 때 CSS의 상대적 URL이 분리된다는 것을 알았습니다. 라우터가 다른 URL을 같은 페이지에 매핑 할 수 있기 때문에 상대 URL이 달라야합니다. 예를 들어 LocalHost/MyApp/Parts/Index 또는 LocalHost/MyApp/Parts/또는 LocalHost/MyApp/Parts와 같은 URL이있는 경우 ../img/image.gif의 상대 URL은 그 중 하나에만 작동합니다.
내 도우미 안에서 내가 돌아 다니는 유일한 방법은 내 CS를 이런 식으로 만드는 것이 었습니다.
.jquery-dialog-spinner {
display: none;
position: fixed;
z-index: 1010;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba( 0, 0, 0, .1 )
url('__loader_image__')
50% 50%
no-repeat;
}
그런 다음 CSS를 출력하기 전에 코드의 생성 URL로 태그를 바꾸십시오.
$map = array(
'__loader_image__' => $this->Html->assetUrl('ajax-loader.gif', array('pathPrefix' => IMAGES_URL))
);
$formatted_css = strtr($this->css, $map);
$response .= "<style type=\"text/css\">" . $formatted_css . "</style>";
더 쉬운 방법이 있다면 의견을 보내 주셔서 감사합니다.
