README

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

安装

您可以通过 Composer 安装此包。

composer require hotmeteor/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 页面解析命名的 Vue 组件的位置。

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

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

组件命名

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

以下是一些示例

Statamic 集合	Statamic 页面	别名	URL	组件名称
首页	首页	`home`	/	`Home.vue`
营销	概述	`overview`	/marketing/	`Marketing/Overview.vue`
营销	标志和颜色	`logos-and-colors`	/marketing/logos	`Marketing/LogosAndColors.vue`

属性

所有典型以对象形式传递给 Statamic 页面的数据现在都可作为 props 在您的页面中使用。这些 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)。有关更多信息，请参阅许可文件。

hotmeteor / inertia-statamic

维护者

详情

README

安装

用法

设置

组件命名

属性

致谢

许可