問題
我在頁面上有一組帶有鏈接標題的影像。我希望它們每個都有相同的 HTML。
通常，我為每個專案一遍又一遍地復制和粘貼 HTML。問題是，如果我想調整 HTML，我必須為所有這些調整。這很耗時，而且有出錯的風險。
快速而骯臟的模板
我只想撰寫一份 HTML，將內容項列為純文本，在頁面呈現時，HTML 會自動為每個內容項重復。
HTML
<p><img src=IMAGE-URL>
<br>
<a target='_blank' href=LINK-URL>CAPTION</a></p>
內容串列
IMAGE-URL, LINK-URL, CAPTION
/data/khang.jpg, https://khangssite.com, Khang Le
/data/sam.jpg, https://samssite.com, Sam Smith
/data/joy.jpg, https://joyssite.com, Joy Jones
/data/sue.jpg, https://suessite.com, Sue Sneed
/data/dog.jpg, https://dogssite.com, Brown Dog
/data/cat.jpg, https://catssite.com, Black Cat
單品
理想情況下，我可以將單個專案的純文本內容放在頁面上的任何位置，并使用某種識別符號來指示要使用的 HTML 模板（類似于 CSS 類）。
TEMPLATE=MyTemplate1, IMAGE-URL=khang.jpg, LINK-URL=https://khangssite.com, CAPTION=Khang Le
執行
我想在沒有框架、庫等的情況下實作這一點。我想將 HTML 和內容串列放在同一個 .html 檔案中。
絕對沒有資料庫。在一個頁面中設定它應該是快速和簡單的，無需安裝或配置額外的服務。
理想情況下，我想在沒有 javascript 的情況下執行此操作，但這不是嚴格的要求。如果有 javascript，它應該不知道欄位名。理想情況下，非常簡短。請不要jquery。
uj5u.com熱心網友回復：
你是說模板文字（模板字串）？
const arrData =
[ { img: '/data/khang.jpg', link: 'https://khangssite.com', txt: 'Khang Le' }
, { img: '/data/sam.jpg', link: 'https://samssite.com', txt: 'Sam Smith' }
, { img: '/data/joy.jpg', link: 'https://joyssite.com', txt: 'Joy Jones' }
, { img: '/data/sue.jpg', link: 'https://suessite.com', txt: 'Sue Sneed' }
, { img: '/data/dog.jpg', link: 'https://dogssite.com', txt: 'Brown Dog' }
, { img: '/data/cat.jpg', link: 'https://catssite.com', txt: 'Black Cat' }
]
const myObj = document.querySelector('#my-div')
arrData.forEach(({ img, link, txt }) =>
{
myObj.innerHTML = `
<p>
<img src="${img}">
<br>
<a target='_blank' href="${link}">${txt}</a>
</p>`
});<div id="my-div"></div>uj5u.com熱心網友回復：
這個答案是一個完整的解決方案。在 codepen 中編輯 HTML 模板并實時觀察每個副本的布局變化是令人興奮的——類似于編輯 CSS 類并觀看實時變化的體驗。
這是代碼，后面是解釋。
HTML
<span id="template-container"></span>
<div hidden id="template-data">
IMG,, LINK,, CAPTION
https://www.referenseo.com/wp-content/uploads/2019/03/image-attractive.jpg,, khangssite.com,, Khang Le
https://i.redd.it/jeuusd992wd41.jpg,, suessite.com,, Sue Sneed
https://picsum.photos/536/354,, catssite.com,, Black Cat
</div>
<template id="art-template">
<span class="art-item">
<p>
<a href="${LINK}" target="_blank">
<img src="${IMG}" alt="" />
<br>
${CAPTION}
</a>
</p>
</span>
</template>
Javascript
window.onload = function LoadTemplate() {
// get template data.
let sRawData = document.querySelector("#template-data").innerHTML.trim();
// load header and data into arrays
const headersEnd = sRawData.indexOf("\n");
const headers = sRawData.slice(0, headersEnd).split(",,");
const aRows = sRawData.slice(headersEnd).trim().split("\n");
const data = aRows.map((element) => {
return element.split(",,");
});
// grab template and container
const templateHtml = document.querySelector("template").innerHTML;
const container = document.querySelector("#template-container");
// make html for each record
data.forEach((row) => {
let workingCopy = templateHtml;
// load current record into template
headers.forEach((header, column) => {
let value = row[column].trim();
let placeholder = `\$\{${header.trim()}\}`;
workingCopy = workingCopy.replaceAll(placeholder, value);
});
// append template to page, and loop to next record
container.innerHTML = workingCopy;
});
};
在 codepen 上編輯代碼： https ://codepen.io/johnaweiss/pen/YzvYXpv
要求
如問題中所述，此解決方案旨在優化 HTML 端的編碼體驗。這就是任何 Web 模板的全部要點。因此，JS 必須更加努力地作業，以使 HTML 程式員的生活更輕松。
該問題尋求可重用的解決方案。因此，JS應該不知道模板、欄位和資料串列。因此，與@MisterJojo 的回答不同，模板和所有資料都在我的 HTML 中，而不是 javascript。JS代碼是通用的。
設計
我的解決方案是基于<template>標簽，它正是為這種用途而設計的。它具有多種優點，例如模板不由瀏覽器顯示、處理或驗證，因此對性能的影響較小。程式員不必撰寫明確的display:none樣式。
https://news.ycombinator.com/item?id=33089975
但是，<template>標簽通常僅用于將內容加載到布局中。那是不夠的。該工具允許在 HTML 中的任何位置使用模板變數，包括標簽內部（例如屬性，如<img src）。
HTML
我的 HTML 包含三個塊：
- template： HTML 編碼器以真正的 HTML（非純文本）開發他們想要的輸出顯示結構。用途
<template> - 資料：記錄串列，每條記錄都應使用相同的模板呈現。
<span>與 HIDDEN 屬性一起使用。 - 容器：顯示所有輸出塊的地方。使用
<span>。
模板
我的示例模板包含 3 個資料占位符：
${LINK}
${IMG}
${CAPTION}
但是當然你可以使用任何占位符，任意數量。我使用字串文字定界樣式（盡管我實際上并沒有將它們用作字串文字——我只是借用了定界符樣式。）
資料元素
該問題指定資料應存盤在 HTML 中。它應該需要最少的擊鍵。
- 我不想在每一行上重復鍵入欄位名。我沒有使用 slotting、JSO、Jason 或 XML 語法，因為它們都很冗長。 https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_templates_and_slots
- 這是一個簡單的分隔串列。我洗掉了所有大括號、方括號、等號、括號、冒號等。
- 我只將欄位名標題放在第一行。標頭是 HTML 開發人員的視覺輔助工具，也是 Javascript 了解欄位名和順序的關鍵。
- 記錄分隔符：行尾
- 欄位分隔符：雙逗號。看起來很安全，而且很容易輸入。我不希望在任何實際資料中看到雙逗號。請注意，開發人員必須為任何空單元格輸入一個空格，以防止出現意外的雙逗號。如果程式員愿意，他們可以輕松地使用不同的定界符，只要他們更新 Javascript。如果您確定單元格中不會嵌入逗號，則可以使用單逗號。
- 使用
hidden屬性隱藏資料塊。不需要 CSS。 - 這是一個確保它不占用頁面空間的跨度。
JavaScript
資料
資料由 Javascript 使用兩個拆分陳述句處理，首先是換行符分隔符，然后是雙逗號分隔符。這將整個東西放入一個二維陣列中。我的 JS 使用 trims 來根據需要去除多余的空格。
占位符替換
處理多個條目需要將每個條目插入模板。
我使用簡單的字串替換而不是字串文字。
未來
受@MisterJojo 的啟發，我的解決方案的早期版本使用模板文字來進行替換。然而，這有點復雜和冗長，而且似乎需要使用eval. 所以我切換到.replaceAll. 然而，模板文字似乎是一種更適合模板的方法，所以也許我會重新審視它。
未來的版本可能會適應 HTML 開發人員用于資料塊的任何自定義欄位分隔符。
占位符的美元卷曲分隔符輸入起來有點笨拙。所以我有興趣找到一個不會與 HTML 沖突的不那么笨拙的非字母定界符。
也許有更簡單的方法將資料表拉入 JS。
我讀過 components work well with <template>，但我沒有去那里。
Imo，JS 委員會應該為標簽開發一個可變占位符功能<template>，并在本地適應將資料存盤在 HTML 中。如果像這樣的解決方案是渲染引擎的一部分，那就太好了。
我正在開發一個多模板版本。但這可能需要一段時間，因為我個人還不需要它。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/537521.html
標籤：网页格式模板