從單獨的 HTML 模板中獲取內容並在另一個模板上使用它們
[英]Taking contents from separate HTML templates and using them on another
問題描述
尋找一些提示。 我有兩個正在使用的 HTML 模板。 第一個是我全面使用的標准，第二個有一個投資組合頁面，其中包含我想在我的標准模板中使用的元素。 我想保持 header 和頁腳相同，但有來自第二個模板的內容。 這怎么可能實現？
我從第二個模板中獲取了根文件夾，並制作了一個副本，並將其粘貼到我的標准模板的根文件夾中。 我復制了 html 以鏈接到第二個模板中的樣式表，並將其粘貼到標准模板中，但內容仍然沒有顯示。 這是我所擁有的：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- Page Title -->
<title>Not Found - Alioth</title>
<!--/ Page Title -->
<meta name="author" content="Pe Themes">
<meta name="description" content="Creative Portfolio & Agency Template">
<meta name="keywords" content="portfolio, agency, personal, creative">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<!-- Portfolio Template Stylesheets (what you can see is I linked them within the template folder I pasted in to the main root folder) -->
<link href="Portfolio/css/reset.css" rel="stylesheet" >
<link href="Portfolio/includes/fontawesome/icons.css" rel="stylesheet" >
<link href="Portfolio/js/locomotive-scroll/locomotive-scroll.css" rel="stylesheet" >
<link href="Portfolio/js/magnific-popup/magnific-popup.css" rel="stylesheet" >
<link href="Portfolio/js/flexslider/flexslider.css" rel="stylesheet" >
<link href="Portfolio/js/swiper/swiper.css" rel="stylesheet" >
<link href="Portfolio/js/plyr/plyr.css" rel="stylesheet" >
<link href="Portfolio/css/styles.css" rel="stylesheet" >
<!-- End Stylesheets -->
<!-- Standard Template Stylesheets --!>
<link href="css/plugins.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<!-- Favicons -->
<link rel="shortcut icon" href="img/favicon.png" />
<link rel="apple-touch-icon" href="img/favicon.png" />
<!--/ Favicons -->
到目前為止，還沒有丟掉任何東西。 但我的內容根本沒有顯示。 有小費嗎？？
這是我試圖遷移到標准模板的代碼。
<!-- Begin Main -->
<div class="portfolio pixi" data-displacement-image="portfolio/images/nm-04.jpg">
<div class="projects-container">
<div class="wrapper">
<article data-year="2021">
<a href="project-sample-1.html">Audi RS7</a>
<div class="image-text">
<a href="project-sample-1.html">Audi RS7</a>
</div>
<div class="images">
<img src="images/project-1-6.jpg" alt="">
<img src="images/project-1-3.jpg" alt="">
<img src="images/project-1-4.jpg" alt="">
</div>
<div class="mobile">
<a href="project-sample-1.html">
<span>Audi RS7</span>
<img src="images/project-1-3.jpg" alt="">
</a>
</div>
</article>
<article data-year="2021">
<a href="project-sample-4.html">Zero Motors</a>
<div class="image-text">
<a href="project-sample-4.html">Zero Motors</a>
</div>
<div class="images">
<img src="images/project-4-2.jpg" alt="">
<img src="images/project-4-3.jpg" alt="">
<img src="images/project-4-1.jpg" alt="">
<img src="images/project-4-4.jpg" alt="">
</div>
<div class="mobile">
<a href="project-sample-4.html">
<span>Zero Motors</span>
<img src="images/project-4-1.jpg" alt="">
</a>
</div>
</article>
<article data-year="2021">
<a href="project-sample-2.html">Swiss Alps</a>
<div class="image-text">
<a href="project-sample-2.html">Swiss Alps</a>
</div>
<div class="images">
<img src="images/project-3-2.jpg" alt="">
<img src="images/project-3-4.jpg" alt="">
<img src="images/project-3-1.jpg" alt="">
<img src="images/project-3-5.jpg" alt="">
<img src="images/project-3-6.jpg" alt="">
</div>
<div class="mobile">
<a href="project-sample-2.html">
<span>Swiss Alps</span>
<img src="images/project-3-1.jpg" alt="">
</a>
</div>
</article>
<article data-year="2020">
<a href="project-sample-5.html">Wildlings</a>
<div class="image-text">
<a href="project-sample-5.html">Wildlings</a>
</div>
<div class="images">
<img src="images/project-5-3.jpg" alt="">
<img src="images/project-5-1.jpg" alt="">
<img src="images/project-5-4.jpg" alt="">
<img src="images/project-5-5.jpg" alt="">
<img src="images/project-5-6.jpg" alt="">
</div>
<div class="mobile">
<a href="project-sample-5.html">
<span>Wildlings</span>
<img src="images/project-5-1.jpg" alt="">
</a>
</div>
</article>
<article data-year="2020">
<a href="project-sample-6.html">Dubai</a>
<div class="image-text">
<a href="project-sample-6.html">Dubai</a>
</div>
<div class="images">
<img src="images/project-6-1.jpg" alt="">
<img src="images/project-6-3.jpg" alt="">
<img src="images/project-6-5.jpg" alt="">
<img src="images/project-6-6.jpg" alt="">
</div>
<div class="mobile">
<a href="project-sample-6.html">
<span>Dubai</span>
<img src="images/project-6-1.jpg" alt="">
</a>
</div>
</article>
<article data-year="2021">
<a href="project-sample-3.html">Audi A3</a>
<div class="image-text">
<a href="project-sample-3.html">Audi A3</a>
</div>
<div class="images">
<img src="images/project-2-1.jpg" alt="">
<img src="images/project-2-2.jpg" alt="">
<img src="images/project-2-7.jpg" alt="">
</div>
<div class="mobile">
<a href="project-sample-3.html">
<span>Audi A3</span>
<img src="images/project-2-1.jpg" alt="">
</a>
</div>
</article>
<article data-year="2020">
<a href="project-sample-3.html">New York</a>
<div class="image-text">
<a href="project-sample-3.html">New York</a>
</div>
<div class="images">
<img src="images/project-6-13.jpg" alt="">
<img src="images/strips-9.jpg" alt="">
<img src="images/full-10.jpg" alt="">
</div>
<div class="mobile">
<a href="project-sample-3.html">
<span>New York</span>
<img src="images/full-10.jpg" alt="">
</a>
</div>
</article>
<article data-year="2019">
<a href="project-sample-6.html">Last Summer</a>
<div class="image-text">
<a href="project-sample-6.html">Last Summer</a>
</div>
<div class="images">
<img src="images/full-11.jpg" alt="">
<img src="images/grid-3.jpg" alt="">
<img src="images/full-3.jpg" alt="">
</div>
<div class="mobile">
<a href="project-sample-6.html">
<span>Last Summer</span>
<img src="images/full-11.jpg" alt="">
</a>
</div>
</article>
<article data-year="2021">
<a href="project-sample-1.html">Iceland</a>
<div class="image-text">
<a href="project-sample-1.html">Iceland</a>
</div>
<div class="images">
<img src="images/full-8.jpg" alt="">
<img src="images/full-6.jpg" alt="">
<img src="images/grid-11.jpg" alt="">
</div>
<div class="mobile">
<a href="project-sample-1.html">
<span>Iceland</span>
<img src="images/full-8.jpg" alt="">
</a>
</div>
</article>
</div>
</div>
</div>
<!-- End Main -->
1 個解決方案
解決方案1
0 2022-01-11 22:18:43
我不確定我是否理解您的問題，但我認為更好的選擇是從第二個模板中復制所需的代碼並在新模板中將其視為新的，這樣，您可以應用您的 CSS 樣式，而無需參考前面模板。
它應該是一個獨立的模板而不參考第一個
編譯Angular組件，在HTML頁面中將它們分開並一起使用
[英]Compiling Angular components separate and using them together in an HTML page
Django模板。 我輸入了郵件參數，如何將它們發送到包含include的另一個html？
[英]Django templates. I get in my mail parameters, how can I send them to another html with include?
如何使用javascript將一個html頁面上的div內容與另一頁面上的div內容更改？
[英]How to change the content of a div on one html page with the contents of a div from another page using javascript?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.