返回

如何将PbootCMS网站后台模型颜色选择改成色块输出

PBOOTCMS是一款功能强大的内容管理系统,其后台模板提供了多种颜色选择方式。默认情况下,后台模型的颜色选择是以多选形式展示的,用户可以通过勾选多个颜色来设置模型的颜色。

要将PBOOTCMS后台模型颜色的多选改成色块输出,您可以按照以下步骤进行操作:

1.依次打开目录/APPs/admin/view/default/layui/layui.all.js

2.打开layui.all.js文件

3.搜索下面代码找到

<span>"+n.tITle+"</span>

<span>"+n.tITle+"</span>搜索

4.修改为下面的代码,然后保存

<span style=background:#"+n.title+">"+n.title+"</span>

5.去网站后台,全局配置,模型字段,颜色,修改,输入你要的色卡值,保存(如下图)

输入你要的色卡值

6.清理浏览器缓存,刷新页面查看效果,出现下图代表成功了一半。

刷新页面查看效果

7.前台输出(由于后台用了色卡代码,所以前端需要写颜色筛选样式),以官方默认的代码为例,原始效果如下。

前端没有修改样式效果

8.修改代码如下:其实就是加了一个样式,录入了后台数值:

 {pboot:select field=ext_color}

                      <a href= "[select:link]" class="mb-3 btn {pboot:if('[select:value]'=='[select:current]')}btn-info{else}btn-light{/pboot:if}" style="background-color:#[select:value]">&nbsp;</a>  

                   {/pboot:select}

pbootcms选项卡颜色数值代码修改示例

前端效果展示:

pbootcms选项卡色块前端效果展示

通过利用JS调用数据库值并输出的方法,您可以实现将PBOOTCMS后台模型颜色的多选改成色块输出。请注意,这种方法可能被认为是一种相对简单的解决方案,但也可以满足您的需求。

通过将颜色值中的#字符放置在JS代码和前端HTML样式中,可以更直观地展示颜色,并且能够更好地处理网址和筛选值。

此方法的优化使得网址和筛选值更易于理解和使用。然而,请注意在实施这种方法时要确保代码的安全性和可靠性,以防止潜在的安全风险。

总之,通过将#字符输出在JS代码和前端HTML样式中,您可以更加直观地展示PBOOTCMS后台模型颜色的色卡值,并提高用户体验和可用性。

最后发一个我改好的代码包,需要的自行下载替换:

链接:https://pan.baidu.com/s/1BrCko_l1nHpIvkSICHp5Rw?pwd=3v73 



 

 

 

 

 

 

0