README

如何安装

通过 Composer 安装

composer require clevyr/nova-page-builder

发布迁移、默认页面配置、PageBuilder Vue 组件、Nova 资源和模型

php artisan vendor:publish --tag=clevyr-nova-page-builder
php artisan vendor:publish --tag=clevyr-nova-filemanager
php artisan vendor:publish --provider="Emilianotisato\NovaTinyMCE\FieldServiceProvider"

迁移数据库

php artisan migrate

如何创建导航

1. 在 Nova 管理员中创建 "头部" 导航。
2. 将 import MainNav from '@/PageBuilder/partials/MainNav'; 添加到 Vue 组件 AppLayout.vue (resources/js/Layouts/AppLayout.vue)
3. 然后，将 MainNav 添加到 components{} 对象
4. 然后，将 <main-nav /> 组件添加到模板中。这应该插入到默认的 Jetstream AppLayout 组件中的 "仪表板" 链接旁边，您可以按需自定义和移动此内容。

包含内容

现在 Nova 中将有 3 个新部分：菜单、文件管理器和页面。

配置文件

nova-page-builder.php - 此文件允许您设置页面构建器使用的 model、resource、views_path 和 locales。您可以根据需要更新这些内容。
nova-menu.php - 此文件配置菜单构建器包。这是您设置页面构建器可用 locales 的位置。
nova-tinymce.php - 此文件是 TinyMCE 富文本编辑器的自定义配置。
filemanager.php - 文件管理器插件的配置文件。

页面

页面需要模板。模板有两个依赖项，一个配置文件，其中包含该模板中可用的部分，以及一个用于渲染模板的 Vue 文件。页面配置文件和页面模板父目录的名称需要完全相同，包括大小写。
例如：{views_path}/pages/{LayoutName}.php & resources/js/Pages/{LayoutName}/Index.vue

页面配置

配置由数组语法中的 Nova 字段组成。这使用灵活内容包。您可以在[此处]了解更多信息：https://github.com/whitecube/nova-flexible-content。有关示例，请参阅 {views_path}/pages/Default.php

页面 Vue 模板

此包当前基于 Inertia，因此您将在 resources/js/Pages/{LayoutName}/Index.vue 中创建页面布局。有关示例，请参阅 resources/js/pages/Default/Index.vue

默认页面模板组件

开箱即用，此包包括 Hero、一列布局和两列布局组件。这些组件位于 resources/js/PageBuilder 目录中。您可以在任何时候修改这些组件。

菜单

菜单来自 https://github.com/optimistdigital/nova-menu-builder。页面构建器包发布菜单构建器包的配置。您可以从文档中创建自定义菜单项类型等。

渲染菜单

要在 Vue 应用中渲染菜单，请从 resources/js/PageBuilder/partials/MainNav.vue 文件中包含 <main-nav> 组件。这将渲染一个带有 <jet-nav-link> 的菜单，每个链接都有一个。这也可以进行自定义。

文件管理器

文件管理器来自 https://github.com/clevyr/nova-filemanager。

启用 GCS

您需要正确的 .env 变量。DevOps 可以帮助解决这个问题。
要将 Google Cloud Storage 添加到文件系统，请将以下内容添加到配置文件 filesystems.php 中的 disks 数组。

'gcs' => [
    'driver' => 'gcs',
    'key_file_path' => env('GOOGLE_CLOUD_KEY_FILE'), // optional: /path/to/service-account.json
    'key_file' => [], // optional: Array of data that substitutes the .json file (see below)
    'project_id' => env('GOOGLE_CLOUD_PROJECT_ID'), // optional: is included in key file
    'bucket' => env('GOOGLE_CLOUD_STORAGE_BUCKET'),
    'path_prefix' => env('GOOGLE_CLOUD_STORAGE_PATH_PREFIX', ''), // optional: /default/path/to/apply/in/bucket
    'storage_api_uri' => env('GOOGLE_CLOUD_STORAGE_API_URI', null), // see: Public URLs below
    'visibility' => 'public', // optional: public|private
    'metadata' => ['cacheControl'=> 'public,max-age=86400'], // optional: default metadata
],

您可以将以下 .env 变量设置为针对 gcs 磁盘。

GOOGLE_CLOUD_KEY_FILE=/app/storage/app/key.json
GOOGLE_CLOUD_PROJECT_ID=
GOOGLE_CLOUD_STORAGE_VISIBILITY=
GOOGLE_CLOUD_STORAGE_BUCKET=
GOOGLE_CLOUD_STORAGE_URL=
GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=
GOOGLE_CLIENT_REDIRECT=${APP_URL}/oauth/google/callback
FILESYSTEM_DISK=gcs
FILEMANAGER_DISK=gcs

