2

複数のテーマが必要な Web サイトがあります。

したがって、www.mysite.com/Client1/ は赤いボタンを使用し、www.mysite.com/Client2/ は青いボタンを使用します。クライアントの数は DB に動的に保存され、色も DB に保存されます。お客様でいつでも変更可能です。

現在、Twitter Bootstrap LESS ファイルと ASP MVC 最適化 (バンドル) を使用しています。

私の App_Start BundleConfig は次のようになります。

var cssTransformer = new CssTransformer();
var stylesBundle = new StyleBundle("~/Content/bootstrap");
  .Include("~/Content/less/bootstrap.less")
stylesBundle.Transforms.Add(cssTransformer);
bundles.Add(stylesBundle);

variables.less で

@btnPrimaryBackground:              @linkColor;

異なる URL が呼び出されると、@btnPrimaryBackground の色が変わるはずです。

less 変数を別のソース (データベースなど) からのパラメーターを使用するように変更するにはどうすればよいですか?

4

1 に答える 1

4

Web 最適化は動的 dontent ではうまく機能しないため、使用しないことにしました。

代わりに、LESS 用の ASP MVC ActionResult を作成し、それを参照しています。

<link rel="stylesheet" type="text/css" href="@Url.Action("Styles", "Theme")">

私の ASP MVC コントローラーは次のようになります。

public class ThemeController : Controller
{

    public ActionResult Styles()
    {
        var parameters = new Dictionary<string, string>
            {
                {"themeColor1", "Get theme color 1 here"},
                {"themeColor2", "Get theme color 2 here"}
            };

        var themeLessFilePath = Server.MapPath("~/Content/less/theme.less");
        using (var stream = System.IO.File.OpenRead(themeLessFilePath))
        {
            return new DotLessResult(stream, parameters, true);
        }
    }
}

LESS ActionResult は次のようになります。

public class DotLessResult : ActionResult
{
    public IDictionary<string, string> Parameters { get; set; }
    public string Less { get; set; }
    public bool Minify { get; set; }

    public DotLessResult(string less, IDictionary<string, string> parameters = null, bool minify = false)
    {
        Less = less;
        Parameters = parameters ?? new Dictionary<string, string>();
        Minify = minify;
    }

    public DotLessResult(Stream stream, IDictionary<string, string> parameters = null, bool minify = false)
        : this(new StreamReader(stream).ReadToEnd(), parameters, minify) { }

    public override void ExecuteResult(ControllerContext context)
    {
        var output = Less;
        //TODO: Not the way to do this! 

        foreach (var key in Parameters.Keys)
        {
            output = Regex.Replace(output, @"@" + key + @":\s*\S+;", "@" + key + ":" + Parameters[key] + ";");
        }
        var lessEngine = dotless.Core.LessWeb.GetEngine(new DotlessConfiguration { MinifyOutput = Minify, MapPathsToWeb = true, Web = true, CacheEnabled = false});

        var css = lessEngine.TransformToCss(output, (string)null);

        context.HttpContext.Response.ContentType = "text/css";
        using (var writer = new StreamWriter(context.HttpContext.Response.OutputStream, Encoding.UTF8))
        {
            writer.Write(css);
            writer.Flush();
        }
    }
}

これは最善の解決策ではありませんが、私のマシン TM で動作します。

なんらかの出力キャッシュを実装することを忘れないでください。これは、頻繁に変更されることがほとんどなく、頻繁に変更されることがないためです。

于 2013-05-24T20:10:37.360 に答える