README

A HTML5 Twitter Bootstrap 3.1 Magento 1.8 Boilerplate Template

阅读博客文章或查看演示获取更多信息。

安装

安装此模板有三种方法。到目前为止，使用Composer是最容易维护的。

Composer

使用此方法的前提是在您的系统中已安装Composer。

首先，在 Magento 的根目录下创建一个 composer.json 文件，并确保它包含以下内容

{
    "repositories": [
        {
           "type": "vcs",
           "url": "https://github.com/magento-hackathon/magento-composer-installer"
        }
    ],
    "require": {
        "magento-hackathon/magento-composer-installer": "*",
        "webcomm/magento-boilerplate": "2.0.x-dev"
    },
    "extra": {
        "magento-root-dir": "./",
        "magento-deploystrategy": "copy"
    },
    "config": {
        "preferred-install": "dist"
    }
}

完成安装 Composer 依赖项和几个可选增强

cd your-project/
composer install

# If you wish to autoload composer files
cp vendor/webcomm/magento-boilerplate/index.php .

# If you wish to automatically set *.dev domains to developer mode
cp vendor/webcomm/magento-boilerplate/.htaccess .

# If you wish to run your own theme, replace "mytheme" with the name of your theme
cp -Rf vendor/webcomm/magento-boilerplate/app/design/frontend/boilerplate app/design/frontend/mytheme
cp -Rf vendor/webcomm/magento-boilerplate/skin/frontend/boilerplate skin/frontend/mytheme

现在您应该有一个新的文件夹 vendor/webcomm/magento-boilerplate，其中包含我们的存储库和 Magento 中的新符号链接。您可以使用 composer update 更新到每个新版本。

Git

首先，将我们的仓库克隆到文件夹中

git clone git@github.com:webcomm/magento-boilerplate.git your-project

其次，将支持的 Magento 版本复制到仓库上方

wget http://www.magentocommerce.com/downloads/assets/1.8.1.0/magento-1.8.1.0.tar.gz
tar -zxvf magento-1.8.1.0.tar.gz
mv -f magento/* your-project/

您可以使用 git pull 更新到每个新版本。

ZIP 下载

1. 从http://www.magentocommerce.com/download下载 Magento。
2. 从https://github.com/webcomm/magento-boilerplate/archive/master.zip下载我们的仓库。

合并文件夹，然后您就可以使用了。

开发

在我们的模板主题中开发相当简单。基本上有两种可能的方法

1. 复制或重命名模板主题并开始编辑它。
2. 在 boilerplate 包下创建一个新的“子”主题，并且只编辑您需要编辑的内容。

第二种方法的优势在于更新模板主题非常容易。您只需用新文件替换 boilerplate/default 下的文件，并检查是否需要将一些更改复制到您编辑的文件中。使用第一种方法更新主题是个噩梦。第一种方法的优势在于您仍然可以构建自定义子主题，如 mytheme/xmas。无论如何，使用Aoe_DesignFallback，这也仍然可能。

复制/重命名模板主题

开始之前，您应该复制我们的主题，或者通过以下操作将主题重命名为有用的名称：

cp -Rf app/design/frontend/boilerplate app/design/frontend/mytheme
cp -Rf skin/frontend/boilerplate skin/frontend/mytheme

一旦您复制或重命名了主题，您需要将其添加到.gitignore文件的底部。

!/app/design/frontend/mytheme
!/skin/frontend/mytheme

从现在开始，您需要通过Magento的设计配置安装网站并启用主题。首先，像其他任何Magento安装一样安装您的网站。关于这一点，有很多指南。然后，访问系统 > 配置 > 设计 > 包，将包从默认更改为您命名主题的内容（例如mytheme）。

在boilerplate包下构建新的“子”主题

开始时，您应该在app/design/frontend/boilerplate/mytheme和skin/frontend/boilerplate/mytheme下创建一个新的文件夹，文件夹名称为您的主题名称（例如mytheme）。

从现在开始，您需要通过Magento的设计配置安装网站并启用主题。首先，像其他任何Magento安装一样安装您的网站。关于这一点，有很多指南。然后，访问系统 > 配置 > 设计，将包从默认更改为boilerplate。另外，将翻译、模板、皮肤、布局和默认更改为您命名的主题内容（例如mytheme）。

我们在开发过程中喜欢依赖性管理由我们负责，并使用任务运行器将它们编译成CSS/JavaScript文件，然后提供给用户。您不必这样做，但这是一种节省时间的好方法，即使开始时可能需要一点学习曲线。

资产依赖性管理和自动编译

首先，需要安装Bower和gulp.js（两者都是NodeJS应用程序）。

要安装Bower依赖项（因为它们对于每个人来说都不是必需的，所以主题中不包含），您需要使用Bower。

cd skin/frontend/mytheme/default
bower install

全局安装gulp.js后，打开您的终端，更改目录到您的主题并执行gulp

cd skin/frontend/mytheme/default
npm install
gulp

就是这样。从现在开始，您对LESS文件所做的更改将自动编译成CSS，同样JavaScript也是如此。刷新您的页面以查看更改！

添加新的Bootstrap组件

此主题不包含所有Bootstrap CSS和JavaScript。原因是，大多数网站不需要所有组件，因此提供多于所需的内容会膨胀网站。我们只包括运行此模板主题所需的文件。

要添加新的Bootstrap样式，只需打开less/style.less。从那里，您可以直接导入Bootstrap文件，或者导入自己的文件，这些文件反过来又导入Bootstrap的。例如，将以下内容添加到less/style.less

@import "media.less"; /* Relative to less/style.less */

