W jaki sposób obsługiwane są adresy URL w pliku CSS w CakePHP, aby zawierały odniesienie do właściwej lokalizacji?

Question

Projektuję stronę internetową za pomocą plików CSS, ale mam kilka wystąpień obrazów tła, obrazów dla punktorów na listach i prawdopodobnie będę potrzebował innej funkcji css url().

Ale, tort, wszyscy URL powinny być obsługiwane przez funkcję Route::url(), na kilka sposobów, będąc najczęściej $html->url()

Ale moim problemem jest to, że pliki CSS nie są interpretowane przez PHP. W jaki sposób można utworzyć plik CSS zawierający coś takiego:

div.coolbg { 
    background-image: url('<?= $html->url("/img/coolbg.jpg") ?>'); 
} 

See, moja ostatnia opcja jest, aby zaimportować plik CSS inline na układ, więc może być interpretowane. Ale bardzo lubię używać bardziej "ciastowatego" podejścia.

Dzięki!

Answer 1

Nie musisz używać $ html-> url() w swoim pliku css, w związku z tym nie musisz analizować plików CSS przez PHP lub tworzyć CssController.

Jeśli Twoja aplikacja do ciast jest zainstalowana w twoim wirtualnym hostingu DocumentRoot, po prostu ustaw wszystkie ścieżki do obrazów absolutnie z webroota. na przykład

div.coolbg { 
    background-image: url(/img/coolbg.jpg); 
} 

ten będzie miał zastosowanie obraz w app/webroot/img/coolbg.jpg do

Jeśli ciasto aplikacja nie jest zainstalowana w hostach wirtualnych DocumentRoot, czyli dostęp ciasto aplikację za pośrednictwem adresu URL jak http://www.domain.com/myapp/, następnie tworzysz ścieżkę do obrazu względem pliku css. Sprawdź reguły stylu w aplikacji/webroot/css/cake.generic.css np.

#header h1 { 
background:#003D4C url(../img/cake.icon.gif) no-repeat scroll left center; 
color:#FFFFFF; 
padding:0 30px; 
} 

To działa, ponieważ arkusze stylów żyć w app/webroot/css/katalogu, a obraz żyć w app/webroot/img/katalogu, więc ścieżka”../img/cake.icon.gif "wychodzi z katalogu css, a następnie z powrotem do katalogu img.

Answer 2

Możesz dodać CSS do przetworzenia przez PHP, edytując plik .htaccess w Apache. Przetwarzanie go, w przeciwieństwie do wypluwania go, ma niewielki wpływ na wydajność.

AddType application/x-httpd-php .css 

Zobacz również: http://www.webmasterworld.com/forum88/5648.htm

Answer 3

to nie pomoże zbyt wiele z rzeczy ciasto chyba najpierw instancji obiektów ciasto. Jeśli chcesz korzystać z helpera HTML, prawdopodobnie będziesz chciał dowiedzieć się, w jaki sposób tworzony jest pierwszy obiekt Cake, a następnie naśladować go w swoich materiałach CSS. Nie jestem pewien, jak to zrobić - myślę, że posiadanie całego CSSControllera byłoby przesadzone, ale myślę, że być może będziesz musiał utworzyć instancję kontrolera aplikacji (w końcu chcesz, aby przepisany adres URL css odzwierciedlał ustawienia aplikacji, prawda?). Więc myślę, że i tak będziesz musiał stworzyć CSSController.

Answer 4

cała masa CakePHP ekspertów prawdopodobnie będzie mnie nienawidzić za zasugerowanie tego jednego .. :)

Najprostszym rozwiązaniem dla mnie było to po prostu plik obrazu w folderze css.Coś takiego

/app/webroot/css/css_images/mypic.jpg 

Więc w pliku css Chciałbym po prostu umieścić w:

background-image: url(css_images/mypic.jpg); 

Złą rzeczą jest oczywiście to nie cakiest rzeczą do zrobienia. Dobrą rzeczą jest to, że będzie działać niezależnie od tego, czy używasz wyszukanego adresu URL, czy nie, ponieważ css znajduje obraz względem pliku css.

Answer 5

Zdecydowanie wybrałbym rozwiązanie sugerowane przez zam3858. Jeśli nie chcesz mieć swoich obrazów w dwóch różnych lokalizacjach, utwórz dowiązanie symboliczne w katalogu css, który wskazuje na obrazy. Tak:

$ cd app/webroot/css 
$ ln -s ../img . 

Teraz ścieżki obrazu zostaną rozwiązane poprawnie na arkuszach zarówno pomocnika html i styl:

// css: 
url(img/image.png); 

// view.ctp 
echo $html->image('image.png'); 

To nie może być cakiest rozwiązanie, ale to nie wygląda cakephp zapewnia jeden.

Answer 6

zmienić linię z background do

background:url(../img/menu_027_l.jpg) no-repeat left; 

Answer 7

Okazało się, że względne adresy URL w CSS rozpadać podczas osadzania CSS pomocnik dla CakePHP. Dzieje się tak, ponieważ router może mapować różne adresy URL na tę samą stronę, więc względny adres URL musi być inny. Na przykład, jeśli masz adres URL, taki jak localhost/myapp/parts/index lub localhost/myapp/parts/lub localhost/myapp/parts, to względny URL pliku ../img/image.gif będzie działał tylko dla jednego z nich.

W moim pomocnikiem jedyny sposób znalazłem, aby ominąć to było zrobić mój css jak to

.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; 

}

a następnie zastąpić tag z wygenerowanym URL w kodzie przed wyjściem z css.

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

Jeśli jest łatwiejszy sposób na zrobienie tego, byłbym wdzięczny za komentarz.