網(wǎng)站制作教程:PageAdmincms實(shí)現(xiàn)Pc/手機(jī)移動端加載不同的模板!

2024-01-17    分類: 網(wǎng)站建設(shè)

目前網(wǎng)站要同時兼容pc端和移動端的做法通常有2種:

一、響應(yīng)式

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

好處:只需要寫一套模板,維護(hù)一個網(wǎng)站,工作量比較小。

弊端:響應(yīng)式網(wǎng)站要么偏重pc端,要么偏重移動端,很難在兩個端都能獲取到良好的瀏覽體驗(yàn)。

二、pc、移動兩個網(wǎng)站

一般政府,學(xué)?;蛑写笮途W(wǎng)站多采用這種方式,一個pc站,一個手機(jī)站,分別用不同的域名,或者子目錄形式訪問,不同的訪問端打開不同的站點(diǎn),頁面地址完全不一樣。

好處:制作兩套模板,兩個端都可以獲取到好的瀏覽體驗(yàn),前端制作不用考慮兼容性問題。

弊端:由于網(wǎng)站地址不一樣,需要維護(hù)兩個網(wǎng)站,后續(xù)工作量大。

既然傳統(tǒng)做法出有弊端,那么就需要解決這個問題。

現(xiàn)在需要改進(jìn)是的:能否在同一個url地址,然后根據(jù)瀏覽設(shè)備加載不同的模板呢,pc端瀏覽加載pc的模板,手機(jī)端瀏覽加載手機(jī)模板?

答案是肯定的,下面教程演示PageAdmin Cms如何實(shí)現(xiàn)模板的自動識別并加載。

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

這里有個命名約定規(guī)則,手機(jī)端命名必須是 *.mobile.cshtml這種形式,兩個文件內(nèi)容都很簡單,就是一行文字。

index.cshtml文件:

index.mobile.cshtml文件:

2、進(jìn)入欄目管理選擇模板,如下圖:

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

現(xiàn)在測試一下效果,先用電腦瀏覽器打開首頁,效果如下:

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

模板會自動根據(jù)瀏覽設(shè)備來加載不同的模板,不只普通模板頁面支持這種方式,Pageadmin的母板頁模板,局部頁模板都支持這種方式來實(shí)現(xiàn)模板的自動識別和加載。

當(dāng)前標(biāo)題:網(wǎng)站制作教程:PageAdmincms實(shí)現(xiàn)Pc/手機(jī)移動端加載不同的模板!
轉(zhuǎn)載來源:http://muchs.cn/news29/314079.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供Google、電子商務(wù)域名注冊、網(wǎng)站維護(hù)動態(tài)網(wǎng)站、小程序開發(fā)

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)

搜索引擎優(yōu)化