Flat HTML

栏目: IT技术 · 发布时间: 4年前

内容简介: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 Flat HTML


以上所述就是小编给大家介绍的《Flat HTML》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

高可用MySQL

高可用MySQL

)Charles Bell Mats Kindahl Lars Thalmann / 宁青、唐李洋 诸云萍 / 电子工业出版社 / 2011-10 / 98.00元

《高可用mysql:构建健壮的数据中心》是“mysql high availability”的中文翻译版,主要讲解真实环境下如何使用mysql 的复制、集群和监控特性,揭示mysql 可靠性和高可用性的方方面面。本书由mysql 开发团队亲自执笔,定位于解决mysql 数据库的常见应用瓶颈,在保持mysql 的持续可用性的前提下,挖潜各种提高性能的解决方案。本书分为三个部分。第一部分讲述mysql......一起来看看 《高可用MySQL》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

在线进制转换器
在线进制转换器

各进制数互转换器