内容简介：flat-html is an alternative to templating and generating complicated HTML.You write a series of statements of what each element should be set to.Such as
flat-html
flat-html is an alternative to templating and generating complicated HTML.
You write a series of statements of what each element should be set to.
Such as
{
"data": [
"-h1 =My post",
"^ul li = I am list item 1",
"ul li = I am list item 2",
"ul li = I am list item 3",
"-ul li = I am a different list item 1",
"ul li = I am a different list item 2"
]
}
Generates:
<div>
<h1>My post</h1>
<ul>
<li> I am list item 1</li>
<li> I am list item 2</li>
<li> I am list item 3</li>
</ul>
<ul>
<li> I am a different list item 1</li>
<li> I am a different list item 2</li>
</ul>
</div>
Here's a more involved example:
{
"data": [
"-div =My post",
"-div.mesgs div.mesg_history div.incoming_msg_img img(src:https://ptetutorials.com/images/user-profile.png,alt:sam)",
"div.mesgs div.mesg_history div.received_msg div.received_withd_msg p =My post",
"div.mesgs div.mesg_history div.received_msg div.received_withd_msg span.time_date =time",
"div.mesgs div.mesg_history div.received_msg span.blah =Mixed ",
"div.mesgs div.mesg_history div.received_msg span.blah =elements ",
"div.mesgs div.mesg_history div.received_msg b =go down a treat",
"-div.mesgs div.mesg_history div.incoming_msg_img img(src:https://ptetutorials.com/images/user-profile.png,alt:sam)",
"div.mesgs div.mesg_history div.received_msg div.received_withd_msg p =My post",
"div.mesgs div.mesg_history div.received_msg div.received_withd_msg span.time_date =time",
"div.mesgs div.mesg_history div.received_msg span.blah =Mixed ",
"div.mesgs div.mesg_history div.received_msg span.blah =elements ",
"div.mesgs div.mesg_history div.received_msg b =go down a treat"
]
}
It should generate HTML like this:
<div>
<div>My post</div>
<div>
<div>
<div><img src="https://ptetutorials.com/images/user-profile.png" alt="sam"></div>
<div>
<div>
<p>My post</p><span>time</span></div><span>Mixed </span><span>elements </span><b>go down a treat</b></div>
</div>
</div>
<div>
<div>
<div><img src="https://ptetutorials.com/images/user-profile.png" alt="sam"></div>
<div>
<div>
<p> My post</p><span> time</span></div><span> Mixed </span><span> elements </span><b> go down a treat</b></div>
</div>
</div>
</div>
The ^ symbol
The ^ symbol is the shared parent operator. The following shares div.mesgs as a common parent.
{
"data": [
"-div =My post",
"-div span = Name",
"div input(type:text,name:name)",
"-div span = Age",
"div input(type:text,age)",
"div button(type:submit) = Submit",
"^div.mesgs div.mesg_history div.incoming_msg_img img(src:https://ptetutorials.com/images/user-profile.png,alt:sam)",
"div.mesgs div.mesg_history div.received_msg div.received_withd_msg p =My post",
"div.mesgs div.mesg_history div.received_msg div.received_withd_msg span.time_date =time",
"div.mesgs div.mesg_history div.received_msg span.blah =Mixed ",
"div.mesgs div.mesg_history div.received_msg span.blah =elements ",
"div.mesgs div.mesg_history div.received_msg b =go down a treat",
"^div.mesgs div.mesg_history div.incoming_msg_img img(src:https://ptetutorials.com/images/user-profile.png,alt:sam)",
"div.mesgs div.mesg_history div.received_msg div.received_withd_msg p =My post",
"div.mesgs div.mesg_history div.received_msg div.received_withd_msg span.time_date =time",
"div.mesgs div.mesg_history div.received_msg span.blah =Mixed ",
"div.mesgs div.mesg_history div.received_msg span.blah =elements ",
"div.mesgs div.mesg_history div.received_msg b =go down a treat"
]
}
Generates the following HTML:
<div>
<div>My post</div>
<div><span> Name</span>
<input type="text" name="name">
</div>
<div><span> Age</span>
<input type="text" age="">
<button type="submit"> Submit</button>
</div>
<div>
<div>
<div><img src="https://ptetutorials.com/images/user-profile.png" alt="sam"></div>
<div>
<div>
<p>My post</p><span>time</span></div><span>Mixed </span><span>elements </span><b>go down a treat</b></div>
</div>
<div>
<div><img src="https://ptetutorials.com/images/user-profile.png" alt="sam"></div>
<div>
<div>
<p>My post</p><span>time</span></div><span>Mixed </span><span>elements </span><b>go down a treat</b></div>
</div>
</div>
</div>
The new child operator (+ symbol)
The + symbol is the new child operator. It creates a new element from that point onwards. Note how div.review are new elements.
{
"data": [
"^div.users h1 =Books",
"div.users h1 =sam",
"div.users +div.books h2 =A long journey",
"div.users div.books h3 = Reviews",
"div.users div.books +div.review li =Review1",
"div.users div.books div.review li =5",
"div.users div.books +div.review li =Review2",
"div.users div.books div.review li =10",
"^div.users h1 =root",
"div.users +div.books h2 =A long journey",
"div.users div.books h3 = Reviews",
"div.users div.books +div.review li =Review1",
"div.users div.books div.review li =5",
"div.users div.books +div.review li =Review2",
"div.users div.books div.review li =10"
]
}
Generates the following HTML:
<div id="output">
<div>
<div>
<h1>Books</h1>
<h1>sam</h1>
<div>
<h2>A long journey</h2>
<h3> Reviews</h3>
<div>
<li>Review1</li>
<li>5</li>
</div>
<div>
<li>Review2</li>
<li>10</li>
</div>
</div>
<h1>root</h1>
<div>
<h2>A long journey</h2>
<h3> Reviews</h3>
<div>
<li>Review1</li>
<li>5</li>
</div>
<div>
<li>Review2</li>
<li>10</li>
</div>
</div>
</div>
</div>
</div>
Usage
Open flat-html.html in your browser and give it a whirl. There's an editor at the top of the screen so you can see what your flat HTML is generating below.
Service side usage
You can use flat html in a server. Here's a flask example. Unflatten can be found here .
以上所述就是小编给大家介绍的《Flat HTML》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
