浅谈页面静态化
思想简介
在很多时候我们不得不将页面静态化，比如为了SEO，提高访问速度等。而页面静态化中最难的就是分页列表静态化了。如果是带搜索的页面则是无法静态化的，只能做成伪静态。页面静态化的基本思想其实很简单，就是读取模板然后替换掉模板中的占位符。
下面就以老板让我把公司官网的所有页面静态化为例，简单的介绍一下我的页面静态化思想。
功能简介
支持一键页面静态化，支持动态的向每个静态页加标题，MetaKey，MetaDesc，支持分页列表静态化。
步骤简介
第一步：创建一个头模板和一个尾模板，类似于ASP.NET中的模板页。头尾模板页是为了公用头尾。
第二步：创建各个静态页对应的模板页。
第三步：创建一个模板引擎类，用于替换所有静态页面对应的模板页。
第四步：当操作页面第一次加载时自动静态化首尾模板页（也可以在其它时候静态化首尾）。
第五步：当静态化页面时，替换对应模板页中的占位符，为对应静态页添加首尾静态页并保存到网站指定目录下。
第六步：从对应目录下读取静态页面。
具体步骤
第一步：根据前端设计好的静态页面提前通用的头尾并创建头尾模板页，如下图：
头模板代码如下（可根据实际情况替换）：
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head > 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title>${title}</title> 6 <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" /> 7 <meta name="keywords" content='${key}' /> 8 <meta name="description" content='${desc}' /> 9 <link href="/css/reset.css" rel="stylesheet" /> 10 11 <script src="/js/jquery.js"></script> 12 13 <script src="/js/js.js"></script> 14 15 <script type="text/javascript"> 16 17 18 19 $(function () { 20 var tag; 21 var url = window.location.href; 22 $("#nav li").removeClass('on1'); 23 if (url.indexOf("index") > 0) { 24 $("#nav li").eq(0).addClass('on1'); 25 tag = 0; 26 // return; 27 } 28 else if (url.indexOf("SiteServerDetail") > 0) { 29 $("#nav li").eq(1).addClass('on1'); 30 tag = 1; 31 // return; 32 } 33 else if (url.indexOf("YingXiaoDetail") > 0) { 34 $("#nav li").eq(2).addClass('on1'); 35 tag = 2; 36 // return; 37 } 38 else if (url.indexOf("ProductPriceDetail") > 0) { 39 $("#nav li").eq(3).addClass('on1'); 40 tag = 3; 41 // return; 42 } 43 else if (url.indexOf("messagelist") > 0) { 44 $("#nav li").eq(4).addClass('on1'); 45 tag = 4; 46 // return; 47 } 48 else if (url.indexOf("AboutUsDetail") > 0) { 49 $("#nav li").eq(5).addClass('on1'); 50 tag = 5; 51 //return; 52 } 53 $("#nav li").mouseover(function () { 54 55 $("#nav li").removeClass('on1'); 56 $("#nav li").eq(tag).addClass('on1'); 57 $(this).addClass("on1"); 58 }); 59 $("#nav li").mouseout(function () { 60 61 $("#nav li").removeClass('on1'); 62 $("#nav li").eq(tag).addClass('on1'); 63 // $(this).addClass("on1"); 64 }); 65 66 }); 67 </script> 68 </head> 69 <body> 70 <!--------------------------------------------nav------------------------------------------> 71 <div class="box nav"> 72 <div class="space_20"></div> 73 <a href="/index.html"><img title="首页" src="/images/logo.gif" class="fl" /></a> 74 <div class="fr width520"> 75 <div class="tr margin_40r"> 76 <img src="/images/contact.gif" /> 77 </div> 78 <div class="space_10"></div> 79 <div id="nav"> 80 <li class="fl on1"><a href="/index.html" class="display_inline_block padding_15l padding_15r f14 a1 bold lh40 yahei">首页</a></li> 81 <li class="fl ap" id="nav_menu"> 82 <a href="${SiteLink}" class="display_inline_block padding_15l padding_15r f14 a1 bold lh40 yahei">建站服务 83 </a> 84 <div class="tc ab10 line_height_30 display_none" id="div1"> 85 <div class="space_05"></div> 86 ${jzfw} 87 <div class="space_05"></div> 88 </div> 89 </li> 90 <li class="fl ap" id="yxid"><a href='${YXLink}' class="display_inline_block padding_15l padding_15r f14 a1 bold lh40 yahei">整合营销 </a> 91 <div class="tc ab10 line_height_30 display_none" id="div3"> 92 <div class="space_05"></div> 93 ${zhyx} 94 <div class="space_05"></div> 95 </div> 96 97 </li> 98 <li id="pp" class="fl ap"> 99 <a href="${ProductPriceLink}" class="display_inline_block padding_15l padding_15r f14 a1 bold lh40 yahei">产品报价</a> 100 <div class="tc ab10 line_height_30 display_none" id="div2"> 101 <div class="space_05"></div> 102 ${cpjg} 103 <div class="space_05"></div> 104 </div> 105 </li> 106 <li class="fl"><a href="/MessageList/messagelist-page1.html" class="display_inline_block padding_15l padding_15r f14 a1 bold lh40 yahei">资讯</a></li> 107 <li class="fl"><a href="/AboutUs/AboutUsDetail.html" class="display_inline_block padding_15l padding_15r f14 a1 bold lh40 yahei">联系我们</a></li> 108 </div> 109 </div> 110 </div> 111 112 <!--------------------------------------------nav--------end----------------------------------> 113 <div class="clear"></div> 114 <div class="zx_banner1"> 115 <div class="tc box fad ap"> 116 <ul class="slider overflow_hidden"> 117 <li><img src="/images/banner1.gif" /></li> 118 <li class="display_none"><img src="/images/banner2.gif" /></li> 119 <li class="display_none"><img src="/images/banner3.gif" /></li> 120 </ul> 121 <ul class="num ab10 change"> 122 <li class="fl margin_10r pointer on"></li> 123 <li class="fl margin_10r pointer"></li> 124 <li class="fl margin_10r pointer"></li> 125 </ul> 126 </div> 127 </div> 128 <script src="/js/js2.js" type="text/javascript"></script> 129 <script> 130 slide(".fad", ".slider", ".num"); 131 </script>