Zenn
👏

Node.jsが使えなくても使用できるtemplateフレームワーク

に公開
JavaScript
tech

https://github.com/kemii279/blog_templete.git

実装

テンプレートのhtmlをjsで追加し、指定クラスの内容を置換してる。
すべて素のjsで実装。

従来との比較

Node.jsが使えない環境の場合、サイトをつかいまわすのが結構厳しい。
これを使うことでコンテンツ部分のみを変更するだけでよくなるので大変楽である。

コードの外観

index.html


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="p_temp all">
    <div class="rep_content">
        <h1>Hello World</h1>
    </div>
</div>
    
    <script>var javascript_file_line_load = ['add.js', 'temp.js','tab.js'];</script>
    <script src="js/javascript_file_line_load.js"></script>
</body>
</html>

テンプレートである、allを参照し、その中のrep_contentのinner_htmlを置換するというような意味である。

js/add.jsの中身のrep_contentクラスの場所が変化する形です。

index.htmlを同じフォルダ内でコピーすることで、別のページを簡単に作成できます。

Discussion