README

一个基础模块，适用于所有 S. Group 网站，包括一些助手和脚手架。

离线开关

有一个用于将预览站离线的硬离线设置，这比 Craft 的离线行为更直接，因为我们希望防止任何人登录 Craft（以避免在不同环境之间混淆）。

在您的 general.php 配置中控制它。

<?php

return [
    'staging' => [
        'isOffline' => true,
    ],
];

Vite & 资源

添加了一个 @resource 别名，用于在模板中使用。如果开发服务器正在运行，则将解析为 @webroot/../resources；如果不运行，则解析为 @webroot/dist。我们将在 webroot 外部存储静态资产文件。

我们还提供了一个 resource() Twig 函数，它可以做类似的事情，但解析到您的 Vite 插件设置。devServerPublic 如果开发服务器正在运行，或者 serverPublic 如果没有运行。实际上，这分别解析为 https://:3000/ 和 /dist。

Twig 中的资源

通过这些，您可以在模板中引用资源，如 JS、CSS、图片和字体——任何在您的模板中 /resources 文件夹中的东西。例如，一个常见的场景是想要在 Twig 模板中包含图片。您可以使用以下选项来实现这一点。

{# Use the `@resources` alias #}
<img src="{{ alias('@resource/img/logo.png') }}">

{# Or use the `resource()` Twig function #}
<img src="{{ resource('/img/logo.png') }}">

如果您需要内联 SVG，建议使用 svg() Twig 函数。使用此函数时，您只有一个选项，即使用别名。

{{ svg('@resource/img/logo.svg') }}

基础模块

Yii 的模块相对较瘦，我们失去了 Craft 插件免费获得的许多样板代码。我们在 base/Module 中添加了这些。您创建的每个 Yii 模块都应该扩展这个，而不是 Yii 的模块类。

use sgroup\sitemodule\base\Module;

class SiteMigration extends Module
{

Twig 扩展

我们提供了一系列 Twig 扩展，以更好地开发模板。

`svgPlaceholder($width, $height = null)`

给定宽度和高度，这将生成一个透明的 SVG。这通常用于当使用懒加载时，<img> 标签的 src 属性。这创建了正确的图像尺寸，同时真实的图像正在懒加载。这样做可以防止在从零尺寸的图像跳转到正确尺寸时出现明显的“跳动”。

`getFormattedPhone($value)`

一个基于澳大利亚的意见，电话格式化器。向它扔任何电话号码，它将国际化它，处理空格和区号，准备好在 <a href="tel:" 中使用。

`getVideo($asset, $settings = [])`

给定一个资产，这将渲染一个 <iframe> 或 <video>。它处理嵌入式资产插件视频或真实上传的视频。对于任何基于 YouTube 的嵌入式资产，它将渲染一个 <iframe> 并嵌入视频 URL。

您也可以传递一些属性，这些属性将用于 URL（作为 URL 编码的参数）或 <video> 属性。您可以包括任何属性，但以下是一些值得注意的

`getImg($image, $transform = null, $lazyload = false, $attributes = [], $sizes = 'default')`

这将返回一个预配置了多个选项的 <img> 标签。

默认情况下，我们使用 srcset 提供大小 ['1x', '1.5x', '2x', '3x']。

{% set asset = craft.assets.id(46).one() %}

{# Renders a small image #}
{{ getImg(asset, 'small') }}

<img src=".../image.jpg" srcset=".../image.jpg, .../image.jpg 1.5x, .../image.jpg 2x, .../image.jpg 3x" width="400" height="400" alt="Title" />

{# Renders a small image, lazyloaded #}
{{ getImg(asset, 'small', true) }}

<img class="lazyload" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAwIiBoZWlnaHQ9IjQwMCIgdmlld0JveD0iMCAwIDQwMCA0MDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTAgMGg0MDB2NDAwSDB6IiBmaWxsPSJub25lIj48L3BhdGg+PC9zdmc+" width="400" height="400" alt="Title" data-src=".../image.jpg" data-srcset=".../image.jpg, .../image.jpg 1.5x, .../image.jpg 2x, .../image.jpg 3x" />

{# Renders a small image with extra classes and attributes #}
{{ getImg(asset, 'small', true, { class: ['testing', 'some'], 'data-attr': 'val' }) }}

<img class="lazyload testing some" data-attr="val" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAwIiBoZWlnaHQ9IjQwMCIgdmlld0JveD0iMCAwIDQwMCA0MDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTAgMGg0MDB2NDAwSDB6IiBmaWxsPSJub25lIj48L3BhdGg+PC9zdmc+" width="400" height="400" alt="Title" data-src=".../image.jpg" />

{# Renders a small image, lazyloaded, no `srcset` #}
{{ getImg(asset, 'small', true, [], false) }}

<img class="lazyload" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAwIiBoZWlnaHQ9IjQwMCIgdmlld0JveD0iMCAwIDQwMCA0MDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTAgMGg0MDB2NDAwSDB6IiBmaWxsPSJub25lIj48L3BhdGg+PC9zdmc+" width="400" height="400" alt="Title" data-src=".../image.jpg" />

{# Renders a small image - no `srcset` #}
{{ getImg(asset, 'small', false, [], false) }}

<img src=".../image.jpg" width="400" height="400" alt="Title" />

{# Using an object instead of a transform handle #}
{{ getImg(asset, { mode: 'crop', width: 100, height: 200 }) }}

<img src=".../image.jpg" width="100" height="200" alt="Title" />

焦点点

如果在图像上定义了焦点，它将通过内联样式规则输出。

<img src=".../image.jpg" style="object-fit: cover; object-position: 86.7% 85.88%;" />

`getImgAttr()`

这与 getImg() 有相同的选项，除了 $attributes。这将返回一个对象，您可以使用它来应用自己的属性。理想情况下，您会使用 {{ attr() }} 函数。

{% set asset = craft.assets.id(47).one() %}

{# Renders a small image, lazyloaded #}
<img class="img-cover" {{ attr(getImgAttr(asset, 'small')) }} />

<img class="img-cover" src=".../image.jpg" srcset=".../image.jpg, .../image.jpg 1.5x, .../image.jpg 2x, .../image.jpg 3x" width="400" height="400" alt="Title" />

{# Renders a small image, lazyloaded #}
<img class="lazyload img-cover" {{ attr(getImgAttr(asset, 'small', true)) }} />

<img class="lazyload img-cover" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAwIiBoZWlnaHQ9IjQwMCIgdmlld0JveD0iMCAwIDQwMCA0MDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTAgMGg0MDB2NDAwSDB6IiBmaWxsPSJub25lIj48L3BhdGg+PC9zdmc+" width="400" height="400" alt="Title" data-src=".../image.jpg" data-srcset=".../image.jpg, .../image.jpg 1.5x, .../image.jpg 2x, .../image.jpg 3x" />

{# Renders a small image, lazyloaded, no `srcset` #}
<img class="lazyload img-cover" {{ attr(getImgAttr(asset, 'small', true, false)) }} />

<img class="lazyload img-cover" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAwIiBoZWlnaHQ9IjQwMCIgdmlld0JveD0iMCAwIDQwMCA0MDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTAgMGg0MDB2NDAwSDB6IiBmaWxsPSJub25lIj48L3BhdGg+PC9zdmc+" width="400" height="400" alt="Title" data-src=".../image.jpg" />

{# Renders a small image #}
<img class="img-cover" {{ attr(getImgAttr(asset, 'small', false)) }} />

<img class="img-cover" src=".../image.jpg" srcset=".../image.jpg, .../image.jpg 1.5x, .../image.jpg 2x, .../image.jpg 3x" width="400" height="400" alt="Title" />

{# Renders a small image, no `srcset` #}
<img class="img-cover" {{ attr(getImgAttr(asset, 'small', false, false)) }} />

<img class="img-cover" src=".../image.jpg" width="400" height="400" alt="Title" />

您会在我们使用 lazyloading 的实例上注意到需要手动包含 lazyload 类，因为我们自己渲染类。或者，您可以这样做：

{% set attributes = getImgAttr(asset, 'small', false, false) | merge({
    class: 'img-cover',
}) %}

<img {{ attr(attributes) }} />

这将结合模板中的 img-cover 类和函数中的 lazyload 类。

`getBg()`

这几乎与 getImg() 以完全相同的方式运行，但返回一个 <div> 元素。

{# Renders a banner image #}
{{ getBg(asset, 'banner', false, { class: 'img-cover aspect aspect-21x9' }) }}

<div class="img-cover aspect aspect-21x9" style="background-image: url('../image.jpg');"></div>

{# Renders a banner image, lazyloaded #}
{{ getBg(asset, 'banner', true, { class: 'img-cover aspect aspect-21x9' }) }}

<div class="lazyload img-cover aspect aspect-21x9" data-bgset="../image.jpg, ../image.jpg 1.5x, ../image.jpg 2x, ../image.jpg 3x"></div>

{# Renders a banner image, no `srcset` #}
{{ getBg(asset, 'banner', false, { class: 'img-cover aspect aspect-21x9' }, false) }}

<div class="img-cover aspect aspect-21x9" style="background-image: url('../image.jpg');"></div>

{# Renders a banner image, lazyloaded, no `srcset` #}
{{ getBg(asset, 'banner', true, { class: 'img-cover aspect aspect-21x9' }, false) }}

<div class="lazyload img-cover aspect aspect-21x9" data-bg="../image.jpg"></div>

焦点点