Question

我有一个网站，其中我完成了基本布局，设计，字体，样式，CSS等。

对于几乎整个网站，侧边栏，页脚，背景等布局将保持不变。还使用了自定义嵌入字体。

由于这个基本布局在整个网站上都保持不变，我想问一下如何防止用户再次下载此内容（如侧栏，字体或javascript等），以便其他启动后的页面不会占用起始页面的时间。

我确信会有一些机制，因为大多数网站的页面都有页眉/页脚/侧边栏。我的网站是普通的html / css，并没有使用后端。有什么想法吗？

Answer 1

您的图片，字体，CSS和其他内容很可能会在首次点击时被客户端的浏览器缓存，因此只会下载一次。

对于html页面本身，因为你使用静态html内容，我能想到的唯一方法是使用AJAX请求。

Answer 2

您可能想要使用包含。因此，在每个页面上，您都有一个标题包括，页脚包含，侧边栏包括甚至包含指向您的css / js文件的链接的包含。

最简单的方法是将您的页面更改为.php页面，并使用php includes来提取头文件，页脚文件等。

Answer 3

您可以使用Jekyll等静态网站生成器。

Answer 4

您可以先设计基本布局。

避免inline和embedded CSS最大值，并添加class（可以分配给多个）或id（可以分配给单个）到公共选择器。
制作一个类似master.css的主样式表，并将其附加到每个页面。

希望这有帮助。

Answer 5

你可以用两种方式做到这一点。您说您没有后端，但托管您网站的服务器可能是后端。

没有任何后端互动： 如果您真的不想使用后端，可以将其设为单页网站，并使用一些javascript来切换您在那里的内容。我们的想法是拥有您的网站结构，并且您可以按照通常的方式使用默认数据。但是你也有隐藏div中其他页面的html。然后，当您想切换到关于链接时，使用javascript从隐藏的div获取内容，并将该内容放在主div中。

 <!--First lets use jquery thought it can use some other framework-->
<script src="http://code.google.com/apis/ajaxlibs/documentation/index.html#jquery"></script>
<script>
    $('a[href=#myAboutPage]').on('click',function(){//Whenever link that points to #myAboutPage is clicked
         var getHTMLFROM = document.getElementById('myAboutPageHiddenContent').innerHTML;

         //And place it on main div
         document.getElementById('mainDivContent').innerHTML = getHTMLFROM
    });
</script>

如果您想使用某些ajax互动： 除了getHTMLFROM内容之外，该过程将是相同的，实际上是您从服务器请求的html文件。

这两种面向javascript的方法都可行，但如果您希望自己的信息对SEO友好，则不建议使用。随之而来的是重用外部的css，以最大限度地减少重新加载界面的样式。

Answer 6

肯定有很多方法可以做到这一点。我是动态包容的粉丝。这是一个很棒的教程的链接，它解释了如何非常简单地为自己的页面设置它。 Dynamic Inclusion Tutorial 注意：不要使用PHP，或者必须将文件扩展名更改为PHP。它根本不会改变您的编码体验。它只会增强你的能力。

我也使用了Javascript功能来隐藏某些元素。根据您网站的大小，重新加载CSS和导航元素可能同样容易。但是，如果你真的不希望你的菜单和徽标在重新加载时暂时闪烁，你可以用一点JS隐藏/显示元素。

以下是我网站上的一个示例功能：

function toggleVisible(e){
var i = e.id;
if(e.className == 'collapsed')
{
    e.className = 'expanded';
    e.innerHTML = 'Hide'
    var hiddenArray = document.getElementsByClassName('hidden' + i);
    hiddenArray[0].setAttribute('class', 'expanded' + i);
}
else if (e.className == 'expanded')
{
    e.className = 'collapsed';
    e.innerHTML = 'Show More';
    var expandedArray = document.getElementsByClassName('expanded' + i);
    expandedArray[0].setAttribute('class', 'hidden' + i);
}

}

单击以下链接时将运行上述代码：

<a href="anywebsite.com">ANYWEBSITE.com</a>  ||  <a onClick="toggleVisible(this)" id="4" class="collapsed">Show More</a> || <a href="document.pdf">View PDF</a>

另外，另一位用户提到了缓存。缓存似乎不可靠。有关详细信息，请查看以下链接：

在网页上保持基本布局相同

6 个答案: