PageAdmin Cms建站系统教程:如何实现Pc/手机移动端加载不同的模板

简介: PageAdmin CMS建站系统模板制作基础教程

目前网站要同时兼容pc端和移动端的做法通常有两种:

**一、响应式
**
通过css样式控制页面在pc和移动端的缩放来兼容屏幕,目前很多中小企业网站、或界面简单的网站多采用这种方式。

好处:只需要写一套模板,维护一个网站,工作量比较小。

弊端:响应式网站要么偏重pc端,要么偏重移动端,很难在两个端都能获取到良好的浏览体验。

二、pc、移动两个网站

一般政府,学校或中大型网站多采用这种方式,一个pc站,一个手机站,分别用不同的域名,或者子目录形式访问,不同的访问端打开不同的站点,页面地址完全不一样。

好处:制作两套模板,两个端都可以获取到好的浏览体验,前端制作不用考虑兼容性问题。

弊端:由于网站地址不一样,需要维护两个网站,后续工作量大。

既然传统做法出有弊端,那么就需要解决这个问题。

现在需要改进是的:能否在同一个url地址,然后根据浏览设备加载不同的模板呢,pc端浏览加载pc的模板,手机端浏览加载手机模板?

答案是肯定的,下面教程演示PageAdmin Cms如何实现模板的自动识别并加载。

1、首先在模板目录下,新建一个名为:首页的文件夹,文件夹下新建两个文件,index.cshtml和index.mobile.cshtml,如下图:
1.png

这里有个命名约定规则,手机端命名必须是 *.mobile.cshtml这种形式,两个文件内容都很简单,就是一行文字。

index.cshtml文件:
2.png

index.mobile.cshtml文件:
3.png

2、进入栏目管理选择模板,如下图。
4.png

注意:这里选择不带.mobile.cshtml的模板文件。

现在测试一下效果,先用电脑浏览器打开首页,效果如下:
5.png

然后浏览器切换到移动端模板,刷新一下页面,效果如下:
6.png

模板会自动根据浏览设备来加载不同的模板,不只普通模板页面支持这种方式,Pageadmin的母版页模板,局部页模板都支持这种方式来实现模板的自动识别和加载。

希望这篇文章可以帮助到大家。

相关文章
|
6天前
|
JSON 前端开发 数据安全/隐私保护
【教程】iOS 手机抓包工具介绍及教程
📱 最近又发现APP Store一款宝藏软件,克魔助手抓包工具,app刚上架,功能不断迭代中,目前18软妹币实惠价可享受终身版!现在是下手的最好时机。
|
6天前
|
编解码 测试技术 API
模拟手机设备:使用 Playwright 实现移动端自动化测试
本文介绍了使用Python的Playwright库进行移动设备模拟和自动化测试的方法。通过Playwright,开发者能模拟不同设备的硬件和软件特性,如屏幕尺寸、用户代理,以确保网站在移动设备上的表现。示例代码展示了如何模拟iPhone X并访问网站,之后可在此基础上编写测试代码以检验响应式布局和交互功能。Playwright的设备参数注册表支持多种设备,简化了移动端自动化测试的流程。
17 1
|
6天前
|
Android开发 Windows 内存技术
刷机不求人 HTC手机刷机教程指南(转)
刷机不求人 HTC手机刷机教程指南(转)
14 3
|
6天前
|
移动开发 前端开发 搜索推荐
分享48个手机站模板,总有一款适合您
分享48个手机站模板,总有一款适合您
53 0
|
6天前
|
Android开发 iOS开发
【教程】如何在苹果手机上查看系统文件?
苹果手机与安卓手机不同,无法直接访问系统文件夹。但是,如果我们想要查看苹果手机的系统文件,可以借助一些工具来实现。本文将介绍一款名为克魔助手的iOS设备管理软件,它能帮助我们轻松查看苹果手机的系统文件。 连接iPhone到电脑,打开克魔助手,用数据线将iPhone连接到电脑上。连接成功后,克魔助手会自动读取iPhone的信息,并显示在软件的主界面上。
【教程】如何在苹果手机上查看系统文件?
|
6天前
|
JavaScript 前端开发 iOS开发
移动端(vue)如何调用手机拨号功能
移动端(vue)如何调用手机拨号功能

热门文章

最新文章