1.0.2 • Published 7 years ago
fis3-parser-layout v1.0.2
一个基于fis3的纯静态html布局模板
1、快速上手
layout.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 输出 title 值 -->
<title>{%=title%}</title>
</head>
<body>
<div class="nav">
<!-- 这里引入了一个导航组件并传了一个json数据 -->
<include include-src="nav.html" data-nav=`[
{"href": "#", "text"="home"},
{"href": "#", "text"="link1"},
{"href": "#", "text"="link2"}
]`></include>
</div>
<div class="main">
<!-- 这里出输 main 内容 -->
<layout-block name="main"></layout-block>
</div>
</body>
</html>nav.html
<!-- 每个页面都会有随机生成 _id 属性，方便js控制 -->
<ul id="{%=_id%}">
{% for (var i = 0; i < data.nav.length; i++) %}
<li>
<a href="{%=data.nav[i].href%}">
{%=data.nav[i].text%}
</a>
</li>
{% } %}
</ul>
<script type="text/javascript">
// 利用 _id 直接控制 dom
var nav = document.getElementById("{%=_id%}");
</script>index.html
<!-- 引入 layout.html 布局，输出到 layout.html 的 main 里去-->
<layout layout-src="layout.html" layout-block="main" title="MyApp">
<h1>MyApp</h1>
</layout>输出 index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MyApp</title>
</head>
<body>
<div class="nav">
<ul id="id_das54sf4">
<!-- 空连接和#链接自动转换成 "javascript:;" -->
<li><a href="javascript:;">home</a></li>
<li><a href="javascript:;">link1</a></li>
<li><a href="javascript:;">link2</a></li>
</ul>
</div>
<div class="main">
<h1>MyApp</h1>
</div>
<script type="text/javascript">
var nav = document.getElementById("id_das54sf4");
</script>
</body>
</html>2、layout 多位置输出
layout.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MyApp</title>
<!-- 这里出输 head内容 -->
<layout-block name="head"></layout-block>
</head>
<body>
<div class="main">
<!-- 这里出输 main 内容 -->
<layout-block name="main"></layout-block>
<!-- 这里出输 food 内容 -->
<layout-block name="food"></layout-block>
</div>
</body>
</html>index.html
<!-- 引入模板 -->
<layout layout-src="layout.html">
<!-- 输出到 head -->
<layout-block name="head">
<link rel="stylesheet" href="index.css">
</layout-block>
<!-- 输出到 main -->
<layout-block name="main">
<h1>MyApp</h1>
</layout-block>
<!-- 输出到 food -->
<layout-block name="food">
<script type="text/javascript" src="index.js"></script>
</layout-block>
</layout>输出 index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MyApp</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<h1>MyApp</h1>
<script type="text/javascript" src="index.js"></script>
</body>
</html>3、配置
fis.match('/**.html', {
parser: fis.plugin('layout', {
// layout输出位置的元素
lopm: 'layout-block',
// 存放layout输出位置的标签ID 的属性
lopa: 'name',
// page获取布局文件的元素
pqlfm: 'layout',
// 存放layout文件的路径的属性
pqlfa: 'layout-src',
// 存放指定输出位置ID的属性，优先于pqlbm
pqlfoba: 'layout-block',
// 指定输出位置的元素
pqlbm: 'layout-block',
// 存放指定输出位置ID的属性
pqlba: 'name',
// 引入组件（页面碎片）的元素
pqwm: 'include',
// 存放引入组件（页面碎片）的路径
pqwa: 'include-src',
// 内置了 artTemplate 模板
// 注：<% %> 定界符不兼容
template_openTag: '{%',
template_closeTag: '%}',
template_escape: true,
template_cache: true,
template_compress: true,
template_helper: {
// 页面调用 <%=add(1,2)%>
'add': function (sum1, sum2) {
return sum1 + sum2;
}
},
// {%=_id%} 获取 随机的id
// 随机ID长度
randomIDLen: 8,
// 随机ID的前缀
randomIDPrefix: 'id_',
// 格式化 html 代码
beautify: true
})
});1.0.2
7 years ago