0

キックストラップを使用してブートストラップ アプリのテーマを設定しています。クライアントは、ユーザーがその場でテーマを変更できるようにしたいと考えています。テーマを変更するには、themes.less ファイルのディレクトリを変更するだけでよいことはわかっていますが、これについて最善の方法がわかりません。また、ユーザーのテーマ設定を覚えておきたいので、これを行うために Cookie を保存する必要がありますが、Cookie を直接 LESS に変数として読み込むことができるかどうかは完全にはわかりません。

基本的に、ユーザーがリストからテーマを選択できるドロップダウン メニューが欲しいだけです。

どんな提案も素晴らしいでしょう！ありがとう！

4

2 に答える 2

0

サーバー側のフレームワークではなく、プレーンなHTML / CSS / JavaScriptを使用していると仮定すると、これを行うにはいくつかの方法があります。1つは、実際にLESSソースコードを変更することですが、もっと簡単な方法をいくつか紹介します。

theme.lessを空白のままにしておくと、デフォルトのBootstrapテーマが表示されます。

次に、Kickstrapテーマを次のように別の行にロードできます。

<link rel="stylesheet/less" type="text/css" href="kickstrap.less" />
<link rel="stylesheet/less" type="text/css" href="mytheme.less" />
<script src="less.js"></script>

2つのテーマファイル

もちろん、テーマに2つのファイルが含まれている場合がvariable.lessあります。これらのファイルは、bootswatch.less別々に保持すると機能しない場合があります。

<link rel="stylesheet/less" type="text/css" href="kickstrap.less" />
<link rel="stylesheet/less" type="text/css" href="variables.less" />
<link rel="stylesheet/less" type="text/css" href="bootswatch.less" />
<script src="less.js"></script>

したがって、代わりに@import、variables.lessファイルをに入れることができますbootswatch.less。

@import "variables.less";

次に、上記の元の例を使用します。

<link rel="stylesheet/less" type="text/css" href="kickstrap.less" />
<link rel="stylesheet/less" type="text/css" href="bootswatch.less" />
<script src="less.js"></script>

ちなみに、LESSをクライアント側で使用していなくても、心配はいりません。代わりに、それぞれにコンパイルされたCSSファイルを使用してください。

<link rel="stylesheet/less" type="text/css" href="css/kickstrap.css" />
<link rel="stylesheet/less" type="text/css" href="css/bootswatch.css" />

DOMへの書き込み

DOMでこれを変更する限り、cssIfy()すでににある関数を利用してみkickstrap.jsます。これは文字列（.cssファイル名）を取り、それをスタイルシートとしてDOMに書き込みます。.lessファイルとして書き込む必要がある場合は、おそらくこの関数を簡単に操作できます。多分このようなもの：

function lessIfy(filePath) {
  var linkElement = document.createElement("link");
  linkElement.setAttribute("rel", "stylesheet/less");
  linkElement.setAttribute("type", "text/css");
  linkElement.setAttribute("href", filePath);
  document.getElementsByTagName('body')[0].appendChild(linkElement);
}

この方法で行う場合は、後でless.jsロードすることを確認する必要があるため、その前に追加するか、（さらに悪いことに）後でless.jsを再度ロードしてみてください。

于 2012-10-14T19:52:03.317 に答える
0

「含まれるテーマ」オプションを選択すると、テーマがどのように変化するかを見てみましょう。

于 2014-01-22T05:59:15.277 に答える