帝国CMS二次开发H5手游如何让同一个url 不同的模板

帝国CMS在二次开发《72游戏网》的时候,H5手游如何让同一个url 不同的模板

比如:www.72yy.com/you/11935.html 是H5游戏宣传页

由于很多H5游戏和网页游戏都是需要使用iframe来嵌套使用的 利于自己网站SEO收录优化

那么就再复制一套程序 用二级目录或者二级域名 我这里使用的是二级域名games

那么改造好后就是 games.72yy.com/you/11935.html

其实在后台上面 是一个内容 利用了不同模板而已。帝国CMS的模板是不入数据库的,是储存在本地的。这样就可以参考开手机端的方案 新建模板组 使用相同的数据库去实现了。

查看站内效果演示 列表里也实现了 双url 标题是内容 按钮是iframe页

下面是games二级域名的内容模板iframe代码 

<!doctype html>
<html lang="zh_CN">
<title>  </title>
<meta name="keywords" content="  ">
<meta name="description" content="  ">  
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2">
</head><style>  body, html {  margin: 0;  padding: 0;  height: 100%;  overflow: hidden; /* 防止滚动条出现,如果iframe高度足够的话 */  
overflow-x: hidden; /* 隐藏水平滚动条(如果需要的话) */  }  .fixed-nav {  position: fixed;  top: 0;  left: 0; /* 初始设置为0,之后在媒体查询中调整 */  width: 100%; /* 初始设置为100%,之后在媒体查询中调整 */  height: 53px;  background-color: #ddd841;  display: flex;  align-items: center;  justify-content: space-between;  padding: 0 10px;  box-sizing: border-box;  z-index: 1000; /* 确保导航在其他内容之上 */  
}  /* 媒体查询,针对电脑版(假设屏幕宽度大于或等于768px) */  
@media (min-width: 768px) {  .fixed-nav {  left: 0%;width: 100%;  }  
}  /* 如果需要更精确地针对移动设备(如智能手机),可以使用更小的屏幕宽度值,例如375px或414px */  
/* 例如,以下媒体查询将确保在小于768px的屏幕宽度上,导航栏宽度为100% */  
@media (max-width: 767px) {  .fixed-nav {  left: 0;  width: 100%;  }  
}.logo img {  /* Logo 的样式,例如宽度、高度等 */  width: 50px;  height: 50px;  }  .title {  /* "72游戏" 的样式 */  font-size: 18px;  font-weight: bold;  margin: 0 10px;  }  .download-btn {  /* "点击下载" 按钮的样式 */  padding: 5px 10px;  background-color: #ff8100;  color: #fff;  border-radius: 4px;  text-decoration: none;  transition: background-color 0.3s ease;  }  .download-btn:hover {  background-color: #0056b3;  }  iframe {  position: absolute; /* 或者使用 relative/fixed/sticky,取决于你的布局需求 */  top: 0px; /* 确保 iframe 在导航下方开始 */  left: 0;  width: 100%;  height: calc(100% - 0px); /* 减去导航的高度 */  border: none;  z-index: 1; /* 默认情况下不需要设置,但如果iframe内容有z-index,则需要确保这个值低于导航 */  }  </style>  
</head>  
<body>  <div class="fixed-nav">  <div class="logo"><img src="/icon.png" alt="img" alt="手游盒子"></div>  <div class="title">H5游戏盒子</div>  <a href="/" class="download-btn">点击下载</a>  </div> <iframe  src="外链" frameborder="0"></iframe> </div>  
</body>  

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/30638.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

一种基于非线性滤波过程的旋转机械故障诊断方法(MATLAB)

在众多的旋转机械故障诊断方法中&#xff0c;包络分析&#xff0c;又称为共振解调技术&#xff0c;是目前应用最为成功的方法之一。首先&#xff0c;对激励引起的共振频带进行带通滤波&#xff0c;然后对滤波信号进行包络谱分析&#xff0c;通过识别包络谱中的故障相关的特征频…

【Linux基础IO】重定向以及原理分析

我们先来看下面一个情况&#xff1a; #include <stdio.h> #include <string.h> #include <unistd.h> #include <sys/types.h> #include <sys/stat.h> #include <fcntl.h> #define filename "text.txt"int main(){close(1);//关…

[Linux] 系统管理

全局配置文件 用户个性化配置 配置文件的种类 alias命令和unalias命令 进程管理 进程表

使用Docker在Mac上部署OnlyOffice,预览编辑word、excel、ppt非常好

前端编辑word、ppt文档&#xff0c;开源免费方案并没有找到合适的&#xff0c;像wps、石墨文档都是自研的方案。实现过程中wps采用的svg方案&#xff0c;而石墨文档采用的是canvas&#xff0c;它们均是自己来实现编辑器&#xff0c;不依赖浏览器提供的编辑器&#xff08;conten…

嵌入式Linux:Linux系统中文件类型

目录 1、普通文件 2、目录文件 3、字符设备文件 4、块设备文件 5、符号链接文件 6、套接字文件 7、管道文件 8、stat命令和ls命令 8.1、stat命令 8.2、ls命令 9、stat、fstat、lstat函数 9.1、stat函数 9.2、fstat函数 9.3、lstat函数 在Windows系统中&#xff0…

【Python】已完美解决:(Python键盘中断报错问题) KeyboardInterrupt

文章目录 一、问题背景二、可能出错的原因三、错误代码示例四、正确代码示例&#xff08;结合实战场景&#xff09;五、注意事项 已解决&#xff1a;Python中处理KeyboardInterrupt&#xff08;键盘中断&#xff09;报错问题 一、问题背景 在Python编程中&#xff0c;当我们运…

Java | Leetcode Java题解之第167题两数之和II-输入有序数组

题目&#xff1a; 题解&#xff1a; class Solution {public int[] twoSum(int[] numbers, int target) {int low 0, high numbers.length - 1;while (low < high) {int sum numbers[low] numbers[high];if (sum target) {return new int[]{low 1, high 1};} else i…

人工智能指数报告

2024人工智能指数报告&#xff08;一&#xff09;&#xff1a;研发 前言 全面分析人工智能的发展现状。 从2017年开始&#xff0c;斯坦福大学人工智能研究所&#xff08;HAI&#xff09;每年都会发布一份人工智能的研究报告&#xff0c;人工智能指数报告&#xff08;AII&…

数据结构:快速排序,归并排序,计数排序的实现分析

✨✨小新课堂开课了&#xff0c;欢迎欢迎~✨✨ &#x1f388;&#x1f388;养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; 所属专栏&#xff1a;数据结构与算法 小新的主页&#xff1a;编程版小新-CSDN博客 1.快排 1.1算法思想 选择一个基准元素&#xff0c;…

服务器SSH 免密码登录

1. 背景 为了服务器的安全着想&#xff0c;设置的服务器密钥非常长。但是这导致每次连接服务器都需要输入一长串的密码&#xff0c;把人折腾的很痛苦&#xff0c;所以我就在想&#xff0c;能不能在终端SSH的时候无需输入密码。 windows 可以使用 xshell 软件&#xff0c;会自…

安装react之nvm版本低引起的问题

1.背景 准备搭建一个react&#xff0c;然后看官网文档 创建项目&#xff0c;使用命令行 npx create-next-applatest 创建项目的流程都是正常的。当我准备运行项目的时候&#xff0c;报错了 原先的报错没有了&#xff0c;从网上找了一个类似的 重要的内容是&#xff1a;当前…

锂电池寿命预测 | Matlab基于ARIMA的锂电池寿命预测

目录 预测效果基本介绍程序设计参考资料 预测效果 基本介绍 锂电池寿命预测 | Matlab基于ARIMA的锂电池寿命预测 NASA数据集&#xff0c;B0005号电池&#xff0c;选择前110个数据训练&#xff0c;后58个数据测试预测。程序包含去趋势线、差分、平稳化及AIC准则判定p和q。命令窗…

【调试笔记-20240619-Windows-Typescripts中类型不匹配的解决方法】

调试笔记-系列文章目录 调试笔记-20240619-Windows-Typescripts中类型不匹配的解决方法 文章目录 调试笔记-系列文章目录调试笔记-20240619-Windows-Typescripts中类型不匹配的解决方法 前言一、调试环境操作系统&#xff1a;Windows 10 专业版调试环境调试目标 二、调试步骤搜…

webstorm yarn环境配置

1. 安装nodejs https://nodejs.cn/download/ 2. 安装npm npm i yarn -g3.下载并安装webstorm https://www.jetbrains.com/webstorm/ 4. 打开settings确认node和yarn的配置正确5. 打开项目更新包 yarn install

数据分析第十一讲:pandas应用入门(六)

pandas应用入门&#xff08;六&#xff09; 我们再来看看Index类型&#xff0c;它为Series和DataFrame对象提供了索引服务&#xff0c;有了索引我们就可以排序数据&#xff08;sort_index方法&#xff09;、对齐数据&#xff08;在运算和合并数据时非常重要&#xff09;并实现…

技术与创意并驾齐驱:打造扭蛋机小程序的独特魅力

引言 扭蛋机小程序以其独特的玩法和吸引力&#xff0c;在移动互联网市场中崭露头角。本文将深入探讨如何通过技术与创意的并驾齐驱&#xff0c;打造扭蛋机小程序的独特魅力。 一、技术驱动&#xff1a;打造稳定高效的小程序平台 在扭蛋机小程序的开发过程中&#xff0c;技术是…

Java swing JTable 示例

代码&#xff0c; import java.awt.Container; import javax.swing.JFrame; import javax.swing.JScrollPane; import javax.swing.JTable;public class Mylmlk {public static void main(String[] agrs){JFrame framenew JFrame("学生成绩表");frame.setSize(500,2…

Hadoop升级失败,File system image contains an old layout version -64

原始版本 Hadoop 3.1.3 升级版本 Hadoop 3.3.3 报错内容如下 datasophon 部署Hadoop版本 查看Hadoop格式化版本 which hadoop-daemon.sh/bigdata/app/hadoop-3.1.3/sbin/hadoop-daemon.sh删除原来的旧版本 rm -rf /bigdata/app/hadoop-3.1.3查看环境变量 env|grep HADOOPHAD…

【归档】maven的使用

学习自波波酱老师SSM企业级框架最全教学视频 maven篇 maven的设置 <?xml version"1.0" encoding"UTF-8"?> <settings xmlns"http://maven.apache.org/SETTINGS/1.0.0"xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance&qu…

定制汽车霍尔传感器

磁电效应霍尔传感器、饱和霍尔传感器、非线性霍尔传感器 霍尔传感器原理 霍尔传感器的工作原理基于霍尔效应&#xff0c;即当一块通有电流的金属或半导体薄片垂直地放在磁场中时&#xff0c;薄片的两端会产生电位差。这种现象称为霍尔效应&#xff0c;两端具有的电位差值称为…