README

一个整合Twitter Bootstrap和Font Awesome的SilverStripe Bootstrap主题

安装

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

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

配置

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

为了使用此主题，您需要做一些事情才能开始

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

其次，您需要在查看页面之前运行LESS文件的初始编译。要编译CSS文件，您需要提供自己的LESS预处理器。对于Mac用户，建议使用CodeKit。对于Windows用户，您可以尝试Prepros。请确保将其设置为将生成的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/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'
            )
        );
    }

注意：请仔细注意Requirements中加载的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;
    }

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

错误跟踪器

错误在github.com上跟踪。您可以自由提出建议并为代码库做出贡献。

链接

• SilverStripe
• Twitter Bootstrap
• Font Awesome

变更日志

变更日志