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的母版页模板,局部页模板都支持这种方式来实现模板的自动识别和加载。

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

相关文章
|
5天前
|
前端开发 JavaScript 搜索推荐
响应式企业网站模板推荐 | 适配PC/手机/平板| 1对1打造专属企业官网CMS源码
在移动互联网时代,响应式企业网站成为标配,可适配PC、平板、手机等多端设备,提升用户体验与SEO效果。本文详解响应式设计的技术原理(媒体查询、流式布局等)、主流模板推荐(WordPress、Bootstrap、Vue等)及CMS定制开发流程,助力企业高效构建专业官网。
|
5月前
|
编解码 测试技术 文件存储
什么是阿里云无影云手机?看完秒懂,云手机价格、创建及连接教程
阿里云无影云手机是一种基于云端的虚拟手机服务,适用于仿真测试、云游戏、数字人直播等场景。它提供轻量型、通用型、标准型和性能型四种规格,支持包年包月与按量付费模式,价格从65元/月起。使用时需创建实例组,选择地域、规格、镜像等配置,并完成支付。应用可通过控制台安装,连接方式包括管理控制台、无影客户端及ADB工具。详尽教程助您快速上手无影云手机。
605 3
|
4月前
|
安全 Go 开发工具
HarmonyOS5云服务技术分享--手机号登录教程
本文详细讲解了在HarmonyOS中集成手机号认证功能的全流程。首先分析了手机号认证的优势,如用户友好、安全性强及快速接入。接着介绍了环境准备步骤,包括集成AGC认证SDK、开启手机认证能力及添加必要权限。核心功能实现部分提供了新用户注册、密码登录和验证码登录的代码示例。此外,还涵盖了账号管理技巧,如修改绑定手机号、重置密码等,并提供了避坑指南和扩展能力建议,帮助开发者轻松实现安全高效的认证系统。
|
5月前
|
编解码 测试技术 文件存储
阿里云无影云手机怎么用?非常简单,云手机创建、价格及连接使用图文教程
阿里云无影云手机是一种虚拟化手机服务,适用于仿真测试、云游戏、数字人直播等场景。支持包年包月与按量付费两种模式,配置从轻量型到性能型价格不一。使用方法简单:首先创建实例组(选择地域、规格、镜像等),然后安装应用,最后通过管理控制台、无影客户端或ADB连接云手机。详细教程与价格表见文内说明,助您快速上手!
599 2
|
7月前
|
存储 NoSQL 前端开发
美团面试:手机扫描PC二维码登录,底层原理和完整流程是什么?
45岁老架构师尼恩详细梳理了手机扫码登录的完整流程,帮助大家在面试中脱颖而出。该过程分为三个阶段:待扫描阶段、已扫描待确认阶段和已确认阶段。更多技术圣经系列PDF及详细内容,请关注【技术自由圈】获取。
|
10月前
|
Android开发 数据安全/隐私保护 虚拟化
安卓手机远程连接登录Windows服务器教程
安卓手机远程连接登录Windows服务器教程
1983 5
|
10月前
|
API
手机号段查询城市免费API接口教程
此接口用于根据手机号段查询相关信息,包括城市、运营商、区号等。支持POST和GET请求,需提供用户ID、KEY及手机号段前7位作为参数。返回数据包含状态码、信息提示及详细归属信息。示例请求地址:https://cn.apihz.cn/api/ip/haoduan.php?id=88888888&key=88888888&numbers=1321993。接口免费,建议使用个人ID与KEY以独享调用频次。
|
网络协议 Android开发 数据安全/隐私保护
Android手机上使用Socks5全局代理-教程+软件
Android手机上使用Socks5全局代理-教程+软件
8488 2
|
监控 安全 Android开发
【新手必读】Airtest测试Android手机常见的设置问题
【新手必读】Airtest测试Android手机常见的设置问题
414 0

热门文章

最新文章