Как использовать параметры в Twitter Bootstrap, динамически загружаемые из базы данных

У меня есть веб-сайт, на котором мне нужно несколько тем.

Таким образом, 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);

В переменных.less

@btnPrimaryBackground:              @linkColor;

Цвет @btnPrimaryBackground должен меняться при вызове разных URL-адресов.

Как изменить переменную less, чтобы использовать параметр из другого источника (базы данных или другого)?


css twitter-bootstrap asp.net-mvc less
person Morten Lyhr    schedule 22.05.2013    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Поскольку веб-оптимизация плохо сочетается с динамическим донентом, я решил не использовать ее.

Вместо этого я сделал ASP MVC ActionResult для LESS и сослался на него.

<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);
        }
    }
}

И МЕНЬШЕ 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.

Не забудьте реализовать какое-то кеширование вывода, так как оно будет часто использоваться, а не меняться очень часто.

person Morten Lyhr    schedule 24.05.2013