README

使用 Bootstrap 4 创建的简单、风格化、全宽度主题，顶部带有固定头部/导航栏，具有以下特性：

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

外观

安装

通过 composer 安装

composer require ilateral/silverstripe-fancy-top-nav

要求

此主题广泛使用 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 执行代码检查并压缩编译后的代码。