README

Simphotonics节点可以用于创建、编辑、搜索和输出HTML节点。该库包含帮助创建导航器、输入元素和HTML 表格的类。

节点使HTML文档的编写更加容易，因为它不需要结构化文本，并且可以重用HTML节点。大多数网站使用固定的页面布局，然后填充页面内容：文本、锚点、图像等。在网页模板部分展示了如何使用节点创建一个简单的两列空网页原型。

Simphotonics Node还包括一个基本的HTML解析器、一个DTD解析器和节点渲染器。更多信息请访问https://github.com/simphotonics/node/tree/master/src/Parser。

安装

在终端中输入以下命令

composer require simphotonics/node

或者，将simphotonics/node添加到你的composer.json文件中所需的库列表

{
    "require": {
        "simphotonics/node": ">=1.0.0"
    }
}

用法

要创建节点，将一个包含可选条目*kind、attr、content和childNodes的数组传递给构造函数

<?php
use Simphotonics\Node\HtmlNode;
use Simphotonics\Node\HtmlLeaf;

$img = new HtmlLeaf(
    kind:  'img',
    // Element attributes are specified in array format!
    attributes:  [
        'id' => 'logo',
        'src' => 'assets/images/logo.jpg',
        'alt' => 'Logo'
    ]
);

// All input array entries are optional. If no element kind is specified it defaults to div.
$div = new HtmlNode();

// Attributes and content can be added later.
$div->setAttr(['id' => 'demo-div'])->setCont('Text within the div element.');

$p = new HtmlNode(
    kind:  'p',
    attributes:  [
        'class' => 'demo-paragraph'
    ],
    // The (string) content of an element.
    content:  'This is the paragraph text.',
    // An array of child nodes.
    childNodes:  [$img,$div]
);

请注意，元素kind指的是HTML元素的标签名。上面示例中的HTML段落是kind p，而HTML图像是kind img。要渲染上面示例中的节点，我们使用

<?php
print $p;

上面的语句返回以下字符串（添加了空白以突出显示HTML源代码的结构）

<p class="demo-paragraph">This is the paragraph text.
    <img id="logo" src="assets/images/logo.jpg" alt="Logo"/>
    <div id="demo-div">Text within the div element.</div>
</p>

网页模板

以下示例展示了如何快速使用节点生成简单的网页布局。它可以作为一个原型空HTML文档，稍后用实际网页内容填充。

use Simphotonics\Node\HtmlLeaf;
use Simphotonics\Node\HtmlNode;
use Simphotonics\Node\HtmlCssLink;
use Simphotonics\Node\HtmlTitle;

// DTD
$dtd = new HtmlLeaf(
    kind:  '!DOCTYPE',
    content:  'html'
);

// HTML document
$doc = new HtmlNode(
    kind:  'html',
    attributes:  [
        'xml:lang' => "en-GB",
        'lang' => "en-GB"
    ]
);

// Web page title
// The title is set dynamically depending on the current URI.
// Example: www.samplesite.com/about-us => Title: My Site - About Us
$title = new HtmlTitle('My Site');

$encoding = new HtmlLeaf(
    kind:  'meta',
    attributes:  [
        'http-equiv' => 'Content-Type',
        'content' => 'text/html',
        'charset'=>'utf-8'
    ]
);

$icon = new HtmlLeaf(
    kind:  'link',
    attributes:  [
        'rel' => 'shortcut icon',
        'href' => asset('favicon.ico')
    ]
);

// The input path tells the class HtmlCssLink that style files are located in '/style'.
// If the current URI is www.samplesite.com/about-us,
//    the style file is assumed to be /style/AboutUs.css.
$css = new HtmlCssLink('/style');

// Head
$head = new HtmlNode(
  kind:  'head',
  attributes:  ['id' => 'head'],
  childNodes:  [$encoding, $title, $icon, $css]
  );

$body = new HtmlNode(
    kind:  'body',
    attributes:  ['id' => 'body']
);

// We are using a two column layout.
$col1 = new HtmlNode(
    kind:  'div',
    attributes:  ['id' => 'col1']
);

// This demonstrates cloning of nodes.
$col2 = clone $col1;
$col2->setAttr(['id' => 'col2']);

$footer = new HtmlNode(
    kind:  'div',
    attributes:  ['id' => 'footer']
);

// Compose emtpy template
$body->append([$col1,$col2,$footer]);
$doc->append([$head,$body]);

假设上面的PHP源代码被保存到文件layouts/emptyDocument.php中。我们现在使用空文档布局来创建页面AboutUs.php。如果你使用的是框架，这可能是当路由到/about-us时加载的视图。

<?php
// Load empty document
require 'layouts/emptyDocument.php';

