README

此模块用于提供一些便捷的块，以便快速为项目提供一些有用的功能

如何使用

选择要使用的块

默认情况下，安装此模块将启用模块内的所有块。如果某些块不是必需的，可以通过 yml 配置来禁用它们

Page:
  disallowed_elements:
    - SilverStripe\HandyBlocks\CallToActionBlock

模板

此模块为每个块提供基础模板。每个块的模板也应用了部分缓存。如果您想使用自定义模板或不想在块级别进行部分缓存，只需覆盖模板以使用自己的模板

CSS

此模块还为每个块提供 CSS 文件。如果您想使用这些文件，有几种方法可以包含这些 CSS 文件

要求主 dist 文件

如果您想快速启动，这是推荐的方法

// PageController.php

protected function init()
{
    parent::init();
    \SilverStripe\View\Requirements::css('scott1702/silverstripe-handyblocks:client/dist/main.css');
}

导入主 .scss 文件

这是一种将 CSS 拖入自己的构建链的好方法，因为它只生成一个 CSS 文件，并允许您覆盖任何变量以适应您的项目

// Your main.scss file in your project
@import 'variables'; // Import your own variables first to override handyblocks variables

@import '../vendor/scott1702/silverstripe-handyblocks/client/src/main';

独立导入每个块的 .scss 文件

// Your main.scss file in your project
@import 'variables'; // Your own variables/mixins will have to match the values used in each scss file

@import '../vendor/scott1702/silverstripe-handyblocks/client/src/blocks/cta-block';

陷阱

此模块中存在一些可能让您感到意外的模式，因此在此列出以供参考

自定义元素持有者

此模块中的所有块都使用自定义 ElementHolder 以应用不同的样式变体，可以覆盖 HandyElementHolder.ss 模板，或者您可以使用 yml 配置调整每个块的持有者以返回默认值。

SilverStripe\HandyBlocks\CallToActionBlock:
  controller_template: 'ElementHolder'

每个模板中的容器

为了使每个变体的颜色延伸到边缘，在 HandyElementHolder.ss 中有一个 <div class="container"> 元素。如果在页面级别而不是块级别应用了次要容器，这将破坏样式。

CSS 使用 em 单位

CSS 中的 em 值假定 1em 等于 10px，因此每个块都应用了 10px 的字体大小。

scott1702 / silverstripe-handyblocks

维护者

详情