帝国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>