JavaScript フレームワーク fairy support js
フレーム

src/page/index.htmlを修正しましょう

src/page/index.html
$frame(aaa.bbb.sample)
<div>\$frame(aaa.bbb.sample)</div>
<div data-obj="obj"></div>
<div><input type="text" data-name="sample"></div>

src/frame/aaa/bbb/sample.htmlを作成しましょう

src/frame/aaa/bbb/sample.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>
sample
</title>
<script id="fs-js" src="http://localhost:8000/js/fairysupport.min.js" data-page-root="http://localhost:8000/page"></script>
</head>
<body>
<div>\$page()</div>
$page()
</body>
</html>

npm run watch_localが実行されたらdistWork/page/index.htmlを見てみましょう
src/frame/aaa/bbb/sample.htmlとsrc/page/index.htmlがマージされています
src/page配下のファイル内に$frame()が書いてあると、$frame()内に書いてあるファイルをsrc/frame配下から探し出し、$page()をsrc/page配下のファイルの内容に置換し、distWork/page配下に出力します
src/page配下のファイルの拡張子は何でもいいですが、src/frame配下のファイルの拡張子はhtmlになります
src/page配下のファイル内に$page()という文字列を書きたい場合は\を付けてエスケープしてください
src/frame配下のhtmlファイル内に$frame()という文字列を書きたい場合は\を付けてエスケープしてください


次ページ埋め込み

目次