2

我有一个需要多个主题的网站。

所以 www.mysite.com/Client1/ 使用红色按钮， www.mysite.com/Client2/ 使用蓝色按钮。客户端的数量是动态存储在数据库中的，颜色也存储在数据库中。客户可随时更改。

目前我正在使用 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

由于网页优化不能很好地配合动态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 回答