3

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

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

由于这个基本布局将在整个网站上保持不变，我想问我如何才能防止再次为用户下载这些内容（如侧边栏、字体或 javascript 等），以便之后的其他页面start 不需要与起始页一样多的时间。

我相信会有一些机制，因为大多数网站在页面之间都有页眉/页脚/侧边栏。我的网站是纯 html/css，并且没有使用后端。有任何想法吗？

4

6 回答 6

1

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

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

于 2012-08-12T13:34:37.487 回答
0

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

最简单的方法是将您的页面更改为 .php 页面并使用 php 包含来拉入头文件、页脚文件等。

于 2012-08-12T13:32:00.600 回答
0

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

于 2012-08-12T13:33:12.323 回答
0

您可以先设计一个基本布局。

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

希望这可以帮助。

于 2012-08-12T13:37:38.230 回答
0

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

没有任何后端交互： 如果你真的不想使用后端，你可以把它做成一个单页网站，用一些 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，以最大限度地减少每次重新下载界面样式。

于 2012-08-12T14:13:00.337 回答
0

肯定有很多方法可以做到这一点。我是动态包容的粉丝。这是一个很棒的教程的链接，它解释了如何非常简单地为您自己的页面设置它。动态包含教程 注意：不要害怕 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>

此外，另一位用户提到了缓存。缓存似乎不可靠。查看以下链接了解更多信息：

于 2012-08-12T16:07:06.183 回答