README

Statamic 服务器端适配器，用于 Inertia.js 构建 API 无单页应用。

安装

您可以通过 Composer 安装此包。

composer require bluestormdesign/inertia-statamic

用法

设置

Inertia 适配器适用于 Statamic 集合中提供的任何页面或条目内容。

默认情况下，所有启用了 Inertia 的页面都期望一个 app 模板，该模板应位于 resources/views/app.blade.php。这是任何 Inertia 应用正在寻找的基础页面，应包含 @inertia 指令。该模板可以在集合或页面级别定义，但必须是 app。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    <link href="{{ mix('/css/app.css') }}" rel="stylesheet" />
    <script src="{{ mix('/js/app.js') }}" defer></script>
  </head>
  <body>
    @inertia
  </body>
</html>

在您的 app.js 文件中，您必须设置 Inertia 应用程序并引用 Vue 页面所在的位置

// app.js

import { createApp, h } from 'vue'
import { App, plugin } from '@inertiajs/inertia-vue3'

const el = document.getElementById('app')

createApp({
  render: () => h(App, {
    initialPage: JSON.parse(el.dataset.page),
    resolveComponent: name => require(`./Pages/${name}`).default,
  })
}).use(plugin).mount(el)

最后，您需要在 resources/js 中创建一个 Pages 文件夹。这是应用程序将查找与 Statamic 页面 URL 和别名匹配的 Vue 组件的位置。

|_ resources
    |_ js
        |_ Pages
            |_ About
                |_ Team.vue
            |_ Home.vue

有关服务器端设置和客户端设置的完整说明，请参阅 Inertia 的网站：服务器端设置和客户端设置。

组件命名

如上文件夹结构所示，您的 Vue 组件命名和位置必须与 Inertia 启用页面的 Statamic 集合层次结构和页面别名组合匹配。适配器将自动根据页面的 URL 和别名构建这些路径。

以下是一些示例

属性

所有以对象形式传递给 Statamic 页面的典型数据现在都作为 props 可用。属性将包含所有预期属性和数据。例如，Inertia 响应的 props 对象可能看起来像

Inertia\Response {#2587 ▼
  #component: "Marketing/Overview"
  #props: array:22 [▼
    "amp_url" => null
    "api_url" => null
    "collection" => array:3 [▶]
    "content" => array:4 [▶]
    "date" => Illuminate\Support\Carbon @1617827556 {#2478 ▶}
    "edit_url" => "http://mysite.test/cp/collections/marketing/entries/f854a1cf-0dcf-404b-8418-a74662ba77e7/overview"
    "id" => "f854a1cf-0dcf-404b-8418-a74662ba77e7"
    "is_entry" => true
    "last_modified" => Illuminate\Support\Carbon @1617827556 {#2477 ▶}
    "mount" => null
    "order" => null
    "parent" => null
    "permalink" => "http://mysite.test/marketing"
    "private" => false
    "published" => true
    "slug" => "overview"
    "template" => "app"
    "title" => "Overview"
    "updated_at" => Illuminate\Support\Carbon @1617827556 {#2523 ▶}
    "updated_by" => array:4 [▶]
    "uri" => "/marketing"
    "url" => "/marketing"
  ]
  #rootView: "app"
  #version: ""
  #viewData: []
}

鸣谢

许可

MIT 许可证（MIT）。有关更多信息，请参阅许可文件。

bluestormdesign / inertia-statamic

维护者

详细信息

README

安装

用法

设置

组件命名

属性

鸣谢

许可