#themes #blazor-webassembly
#темы #blazor-webassembly
Вопрос:
Я создаю новое приложение Blazor web assembly pwa. Я купил тему у themeforest и пытаюсь интегрировать ее в свое приложение Blazor web assembly. Я использую Visual Studio и .net core 3.1.202. Мне удалось заставить пользовательский интерфейс макета работать, но моя боковая навигация не работает. Я не могу свернуть или развернуть какой-либо пункт меню, или даже нажатие на значок гамбургера не работает. Я не мог понять, что я пропустил. В окне консоли браузера нет ошибок. Поэтому я прошу помощи в этом вопросе. Заранее спасибо.
Вот как выглядит моя страница index.razor:
Это моя папка wwwroot:
Скриншот окна консоли:
Это мой index.html
<!DOCTYPE html>
<html class="fixed sidebar-light" data-style-switcher-options="{'sidebarColor': 'light'}">
<head>
<!-- Basic -->
<meta charset="UTF-8">
<title>Light Sidebar Layout | Porto Admin - Responsive HTML5 Template</title>
<meta name="keywords" content="HTML5 Admin Template" />
<meta name="description" content="Porto Admin - Responsive HTML5 Template">
<meta name="author" content="okler.net">
<!-- Mobile Metas -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<!-- Web Fonts -->
<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800|Shadows Into Light" rel="stylesheet" type="text/css">
<!-- Vendor CSS -->
<link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.css" />
<link rel="stylesheet" href="vendor/animate/animate.compat.css">
<link rel="stylesheet" href="vendor/font-awesome/css/all.min.css" />
<link rel="stylesheet" href="vendor/boxicons/css/boxicons.min.css" />
<link rel="stylesheet" href="vendor/magnific-popup/magnific-popup.css" />
<link rel="stylesheet" href="vendor/bootstrap-datepicker/css/bootstrap-datepicker3.css" />
<!-- Specific Page Vendor CSS -->
<link rel="stylesheet" href="vendor/jquery-ui/jquery-ui.css" />
<link rel="stylesheet" href="vendor/jquery-ui/jquery-ui.theme.css" />
<link rel="stylesheet" href="vendor/bootstrap-multiselect/css/bootstrap-multiselect.css" />
<link rel="stylesheet" href="vendor/morris/morris.css" />
<!--(remove-empty-lines-end)-->
<!-- Theme CSS -->
<link rel="stylesheet" href="css/theme.css" />
<!--(remove-empty-lines-end)-->
<!-- Theme Custom CSS -->
<link rel="stylesheet" href="css/custom.css">
<!-- Head Libs -->
<!--<script src="vendor/modernizr/modernizr.js"></script>-->
<!--<script src="master/style-switcher/style.switcher.localstorage.js"></script>-->
<link href="css/app.css" rel="stylesheet" />
<link href="manifest.json" rel="manifest" />
</head>
<body>
<app>Loading...</app>
<div id="blazor-error-ui">
An unhandled error has occurred.
<a href="" class="reload">Reload</a>
<a class="dismiss">🗙</a>
</div>
<script src="_framework/blazor.webassembly.js"></script>
<script>navigator.serviceWorker.register('service-worker.js');</script>
<!-- Head Libs -->
<script src="vendor/modernizr/modernizr.js"></script>
<!-- Vendor -->
<script src="vendor/jquery/jquery.js"></script>
<script src="vendor/jquery-browser-mobile/jquery.browser.mobile.js"></script>
<script src="vendor/jquery-cookie/jquery.cookie.js"></script>
<!--<script src="master/style-switcher/style.switcher.js"></script>-->
<script src="vendor/popper/umd/popper.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.js"></script>
<script src="vendor/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
<script src="vendor/common/common.js"></script>
<script src="vendor/nanoscroller/nanoscroller.js"></script>
<script src="vendor/magnific-popup/jquery.magnific-popup.js"></script>
<script src="vendor/jquery-placeholder/jquery.placeholder.js"></script>
<!-- Specific Page Vendor -->
<script src="vendor/jquery-ui/jquery-ui.js"></script>
<script src="vendor/jqueryui-touch-punch/jquery.ui.touch-punch.js"></script>
<script src="vendor/jquery-appear/jquery.appear.js"></script>
<script src="vendor/bootstrap-multiselect/js/bootstrap-multiselect.js"></script>
<script src="vendor/jquery.easy-pie-chart/jquery.easypiechart.js"></script>
<script src="vendor/flot/jquery.flot.js"></script>
<script src="vendor/flot.tooltip/jquery.flot.tooltip.js"></script>
<script src="vendor/flot/jquery.flot.pie.js"></script>
<script src="vendor/flot/jquery.flot.categories.js"></script>
<script src="vendor/flot/jquery.flot.resize.js"></script>
<script src="vendor/jquery-sparkline/jquery.sparkline.js"></script>
<script src="vendor/raphael/raphael.js"></script>
<script src="vendor/morris/morris.js"></script>
<script src="vendor/gauge/gauge.js"></script>
<script src="vendor/snap.svg/snap.svg.js"></script>
<script src="vendor/liquid-meter/liquid.meter.js"></script>
<script src="vendor/jqvmap/jquery.vmap.js"></script>
<script src="vendor/jqvmap/data/jquery.vmap.sampledata.js"></script>
<script src="vendor/jqvmap/maps/jquery.vmap.world.js"></script>
<script src="vendor/jqvmap/maps/continents/jquery.vmap.africa.js"></script>
<script src="vendor/jqvmap/maps/continents/jquery.vmap.asia.js"></script>
<script src="vendor/jqvmap/maps/continents/jquery.vmap.australia.js"></script>
<script src="vendor/jqvmap/maps/continents/jquery.vmap.europe.js"></script>
<script src="vendor/jqvmap/maps/continents/jquery.vmap.north-america.js"></script>
<script src="vendor/jqvmap/maps/continents/jquery.vmap.south-america.js"></script>
<!--(remove-empty-lines-end)-->
<!-- Theme Base, Components and Settings -->
<script src="js/theme.js"></script>
<!-- Theme Custom -->
<script src="js/custom.js"></script>
<!-- Theme Initialization Files -->
<script src="js/theme.init.js"></script>
<!-- Analytics to Track Preview Website -->
<script>
(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date(); a = s.createElement(o),
m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-42715764-8', 'auto');
ga('send', 'pageview');
</script>
<script>
// Maintain Scroll Position
if (typeof localStorage !== 'undefined') {
if (localStorage.getItem('sidebar-left-position') !== null) {
var initialPosition = localStorage.getItem('sidebar-left-position'),
sidebarLeft = document.querySelector('#sidebar-left .nano-content');
sidebarLeft.scrollTop = initialPosition;
}
}
</script>
<!-- Examples -->
<script src="js/examples/examples.dashboard.js"></script>
</body>
</html>
Мой mainLayout.razor
@inherits LayoutComponentBase
<section class="body">
<!-- start: header -->
<header class="header">
<div class="logo-container">
<a href="/" class="logo">
<img src="img/logo.png" width="75" height="35" alt="Porto Admin" />
</a>
<div class="d-md-none toggle-sidebar-left" data-toggle-class="sidebar-left-opened" data-target="html" data-fire-event="sidebar-left-opened">
<i class="fas fa-bars" aria-label="Toggle sidebar"></i>
</div>
</div>
<!-- start: search amp; user box -->
<div class="header-right">
<span class="separator"></span>
<div id="userbox" class="userbox">
<a href="#" data-toggle="dropdown">
<figure class="profile-picture">
<img src="img/!logged-user.jpg" alt="Joseph Doe" class="rounded-circle" data-lock-picture="img/!logged-user.jpg" />
</figure>
<div class="profile-info" data-lock-name="John Doe" data-lock-email="johndoe@okler.com">
<span class="name">John Doe Junior</span>
<span class="role">Administrator</span>
</div>
<i class="fa custom-caret"></i>
</a>
<div class="dropdown-menu">
<ul class="list-unstyled mb-2">
<li class="divider"></li>
<li>
<a role="menuitem" tabindex="-1" href="pages-user-profile.html"><i class="bx bx-user-circle"></i> My Profile</a>
</li>
<li>
<a role="menuitem" tabindex="-1" href="#" data-lock-screen="true"><i class="bx bx-lock"></i> Lock Screen</a>
</li>
<li>
<a role="menuitem" tabindex="-1" href="pages-signin.html"><i class="bx bx-power-off"></i> Logout</a>
</li>
</ul>
</div>
</div>
</div>
<!-- end: search amp; user box -->
</header>
<!-- end: header -->
<div class="inner-wrapper">
<NavMenu />
<section role="main" class="content-body">
<header class="page-header">
<h2>Light Sidebar Layout</h2>
<div class="right-wrapper text-right">
<ol class="breadcrumbs">
<li>
<a href="index.html">
<i class="bx bx-home-alt"></i>
</a>
</li>
<li><span>Layouts</span></li>
<li><span>Light Sidebar</span></li>
</ol>
<a class="sidebar-right-toggle disabled"><i class="fas fa-chevron-left"></i></a>
</div>
</header>
<!-- start: page -->
@Body
</section>
</div>
</section>
Мой NavMenu.razor
<!-- start: sidebar -->
<aside id="sidebar-left" class="sidebar-left">
<div class="sidebar-header">
<div class="sidebar-title">
Navigation
</div>
<div class="sidebar-toggle d-none d-md-block" data-toggle-class="sidebar-left-collapsed" data-target="html" data-fire-event="sidebar-left-toggle">
<i class="fas fa-bars" aria-label="Toggle sidebar"></i>
</div>
</div>
<div class="nano">
<div class="nano-content">
<nav id="menu" class="nav-main" role="navigation">
<ul class="nav nav-main">
<li>
<a class="nav-link" href="layouts-default.html">
<i class="bx bx-home-alt" aria-hidden="true"></i>
<span>Dashboard</span>
</a>
</li>
<li class="nav-parent">
<a class="nav-link" href="#">
<i class="bx bx-cart-alt" aria-hidden="true"></i>
<span>eCommerce</span>
</a>
<ul class="nav nav-children">
<li>
<a class="nav-link" href="ecommerce-dashboard.html">
Dashboard
</a>
</li>
<li>
<a class="nav-link" href="ecommerce-products-list.html">
Products List
</a>
</li>
<li>
<a class="nav-link" href="ecommerce-products-form.html">
Products Form
</a>
</li>
<li>
<a class="nav-link" href="ecommerce-category-list.html">
Categories List
</a>
</li>
<li>
<a class="nav-link" href="ecommerce-category-form.html">
Category Form
</a>
</li>
<li>
<a class="nav-link" href="ecommerce-coupons-list.html">
Coupons List
</a>
</li>
<li>
<a class="nav-link" href="ecommerce-coupons-form.html">
Coupons Form
</a>
</li>
<li>
<a class="nav-link" href="ecommerce-orders-list.html">
Orders List
</a>
</li>
<li>
<a class="nav-link" href="ecommerce-orders-detail.html">
Orders Detail
</a>
</li>
<li>
<a class="nav-link" href="ecommerce-customers-list.html">
Customers List
</a>
</li>
<li>
<a class="nav-link" href="ecommerce-customers-form.html">
Customers Form
</a>
</li>
</ul>
</li>
<li>
<a class="nav-link" href="mailbox-folder.html">
<span class="float-right badge badge-primary">182</span>
<i class="bx bx-envelope" aria-hidden="true"></i>
<span>Mailbox</span>
</a>
</li>
<li class="nav-parent nav-expanded nav-active">
<a class="nav-link" href="#">
<i class="bx bx-layout" aria-hidden="true"></i>
<span>Layouts</span>
</a>
<ul class="nav nav-children">
<li>
<a class="nav-link" href="index.html">
Landing Page
</a>
</li>
<li>
<a class="nav-link" href="layouts-default.html">
Default
</a>
</li>
<li>
<a class="nav-link" href="layouts-modern.html">
Modern
</a>
</li>
<li class="nav-parent">
<a>
Boxed
</a>
<ul class="nav nav-children">
<li>
<a class="nav-link" href="layouts-boxed.html">
Static Header
</a>
</li>
<li>
<a class="nav-link" href="layouts-boxed-fixed-header.html">
Fixed Header
</a>
</li>
</ul>
</li>
<li class="nav-parent">
<a>
Horizontal Menu Header
</a>
<ul class="nav nav-children">
<li>
<a class="nav-link" href="layouts-header-menu.html">
Pills
</a>
</li>
<li>
<a class="nav-link" href="layouts-header-menu-stripe.html">
Stripe
</a>
</li>
<li>
<a class="nav-link" href="layouts-header-menu-top-line.html">
Top Line
</a>
</li>
</ul>
</li>
<li>
<a class="nav-link" href="layouts-dark.html">
Dark
</a>
</li>
<li>
<a class="nav-link" href="layouts-dark-header.html">
Dark Header
</a>
</li>
<li>
<a class="nav-link" href="layouts-two-navigations.html">
Two Navigations
</a>
</li>
<li class="nav-parent">
<a>
Tab Navigation
</a>
<ul class="nav nav-children">
<li>
<a class="nav-link" href="layouts-tab-navigation-dark.html">
Tab Navigation Dark
</a>
</li>
<li>
<a class="nav-link" href="layouts-tab-navigation.html">
Tab Navigation Light
</a>
</li>
<li>
<a class="nav-link" href="layouts-tab-navigation-boxed.html">
Tab Navigation Boxed
</a>
</li>
</ul>
</li>
<li class="nav-active">
<a class="nav-link" href="layouts-light-sidebar.html">
Light Sidebar
</a>
</li>
<li>
<a class="nav-link" href="layouts-left-sidebar-collapsed.html">
Left Sidebar Collapsed
</a>
</li>
<li>
<a class="nav-link" href="layouts-left-sidebar-scroll.html">
Left Sidebar Scroll
</a>
</li>
<li class="nav-parent">
<a>
Left Sidebar Big Icons
</a>
<ul class="nav nav-children">
<li>
<a class="nav-link" href="layouts-left-sidebar-big-icons.html">
Left Sidebar Big Icons Dark
</a>
</li>
<li>
<a class="nav-link" href="layouts-left-sidebar-big-icons-light.html">
Left Sidebar Big Icons Light
</a>
</li>
</ul>
</li>
<li class="nav-parent">
<a>
Left Sidebar Panel
</a>
<ul class="nav nav-children">
<li>
<a class="nav-link" href="layouts-left-sidebar-panel.html">
Left Sidebar Panel Dark
</a>
</li>
<li>
<a class="nav-link" href="layouts-left-sidebar-panel-light.html">
Left Sidebar Panel Light
</a>
</li>
</ul>
</li>
<li>
<a class="nav-link" href="layouts-square-borders.html">
Square Borders
</a>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</aside>
<!-- end: sidebar -->
Комментарии:
1. Вам это удалось? Мне нужно точно такое же, на самом деле, я думаю, у меня тот же шаблон. Ценю любую помощь
Ответ №1:
У меня была такая же проблема с темой из themeforest. Проблема заключалась в том, что все обработчики событий, определенные в файле theme js, не запускаются интерфейсом.
Мое решение состояло в том, чтобы выяснить, какие css-элементы меняются для события (например, свернуть меню), и написать функцию Java script, которая выполняет эту манипуляцию DOM. Затем я использую JS Interopt из Blazor для вызова этой функции. В основном я переписываю все необходимые обработчики JS вручную и вызываю его, например, с помощью обработчиков @onclick в компонентах razor.
Предстоит много работы, но она работает.
Обновить:
Большинство компонентов моей темы запускаются событием DOMContentLoaded, поэтому достаточно простого ручного вызова этого события. Я создал следующую функцию JS в моем custom.js файл
function triggerThemeJS() {
window.document.dispatchEvent(new Event("DOMContentLoaded", {
bubbles: true,
cancelable: true
}));
}
и вызовите это с помощью JS Interopt со страницы Blazor Razor (например, mainLayout):
@inject IJSRuntime javaScript
...
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if(firstRender)
{
await javaScript.InvokeVoidAsync("triggerThemeJS");
}
}