然后在less/media.less

/* In less/media.less */
@import "../bower_components/bootstrap/less/media.less"; /* Relative to less/media.less */

.media {
    /* Your custom overrides go below the call to Bootstrap's styles */
}

您可以选择导入不仅仅是Bootstrap的LESS/CSS文件。尽您所愿这样做，这是良好的实践。

要添加新的JavaScript文件，打开gulpfile.js。gulp.js被分成多个任务。其中一个任务是js任务。在其内部，您将看到一些JavaScript文件列出。如果您需要更多Bootstrap文件（或者任何JavaScript文件），只需将它们添加到列表中。

// ...
.src([
    'bower_components/jquery/jquery.js',
    'bower_components/bootstrap/js/transition.js',
    'bower_components/bootstrap/js/collapse.js',
    'bower_components/bootstrap/js/carousel.js',
    'bower_components/bootstrap/js/dropdown.js',
    'bower_components/bootstrap/js/modal.js',
    // Add new files here
    'js/script.js'
])
// ...

常见问题解答（FAQs）

1. 通知功能没有工作？ - 请检查您没有在一个无头（仅命令行）服务器上运行 gulp，例如远程web服务器或Vagrant盒子。Windows可能需要修改您的gulpfile.js和package.json文件才能正常工作。

手动开发（无gulp.js）

如果您想手动开发网站，可以随意编辑dist/css和dist/js目录下的任何文件。如果您未来不想使用gulp.js，这样做没有坏处。请注意，如果您决定使用gulp.js进行编译，您将丢失手动更改的内容。

贡献

此项目的git仓库可以在http://github.com/webcomm/magento-boilerplate找到，示例可以在http://magentoboilerplate.webcomm.com.au找到。

我们认为我们已经为开发Magento网站创建了一个非常好的入门主题。我们选择Twitter Bootstrap 3并不是因为我们想让所有网站看起来像Bootstrap，我们也不喜欢这样的风格。Bootstrap创建了一个优秀的可重用组件库，您可以用它来创建真正独特的东西。

Boilerplate主题存在的原因是让您花更少的时间在准备开始高效工作上，通过移除重复的初始步骤。我们已经处理了枯燥的部分，这样您可以专注于独特之处。

如果您喜欢我们的工作，我们并不是为了您的钱，而是我们非常愿意看到您的pull request或甚至是关于如何改进这个项目的issue。最终，如果我们都能为很多人创造真正有用的东西，那么每个人都能赢，我们都能早点回家。