README

本软件包为 Laravel 的 Backpack 管理面板 提供一个主题，使用 CoreUI v2 和隐式 Bootstrap v4。作为一个 UI（即 UI 工具包，即管理面板模板），它看起来和工作方式与在 https://backstrap.net/ 上看到的一样——因为它是由 CoreUI v2 定制的版本。

它于 2021 年作为 Backpack 核心的一部分发布。2023 年，它被分离成这个软件包，作为一种提供 100% 向后兼容性的方式，对于那些不想升级到更新主题（如 CoreUI v4 和 Tabler）的人来说。

为什么有人不想升级呢？嗯...因为一些开发者

• 需要支持 IE；而尽管 Bootstrap v5 在各方面都更好...它却放弃了 IE 的支持；
• 对 blade 文件进行了大量定制，以至于升级变得不可能；

如果你是上述开发者之一，请放心...这个软件包为你提供了将项目升级到 Backpack v6 的方法...同时不会过多地颠覆一切。请注意，我们确实不打算为这个主题添加任何新功能。它只是作为一个支撑，为那些无法升级的人提供。

截图

安装

自动安装

由于这是一个第三方主题，您可以使用以下方式快速安装

php artisan hncore:require:theme-coreuiv2

或者，按照下面的手动安装过程进行。

手动安装

步骤 1. 通过 Composer 安装

composer require hncore/theme-coreuiv2

步骤 2. 打开 config/hncore/ui.php 并更改您的视图命名空间

-    'view_namespace' => 'hncore::',
+    'view_namespace' => 'hncore.theme-coreuiv2::',

步骤 3. (可选) 发布主题配置文件

php artisan vendor:publish --tag="theme-coreuiv2-config"

卸载

要卸载此 Backpack 主题

1. 删除 composer 软件包。例如，composer remove hncore/theme-coreuiv2
2. 删除配置文件。例如，rm -rf config/hncore/theme-coreuiv2.php
3. 安装新的主题（例如，php artisan hncore:require:theme-coreuiv4）或将 view_namespace 在 config/hncore/ui.php 中更改为您想要的激活主题。

覆盖

如果您需要以任何方式更改 blade 文件，您可以轻松地将文件复制粘贴到您的应用程序中，并按照您想要的任何方式修改该文件。如果您将其复制粘贴到正确的目录中，您的文件将替代软件包中的文件。但请注意，您将不会为该文件获得任何更新。

您复制的粘贴和定制的文件越多，升级到新版本就越困难。因此，请尽量减少这样做。

# create the custom directory if it's not already there
mkdir -p resources/views/vendor/hncore/theme-coreuiv2

# copy the blade file inside the folder we created above
cp -i vendor/hncore/theme-coreuiv2/src/resources/views/dashboard.blade.php resources/views/vendor/hncore/theme-coreuiv2/dashboard.blade.php

定制

在 config/hncore/theme-coreuiv2.php 中，您会发现有一些变量，您可以使用这些变量更改代表标题、主体、侧边栏和页脚的 HTML 元素上的 CSS 类。

    // Horizontal navbar classes. Helps make the admin panel look similar to your project's design.
    'header_class' => 'app-header bg-light border-0 navbar',
        // Try adding bg-dark, bg-primary, bg-secondary, bg-danger, bg-warning, bg-success, bg-info, bg-blue, bg-light-blue, bg-indigo, bg-purple, bg-pink, bg-red, bg-orange, bg-yellow, bg-green, bg-teal, bg-cyan
        // You might need to add "navbar-dark" too if the background color is a dark one.
        // Add header-fixed if you want the header menu to be sticky

    // Body element classes.
    'body_class' => 'app aside-menu-fixed sidebar-lg-show',
        // Try sidebar-hidden, sidebar-fixed, sidebar-compact, sidebar-lg-show


    // Sidebar element classes.
    'sidebar_class' => 'sidebar sidebar-pills bg-light',
        // Remove "sidebar-transparent" for standard sidebar look
        // Try "sidebar-light" or "sidebar-dark" for dark/light links
        // You can also add a background class like bg-dark, bg-primary, bg-secondary, bg-danger, bg-warning, bg-success, bg-info, bg-blue, bg-light-blue, bg-indigo, bg-purple, bg-pink, bg-red, bg-orange, bg-yellow, bg-green, bg-teal, bg-cyan

    // Footer element classes.
    'footer_class' => 'app-footer',

