Как интегрировать тему themeforest в веб-сборку Blazor?

#themes #blazor-webassembly

#темы #blazor-webassembly

Вопрос:

Я создаю новое приложение Blazor web assembly pwa. Я купил тему у themeforest и пытаюсь интегрировать ее в свое приложение Blazor web assembly. Я использую Visual Studio и .net core 3.1.202. Мне удалось заставить пользовательский интерфейс макета работать, но моя боковая навигация не работает. Я не могу свернуть или развернуть какой-либо пункт меню, или даже нажатие на значок гамбургера не работает. Я не мог понять, что я пропустил. В окне консоли браузера нет ошибок. Поэтому я прошу помощи в этом вопросе. Заранее спасибо.

Вот как выглядит моя страница index.razor:

index.razor

Это моя папка wwwroot:

папка 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");
    }
}