README

一个简单、风格化、全宽的主题，使用Bootstrap 4在上部固定头部/导航栏，具有以下功能：

1. 全宽图片
2. 现代的luuking画廊
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）或已直接将此主题添加到项目的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";

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