README

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

1. 全宽图片
2. 现代的luuking图库
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

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

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

此主题中的每个页面模板都支持FeaturedImage，因此为了最大限度地发挥其作用，将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）或直接将此主题添加到项目的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 和/或 编辑器 在 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";

注意：您可能还想在 toyr 的 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 执行代码检查，并压缩编译后的代码。