JavaScript フレームワーク fairy support js
埋め込み

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

src/page/index.html
$frame(aaa.bbb.sample)
<div style="margin-left: 10px; background-color: #0000ff; color: #ffffff">
    <span style="margin-right: 10px;">page</span>
    <div>\$frame(aaa.bbb.sample)</div>
    $embed(aaa.bbb.sample)
    <div>\$embed(aaa.bbb.sample)</div>
</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 style="margin-left: 0px; background-color: #000000; color: #ffffff">
    <span style="margin-right: 10px;">frame</span>
    $embed(aaa.bbb.sample)
    <div style="margin-right: 10px;">\$embed(aaa.bbb.sample)</div>
    <div style="margin-right: 10px;">\$page()</div>
    $page()
</div>
</body>
</html>

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

src/embed/aaa/bbb/sample.html
<div style="margin-left: 20px; background-color: #008000; color: #ffffff">
    <span style="margin-right: 10px;">embed</span>
    <span style="margin-right: 10px;">aaa</span>
    <span style="margin-right: 10px;">bbb</span>
    <span style="margin-right: 10px;">sample</span>
    $embed(aaa.bbb.sample2)
    <span style="margin-right: 10px;">\$embed(aaa.bbb.sample2)</span>
</div>

src/embed/aaa/bbb/sample2.htmlを作成しましょう

src/embed/aaa/bbb/sample2.html
<div style="margin-left: 30px; background-color: #ff0000; color: #ffffff">
    <span style="margin-right: 10px;">embed</span>
    <span style="margin-right: 10px;">aaa</span>
    <span style="margin-right: 10px;">bbb</span>
    <span style="margin-right: 10px;">sample2</span>
</div>

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


次ページCSS

目次