jspXCMS中PC端和手機端如何同時生成靜態頁

這篇文章主要為大家展示了“jspXCMS中PC端和手機端如何同時生成靜態頁”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“jspXCMS中PC端和手機端如何同時生成靜態頁”這篇文章吧。

靜態頁是和圖片類似的靜態資源，訪問靜態資源不會經過程序處理，不會根據瀏覽器返回不同頁面。要同時支持PC端和手機端瀏覽器，且要生成靜態頁時，最好使用bootstrap之類的技術，實現自適應頁面設計。

如果PC端和手機端使用了不同模板，且還需生成靜態頁面，需要解決兩個問題。

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

這就需要另外創建一個手機端的HTML發布點，保存路徑為/m，顯示路徑也為/m。

然后在站點管理里設置手機端HTML發布點為之前新建的HTML手機發布點。

第二，由于PC端的頁面和手機端的頁面地址不同，用戶訪問的時候默認是訪問PC端的頁面。由于訪問的是靜態頁，不經過服務器的程序處理，無法在服務器端判斷是什么瀏覽器訪問。此時需要在PC端的頁面里面加上js代碼，判斷是否為手機端瀏覽器訪問，如果是，則使用js跳轉到手機端的靜態頁。

以下代碼放到PC端模板首頁里，如果手機瀏覽器訪問了PC端首頁，會自動跳轉到手機端的頁面地址。

[#if site.url != site.urlMobile]
<script>
//生成靜態HTML時，需要使用js判斷是否為手機端訪問，并跳轉到手機端地址
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端和手機端如何同時生成靜態頁”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！