README

PHP的emmet实现

安装

添加

"artem_c/emmet": "~1.0"

到你的composer.json文件的require部分。

接口


Emmet::__construct( string emmet_string );
Emmet::create(array data);
Emmet::addFunctions(array functions);

全局使用

简单使用

  (new Emmet('div>p>span+a>img[src=img.jpg]'))->create();

或者

  $emmet = new Emmet('tr>td{`value`}');
  
  foreach($data as $value){
      echo $emmet->create([ 'value' => $value ]);
  }

不要像这样使用Emmet

  foreach($data as $value){
      echo (new Emmet('tr>td{`value`}'))->create([ 'value' => $value ]);
  }

因为它的工作方式类似于PDO中的预处理语句。
Emmet::__construct() 会准备HTML树。
而 Emmet::create() 会使用这个树。

创建表格HTML元素的最佳实践是

echo (new Emmet(
    'table#myTable>tbody>tr.myTr*`tr_cnt`>td.title{`data[$][title]`}+td{`data[$][value]`}')
)->create(
    ['data' => [['title' => 't1', 'value' => 'v1'], ['title' => 't2', 'value' => 'v2'], ['title' => 't3', 'value' => 'v3']], 'tr_cnt' => 3]
);

详细使用

[操作] [标签 [id] [class] [属性] [元素文本节点] [乘数]] | [HTML [乘数]] | [文本节点 [乘数]] [操作]

因此我们有操作和标签、文本节点和HTML元素。

概述

Emmet字符串由对象和操作组成。对象代表标签或文本节点或HTML。

object+object>object(object+object)

标签对象从标签名开始

div>div>p+span

它可以从除 '`', '%', '{' 之外的任何字符开始。标签节点可以具有id、class、属性、文本和乘数。

div#id.class[attr=value]{text}*2+span.class

文本节点对象从 '{' 开始。并且可以有乘数

{text}+{another text}*3

文本节点不能有子节点。因此你不能将 ">" 操作应用于文本节点对象。

HTML对象由变量或函数表示。它可以有乘数。

`variable`>%function()%

它可以有子对象。

操作

( ) ^ > +

使用 "+" 操作向先前元素添加兄弟元素

'a+span'  ==== '<a></a><span></span>'

使用 ">" 操作向先前元素添加子元素

'a>span' === '<a><span></span></a>'

使用 "^" 操作在树上爬升

'p>a>img^+span' === '<p><a><img /></a><span></span></p>'

使用 "( )" 操作进行分组元素。应该知道在 ")" 操作之后将使用括号中的第一个元素。让我们看看。

'(div>p+a)+div' === '<div><p></p><a></a></div>' . '<div></div>'
'(div>p>a>span)>p' === '<div>' . <p><a><span></span></a></p>' . '<p></p>' . '</div>'
'div>(div>p)^+div' === '<div><div><p></p></div></div>' . '<div></div>'

文本节点

你可以创建一个没有标签的文本节点，并使用 "+" 操作像其他元素一样使用它。但你不能向文本节点添加子元素。

'p+{ some text }+a' === '<p></p> some text <a></a>'
'p+{ some text }*2' === '<p></p> some text  some text '

变量

你可以在字符串中使用变量作为id、class、文本节点或乘数的值，用 " ` "。

(new Emmet('p.`info_class`{`information`}+span'))->create([ 'information' => 'some information for user', 'info_class' => 'info']) 
 === '<p class="info">some information for user</p><span></span>'

你有特殊变量 "$"。它代表你的元素的数量。元素的数量是0。但是，如果你为你的元素使用乘数，它将改变。

echo (new Emmet('ul>li{`ul[$]`}*2'))->create(['ul' => [1,2,3]]) === '<ul><li>1</li><li>2</li></ul>'

或者如果父元素有乘数，则子元素将具有相同的乘数

echo (new Emmet(
   'table#myTable>tbody>tr.myTr*`tr_cnt`>td.title{`data[$][title]`}+td{`data[$][value]`}')
)->create(
   ['data' => $data,'tr_cnt' => count($data),]
);

你可以在你的变量中使用对象，用 "."。


