13

Web フォーム アプリケーションにdotnetless ( http://www.dotlesscss.org/ ) を使用していますが、うまく機能します。asp.net色、フォントサイズなどに変数を使用するのが好きですが、私が見る限り、変数の値は静的です。

ユーザーIDに応じてデータベースからこれらの変数値を初期化するためにdotnetlessを使用する方法はありますか?

基本的に、このWebアプリケーションをテーマベースのWebサイトに変換したいので、各ユーザーは独自の色、フォント、フォントサイズなどを選択できます.

どんな方向性でも大歓迎です。

4

5 に答える 5

6

それは間違いなく可能ですが、残念ながら LESS 自体からデータベースにクエリを実行することはできないため、基本的に、必要な変数値を使用してユーザーの LESS ファイルを作成し、それをロードする必要があります。

ここで別の回答の例を見つけることができます: https://stackoverflow.com/a/11628325/2330244

于 2013-06-03T14:24:40.837 に答える
5

必要なルックアップを実行する関数を備えたカスタム .LESS プラグインを作成してみませんか?

以下のコードは、示されているようにテストされました。実際に DB 内のデータを検索するわけではありませんが、そのために必要なすべての情報を利用できるはずです。Web サイトで Windows 認証モードを実行しているときに、現在のユーザーを .xml から取得できることを確認しましたHttpContext.Current.User.Identity.Name。

以下の関数を使用するには、less ファイルに次のように入力します。

--lookup using custom function (hit db)
@brand_color:getCustomColor(usersThemeAttribute);

--then use the variable like normal
color: @brand_color;

コード

[DisplayName("UserProfilePlugin")]
public class UserProfilePlugin : IFunctionPlugin
{
    public Dictionary<string, Type> GetFunctions()
    {
        return new Dictionary<string, Type> 
        {
            { "getCustomColor", typeof(GetCustomColorFunction) }
        };
    }
}

public class GetCustomColorFunction : Function
{
    protected override Node Evaluate(Env env)
    {
        Guard.ExpectNumArguments(1, Arguments.Count(), this, Location);
        Guard.ExpectNode<Keyword>(Arguments[0], this, Arguments[0].Location);
        //the idea is that you would have many colors in a theme, this would be the name for a given color like 'bgColor', or 'foreColor'
        var colorAttrName = Arguments[0] as Keyword;

        //Lookup username
        // string username = HttpContext.Current.User.Identity.Name;

        //perform some kind of DB lookup using the username, get user theme info
        // UserProfile up = new UserProfile();
        // System.Drawing.Color c = up.GetColorByAttribute(colorAttrName.Value);
        //return the appropriate color using RGB/etc...
        // return new Color(c.R, c.G, c.B);
        return new Color(129, 129, 129);
    }
}

プラグインを登録するには、これを web.config に追加します。

<dotless cache="false" >
    <plugin name="UserProfilePlugin" assembly="Your.Assebly.Name" />
</dotless>

ユーザーが行った変更がすぐに有効になるように、dotless のキャッシュを無効にすることを検討してください。

リンク: https://github.com/dotless/dotless/wiki/FunctionPlugins

于 2013-06-07T19:27:48.343 に答える
5

それがあなたがたどりたい道なら、IHttpHandlerを作成してドットレスのLessCssHttpHandlerを置き換える必要があると思います。このハンドラーは、基本的に LessCssHttpHandler と同じアクションを実行しますが、css にコンパイルする前にデータベース変数を less に挿入します。

dotless を使用してより少ない翻訳を行うBundle Transformer LESS プロジェクトを見ることができます。また、自分のベースとなる IHttpHandler もあります。

他の人が述べているように、これは最善の行動ではないかもしれません

編集: Handler の基本的な開始点

public class LessHandler : IHttpHandler
{
    public void ProcessRequest(HttpContext context)
    {
        var request = context.Request;
        var response = context.Response;
        var user = context.User;

        string assetUrl = request.Url.LocalPath;
        string assetPath = context.Server.MapPath(assetUrl);

        //load less file into the data.
        var data = "";
        using (var file = new StreamReader(assetPath))
        {
            data = file.ReadToEnd();
        }

        DotlessConfiguration lessEngineConfig = DotlessConfiguration.GetDefault();
        lessEngineConfig.MapPathsToWeb = false;
        lessEngineConfig.CacheEnabled = false;
        lessEngineConfig.DisableUrlRewriting = false;
        lessEngineConfig.Web = false;
        lessEngineConfig.MinifyOutput = true;
        lessEngineConfig.LessSource = typeof(VirtualFileReader);
        var lessEngineFactory = new EngineFactory(lessEngineConfig);
        ILessEngine lessEngine = lessEngineFactory.GetEngine();

        string vars = "";
        //TODO set default for vars
        if (user != null)
        {
            //TODO get vars for user
        }

        var content = lessEngine.TransformToCss(string.Format("{0}{1}", vars, data), null);

        // Output text content of asset
        response.ContentType = "text/css";
        response.Write(content);
        response.End();
    }

    public bool IsReusable
    {
        get { return true; }
    }
}
于 2013-06-06T15:35:09.157 に答える
2

最も簡単な解決策は、おそらく Web ページに LESS コードをインライン化することです: (ここで説明されているように)

<html>
  <head>
    <style type="text/less">
      // DB and user-dependent code here
    </style>
  </head>
  ...
</html>

このようにして、Web ページをカスタマイズするのと同じように、LESS スタイルシートをカスタマイズできます。

dotless でコンパイルされた CSS を使用する場合は、カスタマイズしたスタイルシートを dotless パーサーに渡すことができます。

Less.Parse(".foo { font-size: <user-dependent-value>;}")

次に、コンパイルされた CSS 出力を Web ページに直接含める必要があります。

<html>
  <head>
    <style type="text/css">
      // result of Less.Parse(...)
    </style>
  </head>
  ...
</html>
于 2013-06-05T14:21:47.830 に答える
1

それは、あなたが持っているテーマの数によって異なります。数が限られている場合は、事前にコンパイルされた .less テーマの 1 つにユーザーをマップすることが (パフォーマンスと複雑さの両方の点で) 最適です。

ただし、各ユーザーがテーマをカスタマイズして多くの (または無制限の) テーマを作成できるようにしている場合は、テーマが変更されたときに .less (または CSS) ファイルを作成、コンパイル、最適化して保存することをお勧めします。結果。ページが読み込まれるたびに、ユーザーが新しいテーマを選択するまで、そのテーマ ファイルを参照します。最良の場合、ユーザーのシステムに長期間キャッシュされたままになります。

少量のカスタマイズされた LESS/CSS でない限り、インライン CSS ルートは避けます。すべてのページのファイル サイズ/帯域幅が増加するため、モバイルでの読み込みが遅くなります。代わりに、最近のASP.NET Web.Optimizationバンドルを使用して、テーマの変更時に LESS -> CSS を構築、コンパイル、および最適化し、結果をキャッシュします。

そのため、ページの読み込み時に、ほとんどのページは、データベースに保存されている既存のカスタム ページ テーマを参照します。テーマを変更すると、完全な less -> css プロセスが実行されます。

于 2013-06-06T14:21:41.987 に答える