mirror of
https://github.com/marko-js/marko.git
synced 2025-12-08 19:26:05 +00:00
54 lines
1.7 KiB
Plaintext
54 lines
1.7 KiB
Plaintext
$ var pageTitle = "Marko Templating Engine";
|
|
$ var currentPage = "home";
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>${pageTitle}</title>
|
|
</head>
|
|
<body>
|
|
<h1>${pageTitle}</h1>
|
|
<p>
|
|
Marko is a <i>fast</i> and lightweight templating engine that
|
|
compiles templates to CommonJS modules and supports streaming, async
|
|
rendering and custom tags. It supports both a familiar HTML syntax
|
|
and a concise, indentation-based syntax.
|
|
</p>
|
|
<ul.features>
|
|
<for|feature| of=["async", "streaming", "custom-tags", "readable", "modules"]>
|
|
<li>${feature}</li>
|
|
</for>
|
|
</ul>
|
|
<if(input.colors && input.colors.length)>
|
|
<ul>
|
|
<for|color| of=input.colors>
|
|
<li>${color}</li>
|
|
</for>
|
|
</ul>
|
|
</if>
|
|
<else>
|
|
<div>No colors!</div>
|
|
</else>
|
|
<tabs>
|
|
<@tab title="Tab 1">Body content for Tab 1</@tab>
|
|
<@tab title="Tab 2">Body content for Tab 2</@tab>
|
|
</tabs>
|
|
<script type="text/javascript">if (foo) {
|
|
alert('Marko is awesome!');
|
|
}</script>
|
|
<macro|macroInput| name="navLink">
|
|
$ var id = macroInput.id;
|
|
$ var href = macroInput.href;
|
|
$ var title = macroInput.title;
|
|
<li>
|
|
<a.nav-link class=(id === currentPage && "active") href=href>
|
|
${title}
|
|
</a>
|
|
</li>
|
|
</macro>
|
|
<ul>
|
|
<navLink id="home" href="/" title="Home"/>
|
|
<navLink id="docs" href="/docs" title="Docs"/>
|
|
<navLink id="blog" href="/blog" title="Blog"/>
|
|
</ul>
|
|
</body>
|
|
</html> |