为动态主题创建ThemeBuilder

问题描述 投票:0回答:1

我正在使用基于主题定义等设置的主题构建器的多租户应用程序。

我将这种方法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>

添加变量或覆盖变量以应用颜色等值的正确方法是什么?
c# system.web.optimization bundletransformer
1个回答
0
投票
与LESS不同,Sass不支持变量值的修改,因此通过使用项转换,我们只能定义变量。

首先,您应该从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项目的源代码。
© www.soinside.com 2019 - 2024. All rights reserved.