README

Labcoat 是一个用于在实时网站环境中使用 Pattern Lab 内容的库。它提供以下功能：

渲染图案模板
使用 Pattern Lab UI 生成风格指南
验证模板内容

Labcoat 对 Pattern Lab 安装有以下限制：

仅支持 Twig 作为模板语言
图案只能通过部分和路径语法引用
不支持布局、宏和其他高级 Twig 功能

Labcoat 由 Pixo 创建，并采用 NCSA 许可协议发布。

Pattern Lab 由 Brad Frost 和 Dave Olsen 创建，并采用 MIT 许可协议发布。

基本用法

使用 Composer 包含 Labcoat 库

{
  "require": {
    "pixo/labcoat": "^1.0.0"
  }
}

PatternLab 类代表一个 Pattern Lab 安装。对于标准版安装，Labcoat 需要安装根目录的路径（包含 config 和 source 目录）

$labcoat = Labcoat\PatternLab::loadStandardEdition('/path/to/patternlab');

对于使用 Labcoat 默认结构的安装

$labcoat = Labcoat\PatternLab::load('/path/to/patternlab');

对于自定义配置，创建一个新的 Configuration 对象，并将其用作构造函数参数

$config = new Labcoat\Configuration\Configuration();
$config->setPatternsPath('/path/to/pattern/templates');
$labcoat = new Labcoat\PatternLab($config);

关于 Labcoat 配置的更多信息

渲染图案模板

Labcoat 包含一个用于在其他应用程序中使用图案模板的 Twig 加载器类。

$loader = new Labcoat\Twig\Loader($labcoat);
$twig = new Twig_Environment($loader, ['cache' => '/path/to/twig/cache']);

加载器支持两种包含图案方法

部分语法，即 type-name。不支持模糊匹配。
路径，相对于图案目录。文件扩展名和任何排序数字被忽略。

# These will all render the template "00-atoms/01-icons/email.twig"
print $twig->render('atoms-email');
print $twig->render('atoms/icons/email');
print $twig->render('00-atoms/01-icons/email');
print $twig->render('00-atoms/01-icons/email.twig');
print $twig->render('123-atoms/456-icons/email.twig');

# Fuzzy matching isn't supported, so this won't work
print $twig->render('atoms-em');

缓存加载器

一旦创建，加载器类可以存储在缓存中，以便在下一次请求时节省时间。如果 Memcache 可用

$makeLoaderIfNotInCache = function ($cache, $key, &$loader) {
  $labcoat = Labcoat\PatternLab::load('/path/to/patternlab');
  $loader = new Labcoat\Twig\Loader($labcoat);
};
$loader = $memcache->get('labcoat_loader', $makeLoaderIfNotInCache);
$twig = new Twig_Environment($loader);

如果正在使用 Stash

$item = $stash->getItem('labcoat/loader');
$loader = $item->get();
if ($item->isMiss()) {
  $item->lock();
  $labcoat = Labcoat\PatternLab::load('/path/to/patternlab');
  $loader = new Labcoat\Twig\Loader($labcoat);
  $item->set($loader);
}
$twig = new Twig_Environment($loader);

与其他加载器结合使用

Labcoat 加载器可以与其他加载器链式使用

$loader = new Twig_Loader_Chain([
  new Labcoat\Twig\Loader($labcoat),
  new Twig_Loader_Filesystem('/path/to/more/templates'),
]);
$twig = new Twig_Environment($loader);

创建 HTML 文档

Document 类可以将图案转换为完整的 HTML 页面

$doc = new Labcoat\Html\Document($twig->render('pages-about'));
$doc->setTitle('About Us');
$doc->includeStylesheet('/css/styles.min.css');
$doc->includeScript('/js/script.min.js');
print $doc;

生成风格指南

Labcoat 可以生成使用 Pattern Lab 接口的风格指南

$labcoat = new Labcoat\PatternLab('/path/to/patternlab');
$styleguide = new Labcoat\Styleguide\Styleguide($labcoat);
$styleguide->generate('/path/to/styleguide');

使用 PHP 的内置 Web 服务器在本地浏览风格指南（例如，在 https://:8080）

php -S 0.0.0.0:8080 -t /path/to/styleguide

报告

generate() 方法返回一个报告对象，可以打印以获取生成过程的摘要

print $styleguide->generate('/path/to/styleguide');

生成类似以下内容

443 files updated, 0 skipped, 0 removed
Generated in 1.432264 seconds

要获取风格指南文件更改的完整报告，请使用报告的 verbose() 方法

print $styleguide->generate('/path/to/styleguide')->verbose();

...
index.html
  Updated (0.60 ms)
styleguide/data/patternlab-data.js
  Updated (1.41 ms)
annotations/annotations.js
  Updated (0.52 ms)
latest-change.txt
  Updated (0.18 ms)

443 files updated, 0 skipped, 0 removed
Generated in 1.432264 seconds

验证模板内容

实验服可以使用模式数据文件来验证将代表生产环境中实际内容的类。

例如，一个名为molecules-event的模板可以包含以下数据文件

{
  "event": {
    "name": "Company picnic",
    "date": "August 25",
    "time": "1:00pm",
    "private": true
  }
}

在生产中，event变量将是Event类的实例。这个类有属性和方法，Twig 将将其视为变量的属性。

class Event {
  public $name;
  public function getDate() ...
  public function isPrivate() ...
}

实验服提供测试方法来确保Event类具有数据文件中存在的所有event属性。

class EventTest extends Labcoat\Testing\TestCase {
  public function testEvent() {
    $labcoat = new Labcoat\PatternLab("/path/to/patternlab");
    $this->assertPatternData($labcoat, "molecules-event#event", "Event");
  }
}

当运行此测试时，输出将类似于以下内容

There was 1 failure:

1) EventTest::testEvent
Failed asserting that the data classes contain the required pattern variables.

molecules-event#event.name
  FOUND: Event::$name
molecules-event#event.date
  FOUND: Event::getDate(), line 15
molecules-event#event.time
  NOT FOUND
molecules-event#event.private
  FOUND: Event::isPrivate(), line 22

pixo / labcoat

维护者

详细信息