vs.zopeskel.diazo 1.0

介绍

ZopeSkel模板，允许对 Bootstrap 主题进行单独调整。因此，它使用z3c.jbot用z3c.jbot覆盖现有模板。

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

要求

• 这个包只兼容 ZopeSkel<3.0。

安装

将这些行添加到您的开发构建中：

[buildout]
parts =
    zopeskel

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

重新运行构建，例如：

$ ./bin/buildout -c devel.cfg

创建添加

正在开发的附加组件通常在您构建的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. 更改引导 css 指令和字体：

   1. 您可以自定义引导较少的变量，例如在 src/my.theme/my/theme/bower_components/bootstrap/less/variables.less中。

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

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

   4. 最后，可以重新编译较少的文件，例如：

      $ 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. 更改引导网格：

   初始网格在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文件夹来轻松更改模板，例如从egg/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)

• 初始发行。