( c ). less 生成器用户界面( 第 4部分/Generate,自定义 bootstrap.css )

分享于 

10分钟阅读

Web开发

  繁體

介绍

我们在 Bootstrap 颜色选取器UI的第4 部分。 在本系列中,我们将向用户提供一种下载他们创建的CSS文件的。

我们将利用几种技术,这些技术对自己也很有用。 我们要使用的第一件事是Dotless库。 转换 LESS 文件。

如果你已经遵循了前一系列,你将不得不了解我们切换到. NET C#的事实。

文章索引

DotlessClientOnly nuGet

我已经安装了 DotlessClientOnly nuGet软件包。 这很重要因为它将改变整个包。因为在每次请求阻止我们的UI时,它会转换你的插件,从而减少了。

FileContentResult操作

在主控制器中,我们将添加一个动作 GetCss。 我们会把它做成 FileContentResult 型的。 主控制器位于"。控制器/homecontroller。cs"路径。

public FileContentResult GetCss()
{
 var contentType = "text/css";
 var content = "body { background-color : #fff; }";
 var bytes = Encoding.UTF8.GetBytes(content);
 var result = new FileContentResult(bytes, contentType);
 return result;
}

如果我们运行站点并转到 /getCSS,则应得到以下输出:

body { background-color: #fff; }

解析 bootstrap.less 文件

首先,我们将忽略用户通过UI创建的变量。 我们将会很高兴,如果它解析 bootstrap.less的文件,因为它是默认的。

让我们使用 Dotless 类:

public FileContentResult GetCss()
{
 //Set the content typevar contentType = "text/css";
 //Get the bootstrap.less contentsvar bootstrapLessContent = System.IO.File.ReadAllText(
 HostingEnvironment.MapPath("~/Content/bootstrap/bootstrap.less")
 );
 //Create a Dotless Configurationvar config = new DotlessConfiguration();
 config.MinifyOutput = false;
 config.ImportAllFilesAsLess = true;
 config.CacheEnabled = false;
 //Parse the. less filevar content = Less.Parse(
 bootstrapLessContent
, config);
 var bytes = Encoding.UTF8.GetBytes(content);
 var result = new FileContentResult(bytes, contentType);
 return result;
}
测试

如果你已经解析了所有的引用,那么应该可以。 但是如果我们运行,它将引发异常:

这是因为在中,导入到其他文件的导入没有经过路径。 所以 Dotless 类不知道如何找到它们。

IFileReader

幸运的是,Dotless 库为我们提供了一个解决方案。 我们来决定它是如何找到文件的。 这是通过实现 IFileReader 接口实现的。 这很好,因为我们以后可以利用它来交换我们自己的变量。

但是首先,我们将尝试只输出标准的 。css。

我们需要创建一个类。 我在子文件夹类中做了这个,我把它命名为 VirtualFileReader。 类应该如下所示:

internalsealedclass VirtualFileReader: IFileReader
 {
 public byte[] GetBinaryFileContents(string fileName)
 {
 fileName = GetFullPath(fileName);
 return File.ReadAllBytes(fileName);
 }
 publicstring GetFileContents(string fileName)
 {
 fileName = GetFullPath(fileName);
 return File.ReadAllText(fileName);
 }
 publicbool DoesFileExist(string fileName)
 {
 fileName = GetFullPath(fileName);
 return File.Exists(fileName);
 }
 privatestaticstring GetFullPath(string path)
 {
 return HostingEnvironment.MapPath("~/Content/bootstrap/" + path);
 }
 publicbool UseCacheDependencies
 {
 get { returntrue; }
 }
 }

接下来,我们需要 DotlessConfiguration 来使用这个类。 因此在 GetCss 操作中,将这一行添加到 config

config.LessSource = typeof(VirtualFileReader);
测试

运行站点并转到路径:

/home/getcss

现在我们应该得到一个经过编译的CSS file:

