vs.zopeskel.diazo 1.0

简介

ZopeSkel 模板允许对Bootstrap主题进行个别适配。因此，它使用 z3c.jbot 来覆盖现有模板。

此外，您还应该使用Less变量、混入等。因此，Buildout 配置文件还将安装 Bower 和 Grunt 以重新编译bootstrap Less文件。

需求

• 此软件包仅与ZopeSkel<3.0兼容。

安装

将这些行添加到您的开发buildout中

[buildout]
parts =
    zopeskel

[zopeskel]
recipe = zc.recipe.egg
unzip = true
eggs =
    PasteScript
    ZopeSkel
    vs.zopeskel.diazo

重新运行buildout，例如

$ ./bin/buildout -c devel.cfg

创建插件

正在开发中的插件通常在buildout的 src 目录下创建。要添加名为 my.theme 的包，您可以在终端中输入以下内容

$ cd src/
$ ../bin/zopeskel bootstrap my.theme

这将创建一个具有如下目录结构的Python包

my.theme
├── bootstrap.py
├── buildout.cfg
├── docs
│   ├── INSTALL.txt
│   ├── LICENSE.GPL
│   └── LICENSE.txt
├── my
│   └── theme
│       ├── configure.zcml
│       ├── diazo_resources
│       │   ├── favicon.ico
│       │   ├── img
│       │   │   ├── apple-touch-icon-144x144-precomposed.png
│       │   │   ├── apple-touch-icon-57x57-precomposed.png
│       │   │   ├── apple-touch-icon-72x72-precomposed.png
│       │   │   ├── apple-touch-icon.png
│       │   │   └── apple-touch-icon-precomposed.png
│       │   ├── index.html
│       │   ├── manifest.cfg
│       │   ├── preview.png
│       │   ├── rules.xml
│       │   └── static
│       │       ├── css
│       │       │   └── main.css
│       │       ├── fonts
│       │       ├── img
│       │       └── js
│       │           └── main.js
│       ├── Gruntfile.js
│       ├── interfaces.py
│       ├── locales
│       ├── overrides
│       │   └── plone.app.layout.viewlets.footer.pt
│       ├── profiles
│       │   └── default
│       │       ├── browserlayer.xml
│       │       ├── cssregistry.xml
│       │       ├── jsregistry.xml
│       │       ├── metadata.xml
│       │       └── theme.xml
│       └── version.txt
├── setup.cfg
└── setup.py

生成主题

要生成主题，您可以切换到您新创建的产品并运行buildout，例如

$ cd src/my.theme
$ python bootstrap.py
$ ./bin/buildout

现在您可以在 控制面板 → 扩展 中启动实例并激活 my.theme。

自定义主题

1. 修改 Bootstrap CSS 指令和字体

   1. 您可以通过以下路径自定义 Bootstrap 的 less 变量，例如：src/my.theme/my/theme/bower_components/bootstrap/less/variables.less。

   2. 此外，您可以在以下路径编写自己的 less 指令：src/my.theme/my/theme/less/custom.less。

   3. 特殊字体可以添加到：/bower_components/bootstrap/dist/fonts/。

   4. 最后，可以使用以下方式重新编译 less 文件：

      $ cd src/my.theme/my/theme
      $ ./node_modules/bower/bin/bower install
      $ ./node_modules/grunt-cli/bin/grunt less
      $ ./node_modules/grunt-cli/bin/grunt copy

2. 修改 Bootstrap 网格

   初始网格定义在：my/theme/theme/index.html

   <div class="container">
     <div class="row">
       <aside id="column-left" class="col-md-3">
         <p>Left column</p>
       </aside>
       <article id="main" class="col-md-6" role="main">
         …
       </article>
       <aside id="column-right" class="col-md-3">
         <p>Right column</p>
       </aside>
     </div>
   </div>

   如果您想定义另一个网格，Bootstrap 提供了更多机会，请参阅 Bootstrap 网格系统。

3. 覆盖模板

   您可以通过将模板复制到 overrides 文件夹中轻松更改模板，例如，从 eggs/plone.app.layout-2.5.1-py2.7.egg/plone/app/layout/viewlets/footer.pt 复制到 src/my.theme/my/theme/overrides/plone.app.layout.viewlets.footer.pt。

变更日志

1.0 (2014-06-09)

• 初始发布。