URL は CakePHP の CSS ファイル内でどのように処理され、正しい場所を参照するのでしょうか?

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

質問

私は CSS ファイルをよく使用して Web サイトをデザインしていますが、背景画像やリスト内の箇条書きの画像が何度か出現するため、おそらく CSS がまた必要になるでしょう。 url() 関数。

ただし、cake ではすべての 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 を作成したりする必要はありません。

Cake アプリが仮想ホスト DocumentRoot にインストールされている場合は、画像へのすべてのパスを Webroot からの絶対パスにするだけです。例えば

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 が提案した解決策を選びます。画像を 2 つの異なる場所に置きたくない場合は、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

また、以下も参照してください。 http://www.webmasterworld.com/forum88/5648.htm

最初に Cake オブジェクトをインスタンス化しない限り、これは Cake に関してはあまり役に立ちません。HTML ヘルパーを使用したい場合は、最初の Cake オブジェクトがどのようにインスタンス化されるかを理解して、それを 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 はそのうちの 1 つに対してのみ機能します。

私のヘルパーでそれを回避する唯一の方法は、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;

}

次に、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>";

これを行うより簡単な方法がある場合は、コメントをいただければ幸いです。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top