README

一个基于 Bootstrap 主题的 SilverStripe 主题，与我们的商城模块兼容。

安装

• 通过 Composer 安装附加组件（composer require i-lateral/silverstripe-commerce-theme master）或从存储库下载副本。
• 在您的 SilverStripe 项目中的 themes/ 目录内创建一个文件夹，用于存储您的自定义主题。
• 如果您已下载附加组件，请将存储库中的所有文件复制到该目录。
• 如果您已通过 Composer 安装附加组件，请将 themes/bootstrap-commerce 目录中的所有文件复制到您的自定义主题目录。
• 在您的主题目录内运行 bower install。
• 更新默认页面控制器中的 init() 方法并添加额外的方法。

有关安装的更多信息，请参阅下面的配置。

配置

默认的 bootstrap 主题包括所有 CSS、javascript、LESS 和模板文件。建议您创建一个新的主题并将所有文件从 bootstrap 目录复制到您自己的自定义主题目录。这样，如果对 SilverStripe Bootstrap 主题附加组件进行了更改，您将更容易更新您的主题。

默认情况下，主题使用合并和压缩的 CSS 和 JS。如果您想自定义外观，应在 CSS 目录中的 custom.css 文件中添加您的自定义 CSS。

如果您想使用核心 less 文件并完全自定义此主题，您需要做一些事情才能开始

首先，您需要从您的主题目录中运行 bower install 命令。主题需要您使用 Bower 来管理 jQuery、Modernizr、Bootstrap 和 Font Awesome。这样做的好处是，如果这些组件中的任何一个发生变化，您可以自己升级它们，而无需依赖于 SilverStripe Bootstrap 主题附加组件的更新。如果您需要这些组件的特定版本，请在安装组件之前更新 bower.json 配置文件。

其次，您需要在查看页面之前运行 LESS 文件的初始编译。要从 LESS 编译 CSS，您需要提供自己的 LESS 预处理器。

对于 Mac 用户，建议使用 CodeKit。对于 Windows 用户，请尝试 Prepros。您还可以使用 SilverStripe 的 lesscompiler 模块

请确保设置结果 CSS 文件以压缩形式用于生产。

最后，您需要更新默认的页面类（/mysite/code/Page.php），以便 SilverStripe 控制所有 JavaScript 和 CSS 的优化。为此，请在您的 Page_Controller 或（您将使用的任何默认控制器）中的 init() 方法中更新以下代码

    public function init() {
        parent::init();
        $ThemeDir =  $this->ThemeDir();
        Requirements::set_write_js_to_body(true);
        Requirements::set_combined_files_folder($ThemeDir.'/_requirements');
        Requirements::combine_files(
            'site.css',
            array(
                $ThemeDir.'/css/site.css',
            )
        );
        Requirements::javascript("//ajax.googleapis.ac.cn/ajax/libs/jquery/2.1.0/jquery.min.js");
        Requirements::combine_files(
            'site.js',
            array(
                $ThemeDir.'/javascript/libs.js',
                $ThemeDir.'/bower_components/matchheight/dist/jquery.matchHeight-min.js',
                $ThemeDir.'/bower_components/bootstrap/js/affix.js',
                $ThemeDir.'/bower_components/bootstrap/js/alert.js',
                $ThemeDir.'/bower_components/bootstrap/js/button.js',
                $ThemeDir.'/bower_components/bootstrap/js/carousel.js',
                $ThemeDir.'/bower_components/bootstrap/js/collapse.js',
                $ThemeDir.'/bower_components/bootstrap/js/dropdown.js',
                $ThemeDir.'/bower_components/bootstrap/js/modal.js',
                $ThemeDir.'/bower_components/bootstrap/js/tooltip.js',
                $ThemeDir.'/bower_components/bootstrap/js/popover.js',
                $ThemeDir.'/bower_components/bootstrap/js/scrollspy.js',
                $ThemeDir.'/bower_components/bootstrap/js/tab.js',
                $ThemeDir.'/bower_components/bootstrap/js/transition.js',
                $ThemeDir.'/javascript/main.js'
            )
        );
    }

注意：请在“要求”中仔细注意加载的jQuery版本！默认情况下，它设置为在此附加组件上次更新时的当前jQuery版本。如果您需要更改它，请确保在您的init()方法中进行更改，以匹配您使用Bower加载的任何版本。

当站点环境处于实时模式时，所有CSS文件都会合并并保存到/themes/{$ThemeDir}/_requirements/site.css。JavaScript会合并/压缩到/themes/{$ThemeDir}/_requirements/site.js。建议您在此处添加任何其他JavaScript和CSS文件，以确保它们得到适当的优化，从而提高性能。请注意，只有JavaScript会进行压缩。虽然CSS文件会被连接，但您需要自己压缩CSS文件或使用类似Minify CSS Module的东西来实时压缩CSS文件。

除了对init()方法进行更改外，我还建议向您的控制器添加一个额外的方法

    public function Copyright($startYear = "", $separator = "-") {
        $currentYear = date('Y');
        if(!empty($startYear)) {
            $output = ($startYear>=$currentYear ? $currentYear : $startYear.$separator.$currentYear);
        } else {
            $output = $currentYear;
        }
        return $output;
    }

这是一个简单的版权方法，用于在页脚模板中返回当前年份的完整版权。

注意：要使帐户菜单在页脚中显示，需要向siteconfig添加以下函数。 ... public function getAccountMenu() { $controller = Users_Account_Controller::create();

    return $controller->getAccountMenu();
}

...

链接

• SilverStripe
• Twitter Bootstrap
• Font Awesome

变更日志

变更日志