jspXCMS中PC端和手機(jī)端如何同時(shí)生成靜態(tài)頁(yè)

這篇文章主要為大家展示了“jspXCMS中PC端和手機(jī)端如何同時(shí)生成靜態(tài)頁(yè)”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“jspXCMS中PC端和手機(jī)端如何同時(shí)生成靜態(tài)頁(yè)”這篇文章吧。

靜態(tài)頁(yè)是和圖片類似的靜態(tài)資源，訪問(wèn)靜態(tài)資源不會(huì)經(jīng)過(guò)程序處理，不會(huì)根據(jù)瀏覽器返回不同頁(yè)面。要同時(shí)支持PC端和手機(jī)端瀏覽器，且要生成靜態(tài)頁(yè)時(shí)，最好使用bootstrap之類的技術(shù)，實(shí)現(xiàn)自適應(yīng)頁(yè)面設(shè)計(jì)。

如果PC端和手機(jī)端使用了不同模板，且還需生成靜態(tài)頁(yè)面，需要解決兩個(gè)問(wèn)題。

第一，PC端和手機(jī)端生成的靜態(tài)頁(yè)面必須保存在不同的目錄，否則PC端的靜態(tài)頁(yè)會(huì)覆蓋手機(jī)端的靜態(tài)頁(yè)。比如PC端和手機(jī)端的首頁(yè)都是/index.html，最終必然只會(huì)保存一個(gè)文件。必須是PC端的首頁(yè)為/index.html，手機(jī)端的首頁(yè)為/m/index.html。其它的頁(yè)面也類似，如PC端的新聞欄目頁(yè)為/news/index.html，手機(jī)端的則為/m/news/index.html。

這就需要另外創(chuàng)建一個(gè)手機(jī)端的HTML發(fā)布點(diǎn)，保存路徑為/m，顯示路徑也為/m。

然后在站點(diǎn)管理里設(shè)置手機(jī)端HTML發(fā)布點(diǎn)為之前新建的HTML手機(jī)發(fā)布點(diǎn)。

第二，由于PC端的頁(yè)面和手機(jī)端的頁(yè)面地址不同，用戶訪問(wèn)的時(shí)候默認(rèn)是訪問(wèn)PC端的頁(yè)面。由于訪問(wèn)的是靜態(tài)頁(yè)，不經(jīng)過(guò)服務(wù)器的程序處理，無(wú)法在服務(wù)器端判斷是什么瀏覽器訪問(wèn)。此時(shí)需要在PC端的頁(yè)面里面加上js代碼，判斷是否為手機(jī)端瀏覽器訪問(wèn)，如果是，則使用js跳轉(zhuǎn)到手機(jī)端的靜態(tài)頁(yè)。

以下代碼放到PC端模板首頁(yè)里，如果手機(jī)瀏覽器訪問(wèn)了PC端首頁(yè)，會(huì)自動(dòng)跳轉(zhuǎn)到手機(jī)端的頁(yè)面地址。

[#if site.url != site.urlMobile]
<script>
//生成靜態(tài)HTML時(shí)，需要使用js判斷是否為手機(jī)端訪問(wèn)，并跳轉(zhuǎn)到手機(jī)端地址
var ua = navigator.userAgent;var ipad = ua.match(/(iPad).*OS\s([\d_]+)/),isIphone = !ipad && ua.match(/(iPhone\sOS)\s([\d_]+)/),isAndroid = ua.match(/(Android)\s+([\d.]+)/),isMobile = isIphone || isAndroid;
if(isMobile) location.href = "${site.urlMobile}";
</script>
[/#if]

以上是“jspXCMS中PC端和手機(jī)端如何同時(shí)生成靜態(tài)頁(yè)”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！