JavaScript Framework fairy support js Embedded

Let's change 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>

Let's change 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>

Let's create 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>

Let's create 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>

Let's take a look at distWork/page/index.html, after npm run watch_local is run.
src/frame/aaa/bbb/sample.html, src/page/index.html, src/embed/aaa/bbb/sample.html and src/embed/aaa/bbb/sample2.html is merged.
If $embed() is written in the files under src/page, src/frame and src/embed, the files written in $embed() are searched from under src/embed and $embed() is replaced.
The extension of the file under src/embed will be html.
If you want to write the string as $embed() in the files under src/page, src/frame and src/embed, add \.

Next page CSS

table of contents