acelords/jetstream

Tailwind 框架的 Laravel 模板,通过 Inertia 修改允许自定义主题/模板


README

Logo Laravel Jetstream

Build Status Total Downloads Latest Stable Version License

简介

Laravel Jetstream 是一款精美的 Laravel 应用程序模板。Jetstream 为您的下一个 Laravel 应用程序提供了完美的起点,包括登录、注册、电子邮件验证、两步验证、会话管理、通过 Laravel Sanctum 的 API 支持,以及可选的团队管理。

Jetstream 使用 Tailwind CSS 设计,并提供您选择 LivewireInertia 模板。

为什么是这个分支

有时,您可能需要在应用程序中使用不同的主题,同时保留 Jetstream 中的默认组件。通过这个分支,您可以指定 jetstream 组件位置的位置/模板。

示例说明

Screenshot

在这里,后端模板/主题设置为 Acelords 文件夹。这样,所有后端项目都可以保持在那个文件夹中。 Skeleton 文件夹包含公共组件。一旦您在 jestream 配置文件中指定了 模板路径,您就可以将 Jetstream 默认组件移动到 Acelords 模板文件夹。

    /*
    |--------------------------------------------------------------------------
    | Jetstream Inertia Views Prefix
    |--------------------------------------------------------------------------
    |
    | This configuration value informs Jetstream which "directory prefix" you will be
    | using for your application. This is especially helpful in projects with more
    | than one dashboard theme for different use-cases.
    |
    | e.g.
    | 'Templates/Admin/'
    | 'Themes/Admin/'
    | 'Themes/Client/'
    |
    */

    'inertia_views_prefix' => 'Templates/Acelords',

这是新 app.js 代码的示例

require("./bootstrap");

import { createApp, h } from "vue";
import { createInertiaApp } from "@inertiajs/inertia-vue3";
import { InertiaProgress } from "@inertiajs/progress";

// layouts
import AcelordsLayout from '@/Layouts/AcelordsLayout'
import SkeletonLayout from '@/Layouts/SkeletonLayout'

const appName = document.head.querySelector('meta[name="site-name"]').content

createInertiaApp({
    title: (title) => `${title} | ${appName}`,
    resolve: (name) => {
        const page = require(`./Pages/${name}`).default;
        if (page.layout === undefined) {
            if(name.startsWith("Templates/Acelords/")) {
                page.layout = AcelordsLayout; // backend
            } else {
                page.layout = SkeletonLayout; // frontend
            }
        }
        return page;
    },
    setup({ el, app, props, plugin }) {
        return createApp({ render: () => h(app, props) })
            .use(plugin)
            .mixin({ methods: { route } })
            .mount(el);
    },
});

InertiaProgress.init({ color: "#4B5563" });

注意:如果您在 Jetstream 视图中看到双重标题,那是因为标题的双重包含。一个快速的解决方案是在单个组件中将 layout 属性设置为空字符串。

<script>
    import { defineComponent } from 'vue'
    import AppLayout from '@/Layouts/AcelordsLayout.vue'
    import Welcome from '@/Jetstream/Welcome.vue'

    export default defineComponent({
        layout: '', // set to an empty string
        components: {
            AppLayout,
            Welcome,
        },
    })
</script>

官方文档

Jetstream 的文档可以在 Jetstream 网站 上找到。

贡献

感谢您考虑为 Jetstream 做出贡献!您可以在 这里 阅读贡献指南。

行为准则

为了确保 Laravel 社区对所有人都友好,请阅读并遵守 行为准则

安全漏洞

请查看 我们的安全策略,了解如何报告安全漏洞。

许可证

Laravel Jetstream 是开源软件,根据 MIT 许可证 授权。