網站制作教程：PageAdmincms實現Pc/手機移動端加載不同的模板！

2024-01-17 分類：網站建設

目前網站要同時兼容pc端和移動端的做法通常有2種：

一、響應式

通過css樣式控制頁面在pc和移動端的縮放來兼容屏幕，目前很多中小企業網站、或界面簡單的網站多采用這種方式。

好處：只需要寫一套模板，維護一個網站，工作量比較小。

弊端：響應式網站要么偏重pc端，要么偏重移動端，很難在兩個端都能獲取到良好的瀏覽體驗。

二、pc、移動兩個網站

一般政府，學校或中大型網站多采用這種方式，一個pc站，一個手機站，分別用不同的域名，或者子目錄形式訪問，不同的訪問端打開不同的站點，頁面地址完全不一樣。

好處：制作兩套模板，兩個端都可以獲取到好的瀏覽體驗，前端制作不用考慮兼容性問題。

弊端：由于網站地址不一樣，需要維護兩個網站，后續工作量大。

既然傳統做法出有弊端，那么就需要解決這個問題。

現在需要改進是的：能否在同一個url地址，然后根據瀏覽設備加載不同的模板呢，pc端瀏覽加載pc的模板，手機端瀏覽加載手機模板？

答案是肯定的，下面教程演示PageAdmin Cms如何實現模板的自動識別并加載。

1、首先在模板目錄下，新建一個名為：首頁的文件夾，文件夾下新建兩個文件，index.cshtml和index.mobile.cshtml，如下圖：

這里有個命名約定規則，手機端命名必須是 *.mobile.cshtml這種形式，兩個文件內容都很簡單，就是一行文字。

index.cshtml文件：

index.mobile.cshtml文件：

2、進入欄目管理選擇模板，如下圖：

注意：這里選擇不帶.mobile.cshtml的模板文件。

現在測試一下效果，先用電腦瀏覽器打開首頁，效果如下：

然后瀏覽器切換到移動端模板，刷新一下頁面，效果如下：

模板會自動根據瀏覽設備來加載不同的模板，不只普通模板頁面支持這種方式，Pageadmin的母板頁模板，局部頁模板都支持這種方式來實現模板的自動識別和加載。

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：[email protected]。內容未經允許不得轉載，或轉載時需注明來源：創新互聯

猜你還喜歡下面的內容

中文字幕第五页-中文字幕第页-中文字幕韩国-中文字幕最新-国产尤物二区三区在线观看-国产尤物福利视频一区二区