/*! normalize.css v3.0.2 | MIT License | git.io/normalize */html {
 font-family: sans-serif;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;}body {
 margin: 0;}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,
...... andsoon...

保存我们的变量

在本节中,我们将跳回到 JavaScript,将变量发送到服务器。 但是首先,我们将在主控制器中执行另一个操作,将它们存储在 Session 变量中。

[HttpPost]public EmptyResult SendVariables()
{
 Stream req = Request.InputStream;
 req.Seek(0, System.IO.SeekOrigin.Begin);
 string variables = new StreamReader(req).ReadToEnd();
 HttpContext.Session["variables.less"] = variables;
 returnnew EmptyResult();
}

现在,我们需要跳回到 JavaScript。 基本上,我们将创建一个函数,从我们的viewModel 中重写 variables.less 文件。

所以在我们的main.js 中,我们将创建一个 sendVariables 函数,它将遍历类别,它们的变量和重写的variables.less 文件。

但是首先我们要添加一些其他的东西。 在 _Layout.cshtml 文件中,向主菜单栏添加操作链接。 就像这样:

<divclass="navbar-collapse collapse"><ulclass="nav navbar-nav"><li>@Html.ActionLink("Home","Index","Home")</li><li>@Html.ActionLink("Elements","Elements","Home")</li><li>@Html.ActionLink("Contact","Contact","Home")</li><li><ahref="#"data-bind="click: sendAndReturnVariablesFile">Get the css</a></li></ul> @Html.Partial("_LoginPartial")</div>

我们希望用户将这里文件作为下载。 通过Ajax是不可能的,将它们发送到空白页面是不可接受的。 所以我们要设置一个不可见的iframe。

<iframeid="file-download"class="hidden"></iframe>

这可能在页面的任何地方。 但是在 body 结束标记的底部似乎是最好的地方。

我们刚刚创建了绑定 sendAndReturnVariables,所以我们需要将它添加到 viewModel

/**
 * Recreates variables.less and sends it to the server
 * @function sendVariablesFile
 */sendAndReturnVariablesFile: function () {
 var model = ko.toJS(viewModel),
 lessFileString = "",
 i, j, prop;
 //Recreate the variables.less contentfor (prop in model.categories) {
 var category = model.categories[prop];
 lessFileString += "//==" + prop + 'n';
 for (i = 0, j = category.variables.length; i <j; i++) {
 var varName = category.variables[i];
 lessFileString += varName + ":" + model.variables[varName].value + ";n";
 }
 }
 //Send it to the server $.ajax({
 url: "/Home/SendVariables",
 type: "POST",
 data: lessFileString,
 success: function () {
 //Set the iframe src to the css $("#file-download").attr("src", "/Home/GetCss");
 }
 });

现在,我们需要在 homeControllerGetCss 操作中添加一行。

var bytes = Encoding.UTF8.GetBytes(content);var result = new FileContentResult(bytes, contentType);
result.FileDownloadName = "bootstrap-custom.css";return result;

交换我们的变量

所以现在我们需要执行最后一步。 记住 VirtualFileReader它有一个函数 GetFileContents,我们将从 Session 中返回保存的变量。

publicstring GetFileContents(string fileName)
{
 if (fileName == "variables.less")
 {
 var variables = HttpContext.Current.Session["variables.less"];
 return (string)variables;
 }
 else {
 fileName = GetFullPath(fileName);
 return File.ReadAllText(fileName);
 }
}

结束( 暂时)

我写文章已经有一段时间了,但我很遗憾。 我在创建这个系列时有很多乐趣,我已经足够了解我的实际产品了。 我希望有人会喜欢我的工作。

我可能会在这个例子中创建更多的文章。 我可以想到一些我们可以做的事情。 用户可以创建一个帐户,让他们在数据库中存储多个版本。

然后我们可以把整个东西存储在Azure中。 或者将的文件发布到 Azure。

但在第四部分的最后,我觉得这是一个很好的成品。


PAR  BOO  引导  Generator  Bootstrap  LESS  
相关文章