Blazor theme style customization #5194

6 答案

• 

  0

  liangshiwei 创建 去年

  支持团队 Fullstack Developer

  Hi,

  Are you using Blazor WASM or Blazor Server?

  保存 取消
• 

  0

  it@keystonecustomhome.com 创建 去年

  that was Blazor server, but were switching to Blazor WASM. get back to you if it's still an issue. Thank you

  保存 取消
• 

  0

  liangshiwei 创建 去年

  支持团队 Fullstack Developer

  ok

  保存 取消
• 

  0

  it@keystonecustomhome.com 创建 去年

  actually this is an issue with either Blazor server or assembly. exact same issue

  Severity Code Description Project File Line Suppression State Error Conflicting assets with the same target path '_content/Volo.Abp.AspNetCore.Components.Web.LeptonXTheme/side-menu/css/abp-bundle.css'. For assets 'Identity: C:\Users\mel.nuget\packages\volo.abp.aspnetcore.components.web.leptonxtheme\2.1.1\staticwebassets\side-menu\css\abp-bundle.css, SourceType: Package, SourceId: Volo.Abp.AspNetCore.Components.Web.LeptonXTheme, ContentRoot: C:\Users\mel.nuget\packages\volo.abp.aspnetcore.components.web.leptonxtheme\2.1.1\staticwebassets, BasePath: _content/Volo.Abp.AspNetCore.Components.Web.LeptonXTheme, RelativePath: side-menu/css/abp-bundle.css, AssetKind: All, AssetMode: All, AssetRole: Primary, RelatedAsset: , AssetTraitName: , AssetTraitValue: , CopyToOutputDirectory: Never, CopyToPublishDirectory: PreserveNewest, OriginalItemSpec: C:\Users\mel.nuget\packages\volo.abp.aspnetcore.components.web.leptonxtheme\2.1.1\staticwebassets\side-menu\css\abp-bundle.css' and 'Identity: T:\blazor\src\KeyChoices.Blazor\wwwroot_content\Volo.Abp.AspNetCore.Components.Web.LeptonXTheme\side-menu\css\abp-bundle.css, SourceType: Discovered, SourceId: KeyChoices.Blazor, ContentRoot: T:\blazor\src\KeyChoices.Blazor\wwwroot, BasePath: /, RelativePath: _content/Volo.Abp.AspNetCore.Components.Web.LeptonXTheme/side-menu/css/abp-bundle.css, AssetKind: All, AssetMode: All, AssetRole: Primary, RelatedAsset: , AssetTraitName: , AssetTraitValue: , CopyToOutputDirectory: Never, CopyToPublishDirectory: PreserveNewest, OriginalItemSpec: wwwroot_content\Volo.Abp.AspNetCore.Components.Web.LeptonXTheme\side-menu\css\abp-bundle.css' from different projects. KeyChoices.Blazor C:\Program Files\dotnet\sdk\7.0.302\Sdks\Microsoft.NET.Sdk.Razor\targets\Microsoft.NET.Sdk.Razor.StaticWebAssets.targets 391

  

  保存 取消
• 

  0

  liangshiwei 创建 去年

  支持团队 Fullstack Developer

  ok, I will check it.

  保存 取消
