DedeCMS手机模板开发教程如何快速上手？

实战步骤三：开发列表页和内容页模板

移动端的列表页和内容页也需要单独制作。

1. 列表页模板：

   • 文件路径：/templets/m/list_栏目ID.htm 或 /templets/m/list_default.htm。
   • 制作方法：
     1. 复制 PC 端的列表页模板（如 /templets/default/list_栏目ID.htm）到 /templets/m/ 目录。
     2. 打开复制的文件，进行和首页类似的修改：简化结构、优化 CSS、添加 viewport 和切换按钮。
     3. DedecCMS 会自动根据栏目ID调用对应的移动端列表页模板。

2. 内容页模板：

   • 文件路径：/templets/m/article_栏目ID.htm 或 /templets/m/article_default.htm。
   • 制作方法：
     1. 复制 PC 端的内容页模板（如 /templets/default/article_栏目ID.htm）到 /templets/m/ 目录。
     2. 打开复制的文件，进行修改：
        • 优化文章内容显示 {dede:field.body/} 可能会包含很多 PC 端的样式（如 table、font 等），这些在移动端显示会很乱，你可能需要写一些 CSS 来覆盖这些样式，或者通过修改 include/arc.archives.class.php 文件来过滤掉不兼容的标签（此方法较复杂，不推荐新手尝试）。
        • 简化文章信息：只保留标题、发布时间、来源、点击量等核心信息。
        • 优化评论和分享功能：确保评论框和分享按钮在移动端易于点击。
        • 同样，别忘了添加 viewport 和切换按钮。

实战步骤四：实现栏目和内容的自动跳转

这是提升用户体验的关键一步，当用户通过手机访问一个 PC 端的栏目或文章链接时,应该自动跳转到对应的移动端页面。

1. 修改 /include/arc.archives.class.php（文章页跳转）：

   • 用编辑器打开这个文件。
   • 找到 function GetBody 函数（大约在 150 行左右）。
   • 在函数内，$body = preg_replace("/<([^>]+)style=\"(.+?)\"([^>]*)>/i", '<\\1\\3>', $body); 这行代码的后面，添加以下代码：

     // 自动添加移动端适配代码
     if(!is_mobile()){
         $body = '<!-- <div class="pc-notice">您正在访问电脑版，<a href="'.$this->Fields['mobileurl'].'">点击访问手机版</a>获得更好体验！</div> -->' . $body;
     }

   • 注意：上面的代码是可选的，它会提示用户，更直接的方式是直接跳转，但这可能会影响 SEO,通常推荐使用下面更优雅的方式。

2. 修改 /include/arc.listview.class.php（列表页跳转）：

   • 用编辑器打开这个文件。
   • 找到 function GetList 函数。
   • 在函数内，找到生成列表链接的地方（通常有 $this->Fields['arcurl'] 或类似的变量）。
   • 在生成链接之前，判断是否为移动端，如果是，则替换链接为移动端链接，这个修改相对复杂，需要对 PHP 有一定了解。

3. 推荐：使用 JS 进行跳转（更简单、更常用）： 这是一种更简单且不会影响后端 PHP 代码的方法，我们可以在所有 PC 端模板的 head 部分加入一段 JS 代码。

   • 在 PC 端模板的 head 中加入以下代码：

     <script>
     function browserRedirect() {
         var sUserAgent = navigator.userAgent.toLowerCase();
         var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
         var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
         var bIsMidp = sUserAgent.match(/midp/i) == "midp";
         var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
         var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
         var bIsAndroid = sUserAgent.match(/android/i) == "android";
         var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
         var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
         if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
             // 如果是移动端，并且当前网址不是移动端网址，则跳转
             if (window.location.href.indexOf("m.") < 0) {
                 // 这里 /m/ 是你的移动端目录，请根据实际情况修改
                 window.location.href = window.location.href.replace('www.', 'm.').replace('index.html', ''); 
                 // 或者直接跳转到首页
                 // window.location.href = "{dede:global.cfg_mobileurl/}/";
             }
         }
     }
     browserRedirect();
     </script>

   • 说明：
     • 这段 JS 会检测设备类型。
     • 如果是移动设备，并且当前 URL 不包含 m.（或其他你设定的移动端标识）,就会进行跳转。
     • 你需要根据你的域名结构调整 window.location.href.replace('www.', 'm.') 这部分代码。
     • {dede:global.cfg_mobileurl/} 是系统调用你在后台设置的 手机版网站根网址,是一个更可靠的方式。

进阶技巧与常见问题

1. 如何共用 CSS 和 JS 文件？ 为了减少代码冗余，你可以让 PC 端和移动端共用一套 CSS 和 JS 文件。

   • 将 CSS 和 JS 文件放在一个公共目录，如 /static/。

   • 在 PC 端和移动端的模板中,都通过绝对路径引用它们，

     <link href="{dede:global.cfg_cmsurl/}/static/css/common.css" rel="stylesheet">
     <script src="{dede:global.cfg_cmsurl/}/static/js/jquery.min.js"></script>

   • 然后通过 CSS 的媒体查询 @media 来为不同设备编写不同的样式。

     /* 公共样式 */
     .header { background: #333; }
     /* 移动端特有样式 */
     @media screen and (max-width: 768px) {
         .header { background: #f00; } /* 手机上头部变红色 */
     }
     /* PC 端特有样式 */
     @media screen and (min-width: 769px) {
         .header { background: #00f; } /* 电脑上头部变蓝色 */
     }

2. 常见问题：为什么修改了模板没效果？

   • 缓存问题：DedeCMS 和浏览器都有缓存，清空浏览器缓存，或者在后台 【生成】-> 【更新主页HTML】** 一下。
   • 路径错误：检查模板中的所有图片、CSS、JS 路径是否使用了 {dede:global.cfg_cmsurl/} 或 {dede:global.cfg_templets_dir/} 等全局变量,确保路径正确。
   • 文件名错误：确认移动端模板文件名和位置是否正确（如 m/index.htm）。
   • 权限问题：确保 /templets/m/ 目录及其内部文件有正确的读写权限。

3. 如何使用更现代的模板技术？ Dedecms 的模板引擎相对传统，如果你想使用 Vue.js 或 React 等现代前端框架，可以将它们作为“单页应用”嵌入到 Dedecms 的内容页中，由 Dedecms 负责提供数据和路由,前端框架负责复杂的交互和渲染。