html,,,,,,DEDE 标签云,, .tag {, display: inlineblock;, margin: 5px;, padding: 5px;, backgroundcolor: #f0f0f0;, borderradius: 3px;, },,,,,, const tags = ['标签1', '标签2', '标签3', '标签4', '标签5'];, const tagCloud = document.getElementById('tagCloud');,, function randomColor() {, return '#' + Math.floor(Math.random() * 16777215).toString(16);, },, function randomFontSize() {, return Math.floor(Math.random() * (32 12 + 1)) + 12 + 'px';, },, tags.forEach(tag => {, const span = document.createElement('span');, span.className = 'tag';, span.textContent = tag;, span.style.color = randomColor();, span.style.fontSize = randomFontSize();, tagCloud.appendChild(span);, });,,,,
`,,这个示例中,我们首先创建了一个包含多个标签的数组
tags。我们遍历这个数组,为每个标签创建一个
元素,并设置其类名为
tag,文本内容为标签名。我们为每个标签随机生成一个颜色值和一个字体大小值,并将它们分别应用到
元素的
style.color和
style.fontSize属性上。我们将
元素添加到
tagCloud`容器中。
在DEDECMS中实现标签云(TAG)随机颜色和字体大小的效果,可以通过修改模板文件和PHP脚本来实现,具体步骤如下:
添加随机颜色和字体大小的函数
1、编辑include/common.func.php文件:在该文件中加入一个自定义函数来生成随机的颜色和字体大小。
function getTagStyle() { $minFontSize = 8; //最小字体大小,可根据需要自行更改 $maxFontSize = 18; //最大字体大小,可根据需要自行更改 return 'fontsize:' . ($minFontSize + lcg_value() * (abs($maxFontSize $minFontSize))) . 'px;color:#' . dechex(rand(0, 255)) . dechex(rand(0, 196)) . dechex(rand(0, 255)); }
2、自定义字体大小数组:如果希望指定几个固定的字体大小而不是完全随机,可以修改函数代码如下:
function getTagStyle() { $sizearray = array('8', '9', '10', '11', '12', '20'); //自定义字体大小,可根据需要自行修改 return 'fontsize:' . $sizearray[array_rand($sizearray)] . 'pt;color:#' . dechex(rand(0, 255)) . dechex(rand(0, 196)) . dechex(rand(0, 255)); }
修改标签云模板
3、编辑模板文件:假设你的标签云模板文件是templets/tagcloud.htm
,你可以修改它如下:
<div class="tagcloud"> {dede:tag row='45' typeid='0'} <a href="[field:tagurl/]" style="fontsize: [!getRandomFontSize()]px; color: [!getRandomColor()] !important;">[field:tagname/]</a> {/dede:tag} </div>
调用模板标签
4、在页面中调用标签云模板:确保你已经包含了common.func.php
文件,否则自定义的函数将无法使用,在页面的适当位置调用标签云模板。
<! 在页面中调用标签云 > <div class="tagcloudcontainer"> {dede:include file="templets/tagcloud.htm" /} </div>
FAQs
Q1: 如何在DEDECMS中实现标签云(TAG)随机颜色和字体大小的效果?
A1: 通过修改include/common.func.php
文件,加入自定义函数getTagStyle()
来生成随机的颜色和字体大小,然后在模板文件中调用该函数并应用到每个标签上,最后在页面中调用标签云模板即可实现。
Q2: 如果只想显示几个固定的字体大小,应该如何修改代码?
A2: 可以将getTagStyle()
函数中的字体大小部分修改为使用自定义的字体大小数组,并使用array_rand()
函数从中随机选择一个字体大小。
function getTagStyle() { $sizearray = array('8', '9', '10', '11', '12', '20'); //自定义字体大小,可根据需要自行修改 return 'fontsize:' . $sizearray[array_rand($sizearray)] . 'pt;color:#' . dechex(rand(0, 255)) . dechex(rand(0, 196)) . dechex(rand(0, 255)); }