動的なCSSとJavascript
-
07-07-2019 - |
質問
動的なCSSとJavaScript On-The-Fly(PHPを使用)を作成する方法。 ページごとに要素のセットが異なる場合があるため、これを行う必要があります。そのため、毎回大きなCSS / JSをラップして送信するのはやり過ぎです。 そして、なぜ多くのサイトが次のようなリンクタグを持っているのですか:
<link rel='stylesheet' type='text/css' href='css/style.css?pg_id=43&post=62'>
CSSはどのようにしてGETパラメーターを認識するようになりますか?
これにはURLの書き換えやヘッダー機能の使用が含まれる場合があるため、短い例を提供してください
解決
したがって、ここで実行できるいくつかの異なるアプローチがあります。まず、Apacheの仮想ホストファイルにアクセスできる場合は、PHPインタープリターによって読み取られるようにCSSを設定できます。私はこれをやったことがないので、正確にお勧めしませんが、例は次のとおりです。
<VirtualHost *:80>
AddType application/x-httpd-php .css
</VirtualHost>
これは.htaccessファイルでも実行できます。
代わりに、次のようなリンクを作成できます
<link rel='stylesheet' type='text/css' href='css/style.php?pg_id=43&post=62'>
and put
<?php header("Content-type: text/css"); ?>
最初の行として。
私はヴィニシウスのテクニックを考えたことは一度もありませんが、それには独自の長所と短所があります。
PS-GET変数はキャッシングの目的で使用される場合があります(または実際に現在のUNIXタイムスタンプをphpのようなCSSリンクに追加することでキャッシングを防止するために
<link href="style.css?<?php echo time()" type="text/css" rel="stylesheet" />
他のヒント
.cssまたは.jsファイルへのリクエストは、たとえば.htaccess(Apache内)を使用してPHPスクリプトにリダイレクトできるため、src属性が&quot; style.css&quot;であっても、実際にはユーザーに応答しているPHPスクリプト。
CSSファイルとJavascriptファイルはキャッシュされます。サイズが200 KB以上でない限り、異なるスタイルシート/ jsファイルを提供することはお勧めしません。
そして、はい、ファイルの正しいContent-Typeを返す限り、パラメーター(.phpまたは任意の拡張子)でサーバー側のページを参照できます。
補足:通常、パラメータがあり、この方法でファイルを動的に提供している場合、そうするように設定しない限り、自動的にキャッシュされないと思います。
簡単な例:
<link rel="stylesheet" type="text/css" href="/css.php?color=wide-red">
<?php
header('Content-Type', 'text/css; charset=utf-8');
$colorScheme = (string) CSSファイルとJavascriptファイルはキャッシュされます。サイズが200 KB以上でない限り、異なるスタイルシート/ jsファイルを提供することはお勧めしません。
そして、はい、ファイルの正しいContent-Typeを返す限り、パラメーター(.phpまたは任意の拡張子)でサーバー側のページを参照できます。
補足:通常、パラメータがあり、この方法でファイルを動的に提供している場合、そうするように設定しない限り、自動的にキャッシュされないと思います。
簡単な例:
<*>
エコーを使用でき、テンプレートシステムを使用でき、file_get_contentsを使用して他のcssファイルをプルできます。重要なことは、適切なContent-Typeを送信し、適切なパラメーターを取得し、パラメーターがない場合はデフォルトのフォールバックを使用する必要があることです与えられます。
GET['color'];
switch ( $colorScheme ) {
case 'wide-red':
$bgColor = 'c0c0c0';
$fgColor = 'ffffff';
$width = '1280px';
break;
case 'normal-gray':
$bgColor = '333333';
$fgColor = 'ffffff';
$width = '960px';
}
break;
}
?>
body {
background:<?php echo $bgColor;?>;
color:<?php echo $fgColor;?>;
width:<?php echo $width;?>;
}
エコーを使用でき、テンプレートシステムを使用でき、file_get_contentsを使用して他のcssファイルをプルできます。重要なことは、適切なContent-Typeを送信し、適切なパラメーターを取得し、パラメーターがない場合はデフォルトのフォールバックを使用する必要があることです与えられます。