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 问题跟踪器 来报告错误和功能请求。

贡献

我们欢迎您的贡献，以帮助改进此项目。有关更多信息，请参阅 贡献。

归属

• 使用 Font Awesome，由 Dave Gandy 提供。
• 使用 Bootstrap，由 Bootstrap 作者 和 Twitter, Inc 提供。
• 使用了由 webpack 和 webpack 开发服务器，由 Tobias Koppers、Kees Kluskens 以及 许多其他贡献者 开发。

维护者

许可

BSD-3-Clause © Praxis Interactive