😽

jsを読み込むだけ？？template作成ツールを製作

2025/03/19に公開

特徴

JavaScriptの知識不要
特殊な構文不要
htmlにより、templeteを記述できる
jsファイルを読み込むだけ
html要素を引数のようにとれる

以下例


<div class="bbb">
    <div class = "contents_wrap_test">
        <div class = "contents_wrap_test_2">
            <div class="test_wrap">
                <div class="price"  style="background-color: blueviolet;"></div>
                <div class="ppp"></div>
                <div class="price"  style="background-color: rgb(36, 181, 194);"></div>
                <div class="price"  style="background-color: rgb(39, 194, 36);"></div>
                <div class="price"  style="background-color: rgb(194, 36, 36);"></div>
                <div class="price"  style="background-color: rgb(73, 36, 194);"></div>
                <div class="price"  style="background-color: rgb(194, 160, 36);"></div>
                <div class="price"  style="background-color: rgb(194, 36, 78);"></div>
                <div class="description">サンプルサンプル</div>
                <div data-insert="content"></div>
            </div>
        </div>
    </div>
</div>

このようなものすごいテンプレを設定したと仮定します。

html側では、

<div class="p_temp bbb">
    <div class="ppp">3.141592</div>
    <div class="price">3,000円</div>
    <div class="info">特別割引中</div>
    <p>商品説明がここに入ります</p>
</div>

このように引数を指定します。
priceの要素の場合、
テンプレート内に大量にありますが、これらすべてに3000円という要素が入ります。

また、引数をこのように定義可能です。

<div class="price" >
    <div class = "box">
    
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    </div>
    <div class = "box">
    
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    </div>

</div>

このようにすると、
そのまま要素が代入されます。

複雑な構造を持つHTMLに、内容を書き込むのが大変なので制作しました。
同じことを複数回表示する場合にも使えます。

ぜひ活用ください。
テンプレートを使用する物には、p_tempクラスを追加してください。

<div class="p_temp bbb">

また、定義されていない引数の場合は、

<div data-insert="content"></div>

に挿入されます。

https://kemii.sakura.ne.jp/index.html

↑ポートフォリオサイト

特徴

Discussion