什麼是使用我自己的數據生成html的最佳方式？

我有一個靜態網站的項目列表，其中每個項目是相同的風格，只是一個新的ID或類似的東西。我現在只是在列表中複製並粘貼一箇舊項目並更改它的內容以添加項目，但是手動執行某些操作是件很古老的事情。是否有某種框架允許使用我想要的項目創建文件，併爲每個項目指定html，然後生成它，然後獲取我的靜態網站的index.html？我可以編寫一個我知道的python腳本，但是我覺得現在已經存在一些我不知道的東西。什麼是使用我自己的數據生成html的最佳方式？

來源

2017-10-07 J. Doe

因爲它不是編碼相關的問題，https://softwarerecs.stackexchange.com/可能是一個更適合它。 – rsm

大致的問題是，您可以創建一個jQuery函數來爲您完成繁重的工作，並將對象數據加載到對象中（類似於JSON數據），這是否會讓您考慮或根本不想涉及任何代碼？ – Syden

謝謝，你們倆。 @Syden，我認爲這樣做會浪費客戶資源來做到每頁加載。在推送網站之前，我自己可以自己生成它，但我有興趣閱讀你的建議，因爲我實際上沒有jQuery的這種體驗 –

jQuery動態生成HTML項目列表的一般示例（請評論如果不合適，我將刪除）。

將項目數據放在對象中（可以是標題，鏈接，img，描述等）。
將每個新項目添加到項目數組。
循環通過項目數組動態生成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>

來源

2017-10-07 02:37:58 Syden

什麼是使用我自己的數據生成html的最佳方式？

回答

相關問題