自分のデータを使ってhtmlを生成する最良の方法は何ですか？

Question

私は、それぞれのアイテムが同じスタイルで、新しいIDかそのようなものであるアイテムのリストを持つ静的なウェブサイトを持っています。私は現在、リストに古いアイテムをコピーして貼り付け、アイテムを追加するためにその内容を変更しますが、手作業で手続きを行うことは古風な感じです。私が望むアイテムを持つファイルを作成し、各アイテムのhtmlを指定し、それを生成して静的なサイトのindex.htmlを取得するためのフレームワークがありますか？私が知っているPythonスクリプトを書くことができましたが、私が知り得ないものが既に存在するような気がします。

Answer 1

動的に生成されたjQueryの一般的な例（）適切でない場合はコメントしてください。を削除します。

1. アイテムデータをオブジェクトに配置します（タイトル、リンク、画像、説明など）。
2. 新しいアイテムをitems配列に追加します。
3. HTMLを動的に生成するループスルーアイテム配列。

$(document).ready(function() { 
 
    //initialize function 
 
    showItems(); 
 
}) 
 

 
//add data to object 
 
var item1 = { 
 
    img: 'https://placehold.it/100x100', 
 
    id: '#img' 
 
}; 
 
var item2 = { 
 
    img: 'https://placehold.it/100x100', 
 
    id: '#img2' 
 
}; 
 
var item3 = { 
 
    img: 'https://placehold.it/100x100', 
 
    id: '#img3' 
 
}; 
 
var item4 = { 
 
    img: 'https://placehold.it/100x100', 
 
    id: '#img4' 
 
}; 
 

 
//add objects to array 
 
var items = [item1, item2, item3, item4]; 
 

 
//loop through array and generate html 
 
function showItems() { 
 
    for (var i = 0; i < items.length; i++) { 
 
    $('.flex-container').append('<li><img src="' + items[i].img + '"><h3>' + items[i].id + '</h3></li>'); 
 
    } 
 
}

.flex-container { 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
    justify-content: center; 
 
    padding: 0; 
 
} 
 

 
.flex-container li { 
 
    margin: 20px; 
 
    text-align: center; 
 
    list-style: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="flex-container"></ul>