JavaScript Framework fairy support js Frame

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

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

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

Next page Embedded

table of contents