echo (new Emmet('article{`object.title`}'))->create(['object' => new Object()]);

函数

你可以在emmet字符串中使用函数。首先你必须添加一个函数。

Emmet::addFunctions(['funcName' => function() { return 'funcName';}])

之后，你可以在emmet字符串内部通过使用 " % " 调用它。

echo (new Emmet('p{%funcName()%}'))->create() === '<p>funcName</p>'

你可以在函数中传递参数

Emmet::addFUnctions(['funcName' => function($arg) { return ' ' . $arg . ' '; }])

传递文本作为参数

echo (new Emmet('p{%funcName(some text)%}'))->create() === '<p> some text </p>'

传递变量作为参数

echo (new Emmet('p{%funcName(`arg`)%}'))->create(['arg' => 'arg value']) === '<p> arg value </p>'

你可以传递多个参数

Emmet::addFunctions(['func' => function($a, $b, $c) { return $a.$b.$c; }]);
echo (new Emmet('p{%func(`a`, b, `c`)%}'))->create(['a' => 'aaa', 'c' => 'ccc']) === '<p>aaabccc</p>'

你的函数可以是字符串

Emmet::addFunctions(['infoHeader' => 'Information header'])
echo (new Emmet('div>header{%infoHeader()%}+section{some info}'))-create() === '<div><header>Information header</header><section>some info</section></div>'

你可以使用默认函数。

  integer count( mixed ) // the same as 'count()' in php

  string concat (string, string, ...) // concatinate the arguments
  (new Emmet('ul>li{`cities[$]`}*%count(`cities`)%)')->create(['cities' => array('1,2,3)])

  strinf select($name, $selected, array $data, array $html_options = []) // creates Select HTML Element

对于在函数内部生成HTML代码，你可以使用Node类的静态方法。

  Node::selfClosingElement($tag, array $attributes = []);
  Node::closingElement($tag, array $attributes = [], $value = '')

组合值

你可以将你的标签、id、class等的值与字符串变量和函数组合。

echo (new Emmet('p#identifier_`$`{the value of node is %getValue(`value[$]`)%, the number of node is `$`}*%count(`value`)%'))->create(['value' => [0,10,20,30,40,50]]) === '<p id="identifier_0">the value of node is 0, the number of node is 0 </p>...<p id="identifier_5">the value of node is 50, the number of node is 5</p>'

HTML节点

HTML是HTML树的节点，该节点的值是变量或函数。你可以在标签内添加HTML节点的值，或在另一个HTML节点或同级元素中添加。

Emmet::addFunctions(['htmlFunction' => function(){ return 'function html node';}])
echo (new Emmet('div>`htmlVar`+%htmlFunction()%'))->create(['htmlVar' => 'variable html node']) === '<div>variable html nodefunction html node</div>'

或者您可以添加另一个节点到HTML节点。如果您使用变量或函数是字符串类型，请在字符串中使用'{{value}}'。如果您使用可调用函数，请使用函数中的最后一个参数。


echo (new Emmet('div+`myP`>a+span'))->create(['myP' => '<p class="myP">{{value}}</p>']) === '<div></div><p class="myP"><a></a><span></span></p>'

Emmet::addFunction(['oneMoreP' => '<p class="one more p">{{value}}</p>']);

echo (new Emmet('div>%oneMoreP()%>`myP`>a+a'))->create(['myP' => '<p class="myP">{{value}}</p>']) === '<div><p class="one more p"><p class="myP"><a></a><a></a></p></p></div>'

Emmet::addFunction(['func' => function($first, $second, $value) { return $first.' '.$second.' '.$value; }]);

echo (new Emmet('div>%func(first, `second`)%>`second`+a'))->create(['second' => 'second']) === 
'<div>first second second<a></a></div>'

筛选

您可以使用“/”进行筛选。当您需要在文本中使用特殊字符时，应在符号前使用“/”。

[data-value=[]]  // this will generate an error 
// but
[data-value=/[/]] // generate an html
data-value="[]"

artem_c / emmet

维护者

详细信息

README

安装

接口

全局使用

详细使用

概述

操作

标签

文本节点

变量

函数

组合值

HTML节点

筛选