README

PHP工具，用于在HTML中显示视图模板。

如果您正在构建一个图案/组件库，这个简单的工具将展示其部分以供设计师、开发人员和客户协作！它基本上是一个可以在PHP中放置任何位置的辅助函数。

<?= macropiche('path/to/template') ?>

这将渲染一个包含以下简单标记的HTML <div>

• 文件路径
• 原始文件内容
• 处理后的文件输出作为代码/标记（除非等于原始文件内容）
• 处理后的文件输出作为HTML

安装

composer require fewagency/macropiche

背景

有关显示图案和原子设计的一些阅读 - 认为macropiche是为了支持而设计的

• http://danielmall.com/articles/content-display-patterns/
• http://alistapart.com/article/from-pages-to-patterns-an-exercise-for-everyone
• http://bradfrost.com/blog/post/atomic-web-design/

有关更高级的图案库使用的阅读

• http://bradfrost.com/blog/post/anatomy-of-a-pattern-in-a-pattern-library/
• https://www.smashingmagazine.com/taking-pattern-libraries-next-level/

用法

辅助函数可以在任何PHP文件或使用echo或<?=的PHP模板中使用。

/**
* @param $file    string Relative or absolute path to template/view file
* @param $context array|mixed Optional data for the template parser
* @return string HTML
*/
function macropiche($file, $context = null)

$context通常是一个包含变量名和值的数组，用于填充模板。

示例

示例包含一个快速测试php文件，以帮助您开始并展示在PHP文件中使用的macropiche()辅助方法。

样式和脚本

由macropiche生成的HTML具有遵循BEM命名方法的CSS类，因此您可以随意样式化元素。

您应该将项目的样式（和脚本）导入文档中，以展示您的模板。但此包的资产还包括一些简单的样式表，您可以导入（或从中获得灵感）以样式化实际的macropiche元素

• assets/css/code-toggle.css使用（空的）“source”锚点来切换代码显示部分的可见性。
• assets/css/optional-style.css是一种低调的样式，仅应用于macropiche元素。它基于半透明的中灰色，以适应深色和浅色背景。

语法高亮

在<code>元素（包含在<pre>内）中，有表示其内容语言类的属性，您可以使用这些类进行语法高亮，例如，对于PHP代码使用language-php。这对于使用Prism这样的代码语法高亮器非常有用。为什么不使用Laravel文档中使用的相同配置呢？生成的Prism文件也可以在本包的资产中找到，以便快速使用。

与Laravel Blade模板一起使用

如果在具有view()辅助函数的Laravel环境中使用macropiche，它将用作支持模板的渲染引擎。

在其他情况下，您可能需要声明自己的名为macropiche_blade_view()的辅助函数，它应该返回一个Illuminate\Contracts\View\Factory实例（或类似实例 - 它可以与未显式实现该接口的Blade包一起使用）。使用duncan3dc/blade和jenssegers/blade的示例可以在examples/test-blade-duncan3dc.php和examples/test-blade-jenssegers.php中找到。

对于实现了getFinder()方法的Blade工厂（如Laravel中内置的），可以相对于Blade视图文件夹使用Blade点语法引用模板，而不是提供对macropiche的完整或相对路径。

与Twig模板一起使用

目前，macropiche支持HTML、PHP和Blade模板文件。我们在功能路线图中支持了下一个Twig！

<samp>！

使用<samp>元素来显示在<pre><code class="language-html">内的处理输出。很少有机会正确使用<samp>，这种类型的包可能是为数不多的有用应用之一！对于那些尚未阅读<samp>元素的规范的人来说，我强烈推荐阅读！

<p>The computer said <samp>Too much cheese in tray two</samp> but I didn't know what that meant.</p>

...如果有人知道谁写了那个搞笑的官方使用示例，或者它来自哪里，请与我联系并告诉我！

替代方案

当然，还有其他方式来构建您的HTML组件库以进行显示，以下是一些示例

• http://patternlab.io
• http://devbridge.github.io/Styleguide/
• https://fbrctr.github.io
• https://github.com/cloudfour/drizzle
• https://github.com/nickberens360/atomic-docs

它们都生成一个完整的网站，而本包旨在为在现有项目中显示模板提供更简单的工具集。

作者

我，Björn Nilsved，在FEW工作期间创建了此包。