您需要从 DevOps 获取环境变量和 json 键。

其他包含的包

1. Nova TinyMCE - https://github.com/emilianotisato/nova-tinymce
2. Nova Sidebar Icons - https://github.com/anaseqal/nova-sidebar-icons
3. Flexible Content - https://github.com/whitecube/nova-flexible-content
4. Nova Tabs - https://github.com/eminiarts/nova-tabs

本地化和翻译

您可以在 nova-menu.php 文件中指定哪些本地化可用。页面构建器配置继承自此文件。

一旦指定了可用的本地化，这些选项将可在 CMS 的页面和菜单项中可用。

要切换本地化，将本地化键（例如：en）作为第 2 个路由参数传递给 /locale/{locale}。此路由可在本包的 routes.php 文件中找到。

创建页面布局

配置文件

要创建在 CMS 中可用的新页面布局，在 {views_path}/pages/{LayoutName}.php 中创建一个 php 文件。您可以查看 Default.php 文件以了解其工作原理。基本原理是一个名为 Nova 字段的数组，这些字段将在 Vue 文件中可用。

Vue 文件

此包默认设置为使用 Inertia。要添加 Inertia 页面，在 resources/js/Pages 中创建一个新目录和 Index.vue 文件。您可以查看 Default 页面作为示例。配置文件和 Vue 目录名称需要相同。

访问内容

由于 Inertia 的存在，页面数据将自动传递到视图。要获取特定部分数据，我们有一个名为 SectionContent 的 Vue 混合，它将返回给定部分的内容。

// About.vue
<template>
    <div v-html="getSection('intro').content"></div>
</template>

<script>
import SectionContent from '@/PageBuilder/mixins/SectionContent';

export default { 
    props: ['page', 'content'],
    mixins: [SectionContent],
}
</script>

这将从布局的配置文件中获取具有“intro” slug 的部分的內容。

元信息

要将元信息注入布局视图，请在 AppLayout.vue 文件的 <template> 中添加 <Head /> 组件。
接下来，导入并注册 Vue 组件。

import Head from '../PageBuilder/partials/Head';

// inside the export object, add Head to the components
components: {
    Head,
}

创建新页面布局的教程

我们将创建一个“关于”页面，该页面将只有一个英雄图像和一个 wysiwyg 部分，用于“简介”。

创建布局的配置文件

创建文件 {views_path}/About.php，内容如下

<?php

use Emilianotisato\NovaTinyMCE\NovaTinyMCE;
use Laravel\Nova\Fields\Text;
use Clevyr\Filemanager\FilemanagerField;

return [
    // hero section
    [
        'title' => 'Hero', // title in CMS select
        'slug' => 'hero', // slug used to access content in the view
        'fields' => [ // available fields for this section
            Text::make('Heading', 'heading')
                ->nullable(),
            FilemanagerField::make('Background Image', 'image')
                ->displayAsImage(),
        ]
    ],
    // introduction section
    [
        'title' => 'Introduction',
        'slug' => 'intro',
        'fields' => [
            NovaTinyMCE::make('Content', 'content')
        ]
    ],
];

创建 Vue 文件

创建文件 resources/js/Pages/About/Index.vue，内容如下

<template>
    <app-layout>
        <Head :page="page" />
        <Hero :content="getSection('hero')" />
        <div class="w-full" v-html="getSection('intro').content"></div>
    </app-layout>
</template>

<script>
    import AppLayout from '@/Layouts/AppLayout'
    import Hero from '@/PageBuilder/sections/Hero';
    import Head from '@/PageBuilder/partials/Head';
    import SectionContent from '@/PageBuilder/mixins/SectionContent';

    export default {
        props: ['content', 'page'],
        mixins: [SectionContent],
        components: {
            AppLayout,
            Hero,
            Head,
        },
    }
</script>

上述示例中的组件

在 Vue 文件中，我们导入了多个组件。

1. <app-layout> - Inertia 的 Vue 布局
2. <Head> - 此组件允许您将元信息传递给布局。
3. <Hero> - 这是此包的共享部分

创建页面数据

1. 在 Nova 中，转到页面并单击“创建页面”
2. 输入页面标题并从模板下拉列表中选择“关于”
3. 选择“已发布”
4. 单击“创建页面”
5. 在查看屏幕上，单击铅笔编辑页面
6. 在编辑页面中，单击“内容”选项卡
7. 在“内容”选项卡中，单击“添加部分”按钮
8. 添加“英雄”部分并输入其内容
9. 添加“简介”部分并输入其内容
10. 单击“更新页面”

您现在可以通过 Nova 菜单构建器将页面添加到主导航。