我正在使用基于主题定义等设置的主题构建器的多租户应用程序。
我将这种方法http://bundletransformer-theme-builder.azurewebsites.net/用于引导程序3。但是,由于我们已升级到Bootstrap 4,因此它现在位于.scss
中。
因此,我在项目中实施Bootstrap 4的方法是添加以下内容:
主题/主题variables.scss
/*
* Application global variables.
*/
$orcid-color : #96D72F;
$primary-color: #1c223d;
@import "../bootstrap/_functions.scss";
@import "../bootstrap/_variables.scss";
主题/ theme.scss
/*
* Global application theme.
*/
@import "theme-variables";
html,
body {
height: 100%;
}
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
// ...
main.scss
/*
* Entry point of global application style.
*/
// Theme variables, must be included before the libraries to allow overriding defaults
@import "theme/theme-variables";
// 3rd party libraries
@import "bootstrap/bootstrap.scss";
// Theme customization
@import "theme/theme";
现在在[[BundleConfig中定义如下
public class BundleConfig
{
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new CustomStyleBundle("~/bundles/styles")
.Include("~/Contents/main.scss"));
}
}
然后创建以下代码。
[Route("bundles/themes/{id}"), AllowAnonymous] public ContentResult Themes(int id) { var id = 1; var institutionPath = string.Format("~/bundles/themes/{0}", id); if (BundleTable.Bundles.All(x => x.Path != institutionPath)) { var themeStyles = new CustomStyleBundle(institutionPath) .Include("~/Contents/main.scss", new InjectContentItemTransform($"$primary-color: red;")); BundleTable.Bundles.Add(themeStyles); } return null; } public sealed class InjectContentItemTransform : IItemTransform { private readonly string _content; public InjectContentItemTransform(string content) { _content = content; } public string Process(string includedVirtualPath, string input) { if (!_content.HasValue()) { return input; } var builder = new StringBuilder(); builder.Append(_content); return builder.ToString(); } }
然后在主布局中...
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="shortcut icon" href="~/favicon.ico"> @Styles.Render(string.Format("~/bundles/themes/{0}", 1)) @Styles.Render("~/bundles/styles") <title>@ViewBag.Title</title> </head> <body class="body"> <!-- //.... --> </body> </html>
添加变量或覆盖变量以应用颜色等值的正确方法是什么?
首先,您应该从theme/theme-variables.scss
文件中删除变量定义:
/*
* Application global variables.
*/
$orcid-color : #96D72F;
//$primary-color: #1c223d;
@import "../bootstrap/_functions.scss";
@import "../bootstrap/_variables.scss";
您的InjectContentItemTransform
类的实现包含一个错误:绑定内容中始终仅包含变量定义。这是正确的实现:
public sealed class InjectContentItemTransform : IItemTransform { private readonly string _content; public InjectContentItemTransform(string content) { _content = content; } public string Process(string includedVirtualPath, string input) { if (!_content.HasValue()) { return input; } var builder = new StringBuilder(); builder.AppendLine(_content); builder.Append(input); return builder.ToString(); } }
要在调试模式下应用项目转换,必须注册自定义包解析器:
… using BundleTransformer.Core.Resolvers; … public class BundleConfig { public static void RegisterBundles(BundleCollection bundles) { BundleResolver.Current = new CustomBundleResolver(); … } }
[创建多租户Web应用程序的许多开发人员必须编写自己的System.Web.Optimization.IBundleCache
接口,System.Web.Hosting.VirtualPathProvider
类的实现以及自己的BundleTransformer.SassAndScss.HttpHandlers.SassAndScssAssetHandler
类的版本,并使用重写的GetCacheKey
方法。我建议您熟悉SmartStore.NET项目的源代码。