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

从小白开始记录码子

于 2024-06-19 15:12:02 发布

阅读量199

点赞数 2

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/foxi666/article/details/139803336

版权

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

从小白开始记录码子

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
帝国CMS二次开发H5手游如何让同一个url 不同的模板

其实在后台上面是一个内容利用了不同模板而已。帝国CMS的模板是不入数据库的，是储存在本地的。这样就可以参考开手机端的方案新建模板组使用相同的数据库去实现了。由于很多H5游戏和网页游戏都是需要使用iframe来嵌套使用的利于自己网站SEO收录优化。比如：www.72yy.com/you/11935.html 是H5游戏宣传页。那么就再复制一套程序用二级目录或者二级域名我这里使用的是二级域名games。列表里也实现了双url 标题是内容按钮是iframe页。
复制链接

扫一扫