README

SilverStripe v4 的替代默认主题，基于

• Webpack v3（包括 开发服务器）
• Bootstrap v4
• SilverStripe v4
• Font Awesome
• Modernizr

还包括响应式字体样式和表单字段模板覆盖，以使用 Bootstrap 表单样式。

内容

• 需求
• 安装
• 配置
• 使用
• 问题
• 贡献
• 归属
• 维护者
• 许可

需求

• SilverStripe 框架 v4

安装

安装通过 Composer 进行

$ composer require praxisnetau/silverstripe-vanilla

如果您想修改主题，您还需要使用 Yarn（或 NPM）安装主题依赖项

$ cd themes/vanilla
$ yarn install

配置

要使用此主题与您的 SilverStripe 应用程序一起使用，您需要通过 YAML 配置 SSViewer

SilverStripe\View\SSViewer:
  themes:
    - 'vanilla'
    - '$default'

使用

此主题包含三种与源文件一起工作的模式

$ yarn watch  # monitors source files for changes and rebuilds automatically
$ yarn build  # prepares JS/CSS bundles for deployment to production server
$ yarn start  # runs webpack-dev-server to automatically update browser

监控

使用此模式，您的源文件将监控更改，并在检测到更改时自动重建主题包

$ yarn watch

请注意，在使用此模式时，您需要手动刷新浏览器以查看更改。

构建

当您的主题准备部署到生产环境时，您可以运行 build 来准备您的 JS/CSS 包。Webpack 将相应地优化和压缩包

$ yarn build

启动

在此模式下，webpack-dev-server 将启动以监控您的源文件更改，并将自动更新浏览器，无需刷新页面

$ yarn start

此模式比其他模式更复杂一些。为了使用此模式，您需要通知 SilverStripe 从开发服务器加载主题包，默认情况下运行在 http://localhost:8080。

打开 templates/Page.ss 文件，并查找这些行

<% require themedCSS('production/styles/bundle') %>
<%-- require css('http://localhost:8080/production/styles/bundle.css') --%>

<% require themedJavascript('production/js/bundle') %>
<%-- require javascript('http://localhost:8080/production/js/bundle.js') --%>

要使用开发服务器，您需要取消注释 http://localhost:8080 行，并注释掉 themedCSS 和 themedJavascript 行。

当您的主题准备就绪可用于生产时，您需要 build 包，并恢复到 themedCSS 和 themedJavascript 行。

您可以通过向 PageController 类中添加一些逻辑来自动化整个流程，但这超出了此存储库的范围！

问题

请使用 GitHub 问题跟踪器 进行错误报告和功能请求。

贡献

您的贡献将受到欢迎，以帮助使此项目更好。请参阅 contributing 了解更多信息。

归属

• 使用由 Font Awesome 的 Dave Gandy。
• 使用由 Bootstrap 的 Bootstrap 作者 和 Twitter, Inc。
• 使用由 webpack 和 webpack 开发服务器，作者为 Tobias Koppers、Kees Kluskens 以及 众多贡献者。

维护者

许可

BSD-3-Clause © Praxis Interactive