• 

  0

  liangshiwei 创建 去年

  支持团队 Fullstack Developer

  Hi,

  This is the design of Blazor: https://learn.microsoft.com/en-us/dotnet/core/compatibility/aspnet-core/5.0/blazor-static-web-assets-validation-logic-updated

  You can try this:

  wwwroot/scripts/leptonx-blazor-compatibility.js

  window.afterLeptonXInitialization = function () {
  
      var isRtl = JSON.parse(localStorage.getItem("Abp.IsRtl"));
      var direction = isRtl ? "rtl" : "ltr";
  
      replaceStyleWith(
          createStyleUrl('layout-bundle', direction),
          `lpx-layout-bundle-style-${direction}`,
          `lpx-layout-bundle-style-${direction === 'rtl' ? 'ltr' : 'rtl'}`
      );
      replaceStyleWith(
          createStyleUrl('abp-bundle', direction),
          `lpx-abp-bundle-style-${direction}`,
          `lpx-abp-bundle-style-${direction === 'rtl' ? 'ltr' : 'rtl'}`
      );
      replaceStyleWith(
          createStyleUrl('blazor-bundle', direction),
          `lpx-blazor-bundle-style-${direction}`,
          `lpx-blazor-bundle-style-${direction === 'rtl' ? 'ltr' : 'rtl'}`
      );
      replaceStyleWith(
          createStyleUrl('font-bundle', direction),
          `lpx-font-bundle-style-${direction}`,
          `lpx-font-bundle-style-${direction === 'rtl' ? 'ltr' : 'rtl'}`
      );
  
  
      function createStyleUrl(theme, direction = 'ltr') {
          const styleName = direction === 'rtl' ? `${theme}.rtl` : theme;
          return `${window.currentLayout}/css/${styleName}.css`
      }
  
      function createId(theme, type) {
          return theme && `lpx-theme-${type}-${theme}`;
      }
  
      function replaceStyleWith(path, id, previousId) {
          const link = document.createElement('link');
          link.href = path;
          link.type = 'text/css';
          link.rel = 'stylesheet';
          link.id = id;
          const prevElem = document.querySelector(`#${previousId}`);
          document.getElementsByTagName('head')[0].appendChild(link);
          if (previousId) {
              prevElem?.remove();
          }
          return link;
      }
  
      function loadThemeCSS(key, theme, themeOld, cssPrefix, direction = 'ltr') {
          const themeId = createId(theme, key);
          const previousThemeId = createId(themeOld, key);
  
          replaceStyleWith(createStyleUrl(cssPrefix + theme, direction), themeId, previousThemeId);
      }
  };
  
  (function () {
  
      (function(history){
          var pushState = history.pushState;
          history.pushState = function(state) {
              if (typeof history.onpushstate == "function") {
                  history.onpushstate({state: state});
              }
              setTimeout(function(){
                  var scrollBar = leptonx.init.perfectScrollbarInstances[0];
                  if(scrollBar)
                  {
                      scrollBar.element.scrollTop = 0;
                  }
  
                  leptonx.mobileNavbar.closeMenu();
              }, 100);
  
              return pushState.apply(history, arguments);
          };
      })(window.history);
  
      function isAlreadyLoaded(id) {
          return document.querySelector(`link[id^="lpx-theme-${id}-"]`)?.id;
      }
  
      function loadThemeCSS(key, event, cssPrefix) {
          const newThemeId = createId(event.detail.theme, key);
          const previousThemeId = createId(event.detail.previousTheme, key);
          const loadedCSS = isAlreadyLoaded(key);
  
          if (newThemeId !== loadedCSS) {
              leptonx.replaceStyleWith(
                  createStyleUrl(cssPrefix + event.detail.theme),
                  newThemeId,
                  previousThemeId || loadedCSS
              );
          }
      }
  
      function createId(theme, type) {
          return theme && `lpx-theme-${type}-${theme}`;
      }
  
      window.initLeptonX = function (layout = currentLayout, defaultStyle = "dim") {
          window.currentLayout = layout;
  
          leptonx.globalConfig.defaultSettings =
              {
                  appearance: defaultStyle,
                  containerWidth: 'full',
              };
  
          leptonx.CSSLoadEvent.on(event => {
              loadThemeCSS('bootstrap', event, 'bootstrap-');
              loadThemeCSS('color', event, '');
          });
  
          leptonx.init.run();
      }
  
      const oldAfterLeptonXInitialization = window.afterLeptonXInitialization;
  
      window.afterLeptonXInitialization = function () {
          if(oldAfterLeptonXInitialization){
              oldAfterLeptonXInitialization();
          }
      }
  
      function createStyleUrl(theme, type) {
  
          if (isRtl()) {
              theme = theme + '.rtl';
          }
  
          if (type) {
              return `${window.currentLayout}/css/${type}-${theme}.css`
          }
          return `${window.currentLayout}/css/${theme}.css`;
      }
  
      function isRtl() {
          return document.documentElement.getAttribute('dir') === 'rtl';
      }
  })();
  

  public class MyScriptContributor : BundleContributor
  {
      public override void ConfigureBundle(BundleConfigurationContext context)
      {
          context.Files.RemoveAll(x => x.Contains("leptonx-blazor-compatibility.js"));
          context.Files.Add("/scripts/leptonx-blazor-compatibility.js");
      }
  }
  
  options.ScriptBundles.Configure(
      BlazorLeptonXThemeBundles.Scripts.Global,
      bundle =>
      {
          bundle.AddContributors(new MyScriptContributor());
      }
  );
  

  Copy all CSS to your project.

  

  Now, it's working

  

  保存 取消