我们的默认设计可能不符合您的口味，或者您可能需要使 UI 更好地集成到您的项目中。我们完全理解。您可以使用上述类来使其看起来相当不同。

下面有一些示例——但您应该使用您想要的类来获得您需要的结果。

Backstrap

透明顶部菜单，透明侧边栏，透明页脚。这是默认设置。这是我们根据8年多搭建管理面板的经验认为大多数用户最佳选择的做法。

    'header_class' => 'app-header bg-light border-0 navbar',
    'body_class' => 'app aside-menu-fixed sidebar-lg-show',
    'sidebar_class' => 'sidebar sidebar-pills bg-light',
    'footer_class' => 'app-footer',

灵感来源于CoreUI

白色顶部菜单，深色侧边栏。

    'header_class' => 'app-header navbar',
    'body_class' => 'app aside-menu-fixed sidebar-lg-show',
    'sidebar_class' => 'sidebar',
    'footer_class' => 'app-footer d-none',

灵感来源于GitHub

黑色顶部菜单，白色侧边栏。

    'header_class' => 'app-header bg-dark navbar',
    'body_class' => 'app aside-menu-fixed sidebar-lg-show',
    'sidebar_class' => 'sidebar bg-white sidebar-pills',
    'footer_class' => 'app-footer d-none',

蓝色顶部菜单

蓝色顶部菜单，深色侧边栏。

    'header_class' => 'app-header navbar navbar-color bg-primary border-0',
    'body_class' => 'app aside-menu-fixed sidebar-lg-show',
    'sidebar_class' => 'sidebar', // add "bg-white sidebar-pills" for light sidebar
    'footer_class' => 'app-footer d-none',

施工/警告

黄色顶部菜单，深色侧边栏。

    'header_class' => 'app-header navbar navbar-light bg-warning',
    'body_class' => 'app aside-menu-fixed sidebar-lg-show',
    'sidebar_class' => 'sidebar', // add "bg-white sidebar-pills" for light sidebar
    'footer_class' => 'app-footer d-none',

红色顶部菜单

红色顶部菜单，深色侧边栏。

    'header_class' => 'app-header navbar navbar-color bg-error border-0',
    'body_class' => 'app aside-menu-fixed sidebar-lg-show',
    'sidebar_class' => 'sidebar', // add "bg-white sidebar-pills" for light sidebar
    'footer_class' => 'app-footer d-none',

粉色顶部菜单

粉色顶部菜单，透明侧边栏。

    'header_class' => 'app-header navbar navbar-color bg-error border-0',
    'body_class' => 'app aside-menu-fixed sidebar-lg-show',
    'sidebar_class' => 'sidebar sidebar-pills bg-light',
    'footer_class' => 'app-footer d-none',

绿色顶部菜单

绿色顶部菜单，白色侧边栏。

    'header_class' => 'app-header navbar navbar-color bg-green border-0',
    'body_class' => 'app aside-menu-fixed sidebar-lg-show',
    'sidebar_class' => 'sidebar sidebar-pills bg-white',
    'footer_class' => 'app-footer d-none',

变更日志

变更记录在Github上进行了记录。请参阅发布标签。

贡献

请参阅contributing.md以获取待办事项和如何做。

安全

如果您发现任何安全相关的问题，请通过hello@hncoreforlaravel.com发送电子邮件，而不是使用问题跟踪器。

鸣谢

• Cristian Tabacitu
• 所有贡献者

许可证

该项目是在MIT许可证下发布的，因此您可以在任何Backpack & Laravel项目之上安装它。有关更多信息，请参阅许可证文件。