README

使用 Bootstrap 4 创建的 SilverStripe 主题，提供“现代”的外观。具有以下功能：

1. 全宽图像
2. 现代的图片画廊
3. 博客页面和帖子的样式
4. 主菜单中的下拉导航

外观

安装

通过 composer 安装

composer require ilateral/silverstripe-modern

要求

此主题广泛使用 ilateral\silverstripe-deferedimages 模块以及 heyday/silverstripe-responsive-images 模块。为了正确运行，您需要将一些额外的配置添加到您的项目中（如下所述）。

支持的页面类型

默认情况下，此主题提供以下页面类型的模板以供支持：

1. 页面
2. 博客及博客帖子（官方博客模块）
3. 子中心页面（i-lateral/silverstripe-child-hub-page）
4. 用户表单
5. 画廊中心/页面（i-lateral/silverstripe-gallery）

设置

此主题对您的项目设置有一些假设

1. 在所有页面上均有特色图像

默认情况下，FeaturedImage 在博客中可用，但您还需要将以下代码添加到您的 Page.php 中

class Page extends SiteTree
{
    private static $has_one = {
        'FeaturedImage' => Image::class
    }
}

此主题中的每个页面模板都支持 FeaturedImage，因此添加特色图像到所有页面将有助于发挥最佳效果。

您还可以依赖模块，例如 i-lateral/silverstripe-featuredimage

2. 图像大小配置

如上所述，此模块使用 heyday/silverstripe-responsive-images 模块。您需要将一些额外的 YML 配置添加到您的项目中以定义有效的图像大小，否则您将遇到错误

---
Name: myimages
After: 'silverstripe-responsive-images/*'
---
Heyday\ResponsiveImages\ResponsiveImageExtension:
  default_method: FocusFill
  sets:
    FullwidthBanner:
      arguments:
        '(min-width: 1200px) and (min-device-pixel-ratio: 2.0)': [3840, 1500] # xl
        '(min-width: 1200px)': [1920, 750]
        '(min-width: 992px) and (min-device-pixel-ratio: 2.0)': [2400, 1200] # lg
        '(min-width: 992px)': [1200, 600]
        '(min-width: 768px) and (min-device-pixel-ratio: 2.0)': [1948, 1100] # md
        '(min-width: 768px)': [992, 600]
      default_arguments: [540, 750] # xs
    ContentBanner:
      arguments:
        '(min-width: 1200px) and (min-device-pixel-ratio: 2.0)': [2400, 1200] # xl
        '(min-width: 1200px)': [1200, 600]
        '(min-width: 992px) and (min-device-pixel-ratio: 2.0)': [1948, 1000] # lg
        '(min-width: 992px)': [992, 500]
        '(min-width: 768px) and (min-device-pixel-ratio: 2.0)': [1536, 1000] # md
        '(min-width: 768px)': [768, 500]
      default_arguments: [540, 540] # xs

注意：这些都是默认值，您可以根据项目需求修改这些大小。此外，此模块中提供了一个此类配置的示例。

横幅图像/标题

此主题将标题、导航路径和任何特色图像加载到 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）或者直接将此主题添加到项目的仓库中，请与该主题一起工作。首先导航到主题目录

# 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 和/或 编辑器 在 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 执行代码风格检查并压缩编译后的代码。