文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >从单独的HTML模板获取内容，并在另一个模板上使用它们

问从单独的HTML模板获取内容，并在另一个模板上使用它们
EN

Stack Overflow用户
提问于 2022-01-11 21:22:52
回答 1查看 77关注 0票数 -1

找些小窍门。我使用两个HTML模板。第一个是我的标准版本，第二个是包含我希望在标准模板中使用的元素的组合页面。我想保持页眉和页脚相同，但有来自第二个模板的内容。如何才能做到这一点？

我从第二个模板中获取了根文件夹，并复制了一个副本，并将其粘贴到我的标准模板的根文件夹中。我复制html链接到第二个模板中的样式表，并将其粘贴到标准模板上，但内容仍然没有显示。我现在拥有的是：

代码语言：javascript
复制
   <!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 -->

到目前为止，还没有任何东西被丢弃。但我的内容根本没有显示出来。有什么建议吗？

下面是我试图迁移到标准模板的代码。

代码语言：javascript
复制
  <!-- 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 -->
html
css
templates
merge
EN

回答 1

Stack Overflow用户

发布于 2022-01-11 22:18:43

我不确定我是否理解您的问题，但我认为更好的选择是从第二个模板中复制所需的代码，并将其视为新模板中的新代码，这样您就可以应用CSS样式，而无需引用之前的模板。

它应该是一个独立的模板，而不是引用第一个模板。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/70673603

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档