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

news2024/11/17 7:22:34

帝国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.coloradmin.cn/o/1839261.html

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

相关文章

vue3 页面左右滑动钩子封装

// useSwiper.js文件 import { ref, onMounted, onUnmounted } from "vue"; export function useSwiper({tabList, //tab数据curTabId,// 当前tab idcurTabIndex,// 当前tab 索引tabChange,// tab改变事件animation,// 动画animationData,// 动画 }) {let minOffset …

具备人工智能标记的书签应用Hoarder

什么是 Hoarder &#xff1f; Hoarder 是一款可自托管的书签应用程序&#xff08;链接、笔记和图像&#xff09;&#xff0c;具有基于人工智能的自动标记和全文搜索功能。适合数据囤积者使用。 软件特点&#xff1a; &#x1f517; 为链接添加书签、做简单的笔记并存储图像。⬇…

Redis学习|Redis 是什么、Redis 能干嘛、Window安装Redis、Linux下安装Redis、Redis测试性能

Redis 是什么? Redis(Remote Dictionary Server)&#xff0c;即远程字典服务! 是一个开源的使用ANSI C语言编写、支持网络、可基于内存亦可持久化的日志型、Key-Value数据库&#xff0c;并提供多种语言的API. redis会周期性的把更新的数据写入磁盘或者把修改操作写入追加的记…

DLP数据防泄密系统有什么功能?四款特别好用的DLP仿泄密系统

DLP&#xff08;Data Loss Prevention&#xff0c;数据丢失防护&#xff09;系统是一类专门用于保护组织内部数据不被非法访问、泄露或误用的安全解决方案。 这类系统通常具备以下关键功能&#xff1a; 1.数据识别与分类&#xff1a;自动发现并分类存储在网络、终端和云环境中…

vue3-openlayers 点击多边形弹框,高亮多边形,自定义属性传递,鼠标悬浮多边形上动态修改鼠标样式

本篇介绍一下使用vue3-openlayers点击多边形弹框&#xff0c;高亮多边形&#xff0c;自定义属性传递&#xff0c;鼠标悬浮多边形上动态修改鼠标样式 1 需求 加载天地图&#xff0c;polygon传递自定义属性标悬浮在polygon上&#xff0c;根据自定义属性&#xff0c;动态修改鼠标…

【Unity】Animator动画倒播,与StartRecording动画录制

一、Animator动画倒播 正常我们修改速度&#xff0c;只需要修改Animator.speed即可&#xff0c;但如果设置为负值&#xff0c;Animator系统会自动将其改为0值。 1.创建动画速度参数 (1)设置动画 我们需要创建表示速度的动画参数Speed&#xff0c;将其付给需要倒播的动画片段…

现货白银买卖分析:如何对买卖时机进行分析

现货白银交易是一种保证金交易品种&#xff0c;而且白银日常的市场波动比较大&#xff0c;所以笔者建议投资者在入场之前要对现货白银买卖进行分析&#xff0c;那具体怎么分析呢&#xff1f;实际上就是对买卖的机会进行分析&#xff0c;下面我们就来介绍具体的分析方法。 看K线…

leetcode:2848. 与车相交的点(python3解法)

难度&#xff1a;简单 给你一个下标从 0 开始的二维整数数组 nums 表示汽车停放在数轴上的坐标。对于任意下标 i&#xff0c;nums[i] [starti, endi] &#xff0c;其中 starti 是第 i 辆车的起点&#xff0c;endi 是第 i 辆车的终点。 返回数轴上被车 任意部分 覆盖的整数点的…

移植案例与原理 - HDF驱动框架-OSAL

为了提升驱动代码在不同内核子系统间的可复用能力&#xff0c;OpenHarmony HDF&#xff08;Hardware Driver Foundation&#xff09;驱动框架提供了OSAL(Operating System Abstraction Layer)操作系统抽象层接口。OSAL为驱动程序提供了任务、定时器、互斥锁、信号量等基础库相关…

MFC扩展库BCGControlBar Pro v35.0

LINK : fatal error LNK1104: 无法打开文件“BCGCBPRO2800U140.lib” BCGControlBar v25.0版本 环境VS2015&#xff0c;在运行程序时出现提示错误 &#xff1a;LINK : fatal error LNK1104: 无法打开文件“BCGCBPRO2800U140.lib” 1、需要编译一下BGCControlBar&#xff0c;在…

全国第四轮软件工程学科评估结果

#计算机专业好吗##高考填志愿选择专业##计算机专业还能不能报# 又到了让各位家长头疼的高考填志愿时刻。 前几天的头条&#xff0c;张雪峰直播卖卡3小时入账2亿&#xff0c;为了孩子的前途&#xff0c;家长们确实是不惜重金。 作为毕业如今18个年头一直从事软件领域的老码农&am…

生鲜大单品营销的七项核心工作

生鲜大单品&#xff0c;是指通过选品、采购、营销、门店售卖等环节&#xff0c;达到高销量的单一产品或产品组合。从数据层面上来看&#xff0c;生鲜大单品是指能在该品类中创造20%到50%价值的商品&#xff0c;也就是常说的TOP商品。 做好生鲜大单品&#xff0c;我们需要做到以…

ArcGIS常用操作技巧,快快学起来

ArcGIS 常用操作技巧 快快学起来~ 一、影像格式的转换 例如把jpg格式转换为tiff格式&#xff0c;可以在arctoolbox中的转换工具-->到光栅-->光栅到其他多种格式 (conversiontools-->to Raster-->Raster to Other Format multiple)。 二、矢量化设置捕捉功能 在…

最新版首发 | 手把手教你安装 Vivado2024.1(附安装包)

Q&#xff1a;Vivado出2024版了&#xff01;不知迪普微有没有对应的安装包呢&#xff1f; A&#xff1a;有的&#xff01;回复“Vivado2024.1”即可获得相应安装包哦~ Q&#xff1a;好哒~但是我不会安装&#xff0c;可否安排一期安装教程&#xff1f; A&#xff1a;立马安排&…

Nginx之文件下载服务器

1.概述 在对外分享文件时&#xff0c;利用Nginx搭建一个简单的下 载文件管理服务器&#xff0c;文件分享就会变得非常方便。利 用Nginx的诸多内置指令可实现自动生成下载文件列表 页、限制下载带宽等功能。配置样例如下&#xff1a; server {listen 8080;server_name localhos…

微型导轨的摩擦系数分析!

微型导轨的摩擦力主要包括滑动摩擦力和滚动摩擦力&#xff0c;摩擦系数是一个关键参数&#xff0c;它决定了滑块在导轨上运动时所受到的摩擦力大小&#xff0c;摩擦系数越低&#xff0c;系统的运动效率和精度就越高&#xff0c;而微型导轨的摩擦系数是受多个因素影响的。 微型导…

空间复杂度的相关概念

1. 空间复杂度 空间复杂度&#xff08;space complexity&#xff09;用于衡量算法占用内存空间随着数据量变大时的增长趋势。 统计哪些空间&#xff1a; ● 暂存数据&#xff1a;用于保存算法运行过程中的各种常量、变量、对象等。 ● 栈帧空间&#xff1a;用于保存调用函数…

python学习笔记-08

面向对象基础(OOP)-上 1. 面向对象概述 面向过程&#xff1a;根据业务逻辑从上到下写代码 函数式&#xff1a;将某功能代码封装到函数中&#xff0c;日后便无需重复编写&#xff0c;仅调用函数即可 面向对象(object oriented programming)&#xff1a;将数据与函数绑定到一起…

数据结构---二叉树的性质总结

第i层上的节点数 证明: 二叉树的最大节点数 证明: 第一层对应2^0个节点, 累加得到 这是一个等比数列 求和公式: 那么这里的n指的是一共有多少个相加 根据从b到a一共有b-a1个可推出 有(k-1)-01个相加 那么结果为: 叶节点与度为2的节点关系 证明: 假设二叉树的总节点数为 NNN…

wpfui:一个开源免费具有现代化设计趋势的WPF控件库

wpfui介绍 wpfui是一款开源免费&#xff08;MIT协议&#xff09;具有现代化设计趋势的WPF界面库。wpfui为wpf的界面开发提供了流畅的体验&#xff0c;提供了一个简单的方法&#xff0c;让使用WPF编写的应用程序跟上现代设计趋势。截止写这篇文章&#xff0c;该项目获得了6.7k …