README

使用 Bootstrap 4 和 webpack 构建，并类似默认 silverstripe/simple-theme 风格的简单 SilverStripe 主题。

外观

安装

通过 composer 安装

# composer require "ilateral/silverstripe-bootstrap-4"

特色图片

所有页面模板默认支持 $FeaturedImage（用作英雄图片/横幅）。

您可以为页面添加 FeaturedImage，或者依赖模块，如 i-lateral/silverstripe-featuredimage

横幅图片/标题

此主题将标题、导航路径和任何特色图片加载到 Banner 包含中。这意味着您可以将横幅独立于网站主要 Layout 进行分离和样式化。

您还可以通过在页面或控制器中设置 FullWidthBanner 为 true 来使横幅跨越整个网站宽度，例如

class PageController extends ContentController
{
    public function getFullWidthBanner()
    {
        return true;
    }
}

页面 Layout

随着更复杂网站需要更复杂的标记，$Layout 变量被拆分为单独的包含（由 Page.ss 主模板调用）。

这允许在不修改核心 Page.ss 主模板的情况下覆盖和修改布局（这允许略微更平滑的升级路径）。

Webpack

核心 CSS/JS 通过 webpack 转译和压缩，所有 bootstrap 类都注入到 webpack 包中。

如果您想使用 webpack，您需要安装 Yarn

直接编辑此主题

如果您不使用版本控制（例如：git）或将此主题直接添加到项目的 repo 中，请与该主题一起工作。首先导航到主题目录

# cd /path/to/my/project/themes/bootstrap

现在安装依赖项

# yarn install

这将向您的主题添加 node_modules 并您可以使用 webpack 转译依赖项

# yarn dev
# yarn build

使用子主题

从 SilverStripe 4 开始，您可以使用子主题扩展此主题，您可以使用 webpack 将此主题的 SCSS/JS 包含到您自己的自定义主题中。

步骤 1：创建您的主题 从以下结构开始创建主题（您可以从父主题中复制 package.json 和 webpack.*.js）

/themes/custom
    - src
        - javascript
            - script.js
        - scss
            - _variables.scss
            - mystyles.scss
            - bundle.scss
            - editor.scss
    - package.json
    - webpack.common.js
    - webpack.dev.js
    - webpack.prod.js

步骤 2：安装依赖项 如上所述，您必须运行以下命令

# cd /path/to/project/themes/custom
# yarn install

步骤 3：设置您的包和/或编辑器 在 bundle.scss 中，您可以导入您自己的变量覆盖和自定义样式，并通过添加以下内容将其内联到父主题中

themes/custom/src/scss/bundle.scss

@import "../../node_modules/bootstrap/scss/functions";

@import "global/fonts";
@import "global/variables";

/**
 * Parent theme includes. Enable, re-name as required
 * to custom parent theme
 */
//@import '../../../[THEME]/src/scss/global/variables';

@import "../../node_modules/bootstrap/scss/variables";

/**
 * Import core bootstrap modules (only two provided as an example)
 */
@import "../../node_modules/bootstrap/scss/mixins";
@import "../../node_modules/bootstrap/scss/root";

/**
 * Parent theme imports (enable, re-name as required)
 */
@import '../../../[PARENTTHEME]/src/scss/global/typography';
@import '../../../[PARENTTHEME]/src/scss/global/global';
@import '../../../[PARENTTHEME]/src/scss/global/header';
@import '../../../[PARENTTHEME]/src/scss/global/body';
@import '../../../[PARENTTHEME]/src/scss/global/footer';
@import '../../../[PARENTTHEME]/src/scss/global/misc';
@import '../../../[PARENTTHEME]/src/scss/layout/homepage';

/**
 * Import custom styles
 */
@import "mystyles.scss";

注意：您可能还想在 editor.scss 中添加类似的内容

步骤 4（可选）：添加 JS 如果您需要添加自定义 JavaScript，您可以将其添加到主题的 script.js 中或添加额外的 JS 文件。

步骤 4：检查 Webpack 配置 主题的 webpack 配置将用于转译和压缩所有 SCSS/JS。

在大多数情况下，您不需要更改此配置，但如果您添加了新的 JS 文件或进行了更复杂的变化，您可能需要更新映射。

步骤 5：运行构建 一切准备就绪后，您可以转译和压缩您的 CSS/JS。您可以通过以下方式执行此操作

# yarn dev

或

# yarn build

yarn dev 很快，执行较少的检查且不压缩，适合开发。

yarn build 执行 linting 并压缩编译后的代码。