// Compose content
$info = new HtmlLeaf(
    kind:  'p',
    content:  'Information about www.samplesite.com.'
);

$imgAboutUs = new HtmlLeaf(
    kind:  'img',
    attributes:  [
        'id' => 'img-about-us',
        'src' => 'assets/images/aboutUs.jpg',
        'alt' => 'About Us'
    ]
);

// Add content to the empty document

// Add the info paragraph to column 1.
$col1->appendChild($info);

// Note that HtmlNode implements the array access interface.
// $col1 can also be accessed using array notation.
// Example: $doc[0] === $head, $doc[1] === $body.
//          $doc[1][0] === $col1, $doc[1][1] === $col2.

// The image is added to column 2.
$col2->appendChild($imgAboutUs);

// Render html document
print $dtd;
print $doc;

网页导航器 - HtmlNavigator

可以使用HtmlNavigator类创建由PHP/CSS驱动的网页导航器。该类搜索所有子节点，查找指向当前uri的锚点。然后，锚点的父节点被添加到CSS类'here'（以启用样式）。

网页导航器通常由一个无序列表组成，其中列表项是导航按钮，包含导航锚点（链接）。以下示例演示了如何创建一个包含两个条目（主页和服务）的简单导航器。

<?php
// Anchor template
$a = new HtmlLeaf(
kind:  'a'
);

// Navigator button template
$b = new HtmlNode(
kind:  'li',
childNodes:  [$a]
);

// Create entry for home
$b_home = clone $b;
$b_home[0]->setAttr(['href' => '/'])->setCont('HOME');

// Services
$b_services = clone $b;
$b_services[0]->setAttr(['href' => '/services'])->setCont('SERVICES');

$menu = new HtmlNode(
kind:  'ul',
attributes:  ['id' => 'mainMenu'],
'child'=> [$b_home, $b_services]
);

$nav =  new HtmlNavigator(
kind:  'div',
attributes:  ['id' => 'nav','class' => 'has-shadow'],
childNodes:  [$menu]
);

假设当前相对uri是/services，那么在PHP中渲染$nav将产生以下字符串

<div id="nav" class="has-shadow">
    <ul id="mainMenu">
        <li>
            <a href="/">HOME</a>
        </li>
        <li class="here">
            <a href="/services">SERVICES</a>
        </li>
    </ul>
</div>

为了完整性，我包含了一个基本的CSS文件，显示了导航组件的基本样式。注意，li.here类的样式将突出显示指向当前页面的导航按钮。

#nav {
  position: relative;
  margin: auto;
  margin-bottom: 1em;
}

#mainMenu {
  top: 0;
  list-style: none;
  width: 100%;
  height: 100%;
}

#mainMenu li.here {
  background-color: #133557;
  border-left-color: #234567;
  border-right-color: #002142;
}

轻松创建HTML表格 - HtmlTable

可以使用HtmlTable类创建和操作HTML表格。以下展示了用法

<?php
use Simphotonics\Node\HtmlTable;

\\ Table data
for ($i=1; $i < 9; $i++) {
            $data[] = 'Data'.$i;
}
\\ Construct table
$table = new HtmlTable(
    $data,   // Input data (could also be nodes)
    3,       // Set table layout to 3 columns
    HtmlTable::SET_TABLE_HEADERS, // Enable table headers
    2,       // Each 2nd row will have the style attribute class="alt"
    1        // Omit styling of the first row.
);

$print $table;

上面的代码将渲染以下HTML表格

可以使用CSS类alt来样式化交替行。除了节点以外的表格输入被包装在kind span的节点中。以下显示了HTML源代码

<table>
    <tr>
        <th class="col1"><span>Data1</span></th>
        <th class="col2"><span>Data2</span></th>
        <th class="col3"><span>Data3</span></th>
    </tr>
    <tr class="alt">
        <td class="col1"><span>Data4</span></td>
        <td class="col2"><span>Data5</span></td>
        <td class="col3"><span>Data6</span></td>
    </tr>
    <tr>
        <td class="col1"><span>Data7</span></td>
        <td class="col2"><span>Data8</span></td>
        <td class="col3"><span>Data9</span></td>
    </tr>
</table>

HtmlTable类包含允许更改表格布局的方法

<?php
// Set number of columns
$table->setNumberOfColumns(4);

// Append data to last row
$table->appendToLastRow(['Data10','Data11']);

// Append new row
$table->appendRow(['Data12','Data13']);

// Delete individual row (note count starts from 0).
$table->deleteRow(1);

// Delete column (count starts from 0).
$table->deleteColumn(2);

simphotonics / node

维护者

详细信息

README

安装

用法

网页模板

网页导航器 - HtmlNavigator

轻松创建HTML表格 - HtmlTable