• 欢迎访问搞代码网站,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站!
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏搞代码吧

web开发中如何实现皮肤的切换

php 搞代码 3年前 (2022-01-25) 16次浏览 已收录 0个评论
文章目录[隐藏]

在网站开发中,经常有皮肤或者主题切换的功能,比如discuz、wordpress等,只要选择了哪个主题,然后就可以切换到对应的样式中,请问背后的实现原理和逻辑是什么,具体用代码时怎么实现的?(在google和百度上搜了一圈没找打好的相关技术文章,来这里找小伙伴们帮忙解答下疑惑。谢了)

回复内容:

在网站开发中,经常有皮肤或者主题切换的功能,比如discuz、wordpress等,只要选择了哪个主题,然后就可以切换到对应的样式中,请问背后的实现原理和逻辑是什么,具体用代码时怎么实现的?(在google和百度上搜了一圈没找打好的相关技术文章,来这里找小伙伴们帮忙解答下疑惑。谢了)

有两种

  • 一种就是上边说的,切换css,html结构不变。

  • 第二种就是切换目录,一般都是定义一个目录为主题的根目录,子目录就是各种不同的主题,然后通过定义常量或者配置数组或者存到数据库,然后切换不同的目录名称就可以达到切换主题的目的

具体实现代码

<code><?phpdefine('THEME', 'default'); //定义当前使用主题function render($file, $vars = []) {    extract($vars);    ob_start();    include ROOT . '/themes/' . THEME . '/' . $file;    return ob_get_clean();    }</code>

换肤的实现一般是将颜色和背景相关的样式抽取出来,放到单独的样式表。换肤的时候,切换样式表即可。样式表的切换其实是非常简单的,麻烦的是如何去规划你的样式表,当你把皮肤样式抽取后,整个css样式依然还非常清晰,逻辑合理,这就需要比较深厚的css重构功底。

最简单的皮肤只要换个css就够了,HTML页面框架没变,展现修改

复杂点的是对于HTML模板/本2文来源[email protected]搞@^&代*@码2网搞gaodaima代码和CSS的共同替换

这两个方式都很主流

实现都没有什么难度,无非就是你保存一个系统对应的CSS或者HTML模板的路径,请求时输出出来即可

皮肤的切换,前提是你先有几套可选择的皮肤。

皮肤的话,一般指的都是同一个(或多个)HTML 页面,只是 CSS 样式不一样。所以所谓多套皮肤,一般就是多套 CSS 样式。比如:skin1.css/skin2.css/skin3.css 分别表示三套不一样的皮肤。

当用户进行切换时,因为要保持用户此次所选择的皮肤,那么必须要有一个地方去记录下所选择的皮肤(因为下次访问还要记得)。对于是使用 cookie 进行记录,还是数据库或者其他存储介质,那自己选择就可以了。

一般像这种用户个性化定制类的信息(当然,前提这种信息是不重要的),如果你认为皮肤的选择并不很重要,那么可以选择记录到 cookie 中。就算用户清理了 cookie,下次重新选择就好了。当然如果你觉得要永久性记录下本次的皮肤选择,那选择像数据库这种存起来就可以了。

其实提前准备好几套css文件,用JavaScript切换link标签的herf属性,引入不同的css文件就行,用cookie或者数据库保持该用户的皮肤所使用的css的ID

切换 css 肯定是必须的,这就是根本嘛。。但题主既然提了解决方案,我觉得还是有必要说细点

1.像 discuz、wordpress ,甚至更古老一点的 ecshop,皮肤就是很多个文件夹,一个文件夹一个皮肤,要加入新皮肤,直接在 themes(一般都叫这个名字) 这个文件夹下面再加一个就是。到设置界面,配置皮肤的时候,就会加载一下 themes 下面的所有文件夹,然后选一个,存入数据库,非常传统的搞法。

2.现在有些 webapp 的话,皮肤是 css 样式的一种,选了后,把样式信息写入 cookie 或者 localstorge,不过现在这么干的还是很少。。也不推荐。。


搞代码网(gaodaima.com)提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected],我们会在看到邮件的第一时间内为您处理,或直接联系QQ:872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:web开发中如何实现皮肤的切换

喜欢 (0)
[搞代码]
分享 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址