Как URL-адреса обрабатываются внутри файла CSS в CakePHP, чтобы они ссылались на правильное местоположение?

StackOverflow https://stackoverflow.com/questions/512556

Вопрос

Я часто разрабатываю веб-сайт с использованием файлов CSS, но у меня есть несколько вхождений фоновых изображений, изображений для маркеров в списках, и я, вероятно, найду другую потребность в CSS. url() функция.

Но в торте все URL-адреса должны обрабатываться Route::url() функция несколькими способами, наиболее распространенной из которых является $html->url()

Но моя проблема в том, что файлы CSS не интерпретируются PHP.Как я могу создать файл CSS, содержащий что-то вроде: 

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

Видите ли, мой последний вариант — импортировать CSS-файл в макет, чтобы его можно было интерпретировать.Но я предпочитаю использовать более «тортный» подход.

Спасибо!

Это было полезно?

Решение

Вам не нужно использовать $html->url() в вашем файле CSS, следовательно, вам не нужно анализировать файлы CSS через PHP или создавать CssController.

Если ваше приложение Cake установлено в DocumentRoot ваших виртуальных хостов, просто сделайте все пути к изображениям абсолютными из корневого каталога веб-сайта.например

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

Это применит изображение из app/webroot/img/coolbg.jpg к вашему

Если ваше приложение Cake не установлено на виртуальных хостах 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;
}

Это работает, поскольку таблицы стилей находятся в каталоге app/webroot/css/, а изображения — в каталоге app/webroot/img/, поэтому путь «../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;

Вы можете добавить CSS для обработки через PHP, отредактировав файл .htaccess в Apache.Обработка, а не просто выплевывание, немного снижает производительность.

AddType application/x-httpd-php .css

Также см: http://www.webmasterworld.com/forum88/5648.htm

Это не слишком поможет с объектами Cake, если вы сначала не создадите экземпляры объектов Cake.Если вы хотите использовать помощник html, вам, вероятно, захочется выяснить, как создается экземпляр первого объекта Cake, а затем имитировать это в своих CSS-материалах.Не знаю точно, как бы я это сделал - я думаю, что иметь целый CSSController было бы излишним, но я думаю, что вам, возможно, придется создать экземпляр контроллера приложения (в конце концов, вы хотите, чтобы переписанный URL-адрес CSS отражал настройки вашего приложения, верно? ).Так что, я думаю, вам все равно придется создать CSSController.

Целая группа экспертов по cakephp, вероятно, возненавидит меня за это предложение.:)

Самым простым решением для меня было просто включить файл изображения в папку css.Что-то вроде этого

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

Итак, в файл CSS я бы просто вставил:

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

Плохо то, что это, очевидно, не самый плохой поступок.Хорошо, что это будет работать независимо от того, используете ли вы необычный URL-адрес или нет, поскольку css находит изображение относительно файла css.

Я обнаружил, что относительные URL-адреса в CSS разваливаются при встраивании CSS в помощник для CakePHP.Это связано с тем, что маршрутизатор может сопоставлять разные URL-адреса с одной и той же страницей, поэтому относительный URL-адрес должен быть другим.Например, если у вас есть URL-адрес типа localhost/myapp/parts/index или localhost/myapp/parts/ или localhost/myapp/parts, то относительный URL-адрес ../img/image.gif будет работать только для одного из них.

В моем помощнике единственный способ обойти это - сделать мой CSS таким

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

}

а затем замените тег сгенерированным URL-адресом в коде перед выводом 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>";

Если есть более простой способ сделать это, я был бы признателен за комментарий.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top