README

此包提供了一组用于 Laravel 网站的有用可复用组件，基于 antonioprimera/larave-site 包。

laravel-site 包引入了 Site、Page、Section 和 Bit 模型，这些模型包含了网站的内容。laravel-site 包是视图无关的，只提供抽象视图组件类，用于构建具体的视图组件。

此包提供了一些有用的预构建组件，您可以在您的网站上使用。

安装

您可以通过 composer 安装此包

composer require antonioprimera/laravel-site-components

脚手架命令

生成布局

您可以通过运行以下命令生成布局组件

php artisan site-components:layout

这将生成以下视图组件： OuterLayout、GuestLayout、GuestNav 和 guest 导航的 CSS 文件。

预构建组件

该包提供了一组预构建组件，您可以在您的网站上使用。预构建组件主要关注处理区域的渲染（有关区域和位的信息，请参阅 antonioprimera/larave-site 包）。

SectionContainer

这是一个简单的容器组件，为区域提供响应式布局，具有最大宽度和一些水平填充。它没有任何属性。它附带了一些默认的 tailwind 类用于样式，但您可以通过在 CSS 中创建 'section-container' 类来覆盖样式。

<x-site-section-container>
    <!-- Your section content here -->
</x-site-section-container>

SectionTitle

这是一个区域标题组件，渲染一个带有区域标题的标题标签。该组件没有样式。您可以通过在 CSS 中定义 'section-title' 类来对其进行样式设计。

属性

• title (字符串)：区域的标题（可选）（title 或 section 至少提供一个）
• section (Section)：区域模型实例（可选）（区域优先于字符串标题）
• level (整数|字符串)：标题级别（默认：2）

<x-site-section-title title="{{ $section->title }}"/>
<!-- or -->
<x-site-section-title :section="$section"/>
<!-- or with a specific heading level -->
<x-site-section-title :section="$section" level="3"/>

Image

这是一个图像组件，渲染一个响应式的 spatie 媒体模型。该组件接受一个媒体模型、一个区域模型或一个位模型作为属性。该组件没有样式。您可以通过在 CSS 中定义 'site-image' 类来对其进行样式设计。如果未提供媒体模型，则组件将渲染一个占位符 SVG 图像。

属性

• media (Media)：媒体模型实例（可选）（media、section 或 bit 至少提供一个）
• section (Section)：区域模型实例（可选）（将渲染区域的图像 - 如果有的话）
• bit (Bit)：位模型实例（可选）（将渲染位的图像 - 如果有的话）

<x-site-image :media="$media"/>
<!-- or -->
<x-site-image :section="$section"/>
<!-- or -->
<x-site-image :bit="$bit"/>

Nav

这是一个基本的导航组件，渲染一个响应式的网站导航栏。该组件接受一个 NavItemCollection 作为属性（NavItem 实例的集合）。该组件有一些基本样式，但您可以通过发布 CSS 文件并覆盖默认样式来对其进行样式设计。

属性

• items (NavItemCollection|array)：一组 AntonioPrimera\SiteComponents\ViewModels\NavItem 实例

或者，您可以通过继承 Nav 组件类并重写 navItems() 方法来提供导航栏的导航项。

<x-site-nav :items="$navItems"/>
<!-- or, if you inherited the Nav class, in a local View/Components/Nav class and defined the navItems inside -->
<x-nav/>

贡献

请随时通过创建拉取请求为此包做出贡献。但请记住以下准则

• 遵循Laravel编码风格
• 为您的代码编写测试（如果适用）并确保它们通过
• 记录您的代码并更新README.md文件
• 保持包的简单性和专注于主要目标：为Laravel网站提供可重用的组件

许可证

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