所谓亮点功能，一般是用来介绍产品的优势、特色或功能等内容，并以模块的形式展示出来，页面看上去更为美观。之前在使用DUX主题时，用过此功能。网上关于添加亮点的功能，基本上也都是针对DUX主题的。

在这些教程中提到需要修改functions.php，也就是把相关的功能代码添加到functions.php文件中。不过实际测试下来，发现貌似有些问题，亮点功能并没有生效。

其实，使用纯css代码，就可以添加这项功能了，下面是我从QUX主题找到的代码：

/*---------------liangdian------------------*/
.liangdian{margin:0 -2% 10px 0 !important;padding:0;overflow:hidden;clear: both;}.liangdian li{float:left;position:relative;margin:0 2% 2% 0;width:31.33333%;padding:20px 20px;border-radius:2px;text-align:center;border:1px solid #eee;color:#aaa;font-size:12px;height:125px;overflow:hidden;line-height:1.6}.liangdian li::before{position:absolute;top:0;left:0;content:'';background-color:#eee;color:#bbb;line-height:1;padding:4px 5px;font-size:12px;border-radius:0 0 2px 0}.liangdian li:nth-child(1)::before{content:"亮点1"}.liangdian li:nth-child(2)::before{content:"亮点2"}.liangdian li:nth-child(3)::before{content:"亮点3"}.liangdian li:nth-child(4)::before{content:"亮点4"}.liangdian li:nth-child(5)::before{content:"亮点5"}.liangdian li:nth-child(6)::before{content:"亮点6"}.liangdian li:nth-child(7)::before{content:"亮点7"}.liangdian li:nth-child(8)::before{content:"亮点8"}.liangdian li:nth-child(9)::before{content:"亮点9"}.liangdian li:nth-child(10)::before{content:"亮点10"}.liangdian li:nth-child(11)::before{content:"亮点11"}.liangdian li:nth-child(12)::before{content:"亮点12"}.liangdian li:nth-child(13)::before{content:"亮点13"}.liangdian li:nth-child(14)::before{content:"亮点14"}.liangdian li:nth-child(15)::before{content:"亮点15"}.liangdian li:nth-child(16)::before{content:"亮点16"}.liangdian li:nth-child(17)::before{content:"亮点17"}.liangdian li:nth-child(18)::before{content:"亮点18"}.liangdian li:nth-child(19)::before{content:"亮点19"}.liangdian li:nth-child(20)::before{content:"亮点20"}.liangdian li:nth-child(21)::before{content:"亮点21"}.liangdian li:nth-child(22)::before{content:"亮点22"}.liangdian li:nth-child(23)::before{content:"亮点23"}.liangdian li:nth-child(24)::before{content:"亮点24"}.liangdian li:nth-child(25)::before{content:"亮点25"}.liangdian li:nth-child(26)::before{content:"亮点26"}.liangdian li:nth-child(27)::before{content:"亮点27"}.liangdian li:nth-child(28)::before{content:"亮点28"}.liangdian li:nth-child(29)::before{content:"亮点29"}.liangdian li:nth-child(30)::before{content:"亮点30"}.liangdian li:nth-child(31)::before{content:"亮点31"}.liangdian li:nth-child(32)::before{content:"亮点32"}.liangdian li:nth-child(33)::before{content:"亮点33"}.liangdian li:nth-child(34)::before{content:"亮点34"}.liangdian li:nth-child(35)::before{content:"亮点35"}.liangdian li:nth-child(36)::before{content:"亮点36"}.liangdian li:nth-child(37)::before{content:"亮点37"}.liangdian li:nth-child(38)::before{content:"亮点38"}.liangdian li:nth-child(39)::before{content:"亮点39"}.liangdian li:nth-child(40)::before{content:"亮点40"}.liangdian li:nth-child(41)::before{content:"亮点41"}.liangdian li:nth-child(42)::before{content:"亮点42"}.liangdian li:nth-child(43)::before{content:"亮点43"}.liangdian li:nth-child(44)::before{content:"亮点44"}.liangdian li:nth-child(45)::before{content:"亮点45"}.liangdian li:nth-child(46)::before{content:"亮点46"}.liangdian li:nth-child(47)::before{content:"亮点47"}.liangdian li:nth-child(48)::before{content:"亮点48"}.liangdian li:nth-child(49)::before{content:"亮点49"}.liangdian li:nth-child(50)::before{content:"亮点50"}.liangdian li:nth-child(51)::before{content:"亮点51"}.liangdian li:nth-child(52)::before{content:"亮点52"}.liangdian li:nth-child(53)::before{content:"亮点53"}.liangdian li:nth-child(54)::before{content:"亮点54"}.liangdian li:nth-child(55)::before{content:"亮点55"}.liangdian li:nth-child(56)::before{content:"亮点56"}.liangdian li:nth-child(57)::before{content:"亮点57"}.liangdian li:nth-child(58)::before{content:"亮点58"}.liangdian li:nth-child(59)::before{content:"亮点59"}.liangdian li:nth-child(60)::before{content:"亮点60"}.liangdian li::after{position:absolute;bottom:0;left:0;right:0;height:16px;content:'';background-color:#fff}.liangdian li:hover{border-color:#0ae}.liangdian li:hover::before{background-color:#0ae;color:#fff}.liangdian strong{display:block;font-size:15px;font-weight:bold;margin-bottom:5px;color:#555;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}@media (max-width: 768px){.liangdian li{width:48%}}@media (max-width: 544px){.liangdian{margin:0 -2% 20px 0 !important}.liangdian li{height:102px;padding:18px 10px;line-height:1.4;font-size:11px}.liangdian li::before{font-size:10px;padding:4px;height:16px}.liangdian strong{font-size:12px}}

只是，在Modown主题中直接用上边的代码，会导致亮点模块下方的几行内容被隐藏或内容错位。而且，还有其他一些问题：

1、字号较小，字体颜色太浅，不方便阅读内容（如上图）；

2、介绍内容文字一旦过多，超出的内容会被遮挡上，无法查看；

因此，我们在此基础上进一步优化了代码，修复了在Modown主题的文章中，内容被隐藏或错位的问题。并调整了显示文字的大小和颜色，同时增加了滚动条可以显示所有内容。具体效果可到下方地址查看：

大前端阿里百秀主题 XIU v7.9 无后门完美破解限制版免费下载 2023-05-31

最终代码如下：

//liangdian
.article-content p {
overflow: hidden;
}

.article-content .liangdian {
margin: 0 -2% 10px 0 !important;
padding: 0;
overflow: hidden;
clear: both;
}

.article-content .liangdian li {
float: left;
position: relative;
margin: 0 2% 2% 0;
width: 31.33333%;
padding: 20px 20px;
border-radius: 2px;
text-align: center;
border: 2px solid #f5f5f5;
color: #333;
font-size: 14px;
height: 125px;
overflow: auto;
line-height: 1.6;
}

.article-content .liangdian li::before {
position: absolute;
top: 0;
left: 0;
content: '';
background-color: #f5f5f5;
color: #555;
line-height: 1;
padding: 4px 5px;
font-size: 14px;
border-radius: 0 0 2px 0;
}

.article-content .liangdian li:nth-child(1)::before {content: "1"}
.article-content .liangdian li:nth-child(2)::before {content: "2"}
.article-content .liangdian li:nth-child(3)::before {content: "3"}
.article-content .liangdian li:nth-child(4)::before {content: "4"}
.article-content .liangdian li:nth-child(5)::before {content: "5"}
.article-content .liangdian li:nth-child(6)::before {content: "6"}
.article-content .liangdian li:nth-child(7)::before {content: "7"}
.article-content .liangdian li:nth-child(8)::before {content: "8"}
.article-content .liangdian li:nth-child(9)::before {content: "9"}
.article-content .liangdian li:nth-child(10)::before {content: "10"}
.article-content .liangdian li:nth-child(11)::before {content: "11"}
.article-content .liangdian li:nth-child(12)::before {content: "12"}
.article-content .liangdian li:nth-child(13)::before {content: "13"}
.article-content .liangdian li:nth-child(14)::before {content: "14"}
.article-content .liangdian li:nth-child(15)::before {content: "15"}
.article-content .liangdian li:nth-child(16)::before {content: "16"}
.article-content .liangdian li:nth-child(17)::before {content: "17"}
.article-content .liangdian li:nth-child(18)::before {content: "18"}
.article-content .liangdian li:nth-child(19)::before {content: "19"}
.article-content .liangdian li:nth-child(20)::before {content: "20"}
.article-content .liangdian li:nth-child(21)::before {content: "21"}
.article-content .liangdian li:nth-child(22)::before {content: "22"}
.article-content .liangdian li:nth-child(23)::before {content: "23"}
.article-content .liangdian li:nth-child(24)::before {content: "24"}
.article-content .liangdian li:nth-child(25)::before {content: "25"}
.article-content .liangdian li:nth-child(26)::before {content: "26"}
.article-content .liangdian li:nth-child(27)::before {content: "27"}
.article-content .liangdian li:nth-child(28)::before {content: "28"}
.article-content .liangdian li:nth-child(29)::before {content: "29"}
.article-content .liangdian li:nth-child(30)::before {content: "30"}
.article-content .liangdian li:nth-child(31)::before {content: "31"}
.article-content .liangdian li:nth-child(32)::before {content: "32"}
.article-content .liangdian li:nth-child(33)::before {content: "33"}
.article-content .liangdian li:nth-child(34)::before {content: "34"}
.article-content .liangdian li:nth-child(35)::before {content: "35"}
.article-content .liangdian li:nth-child(36)::before {content: "36"}

.article-content .liangdian li::after {
background-color: #fff;
}

.article-content .liangdian li:hover {
border-color: #0ae;
}

.article-content .liangdian li:hover::before {
background-color: #0ae;
color: #fff;
}

.article-content .liangdian strong {
display: block;
font-size: 15px;
font-weight: bold;
margin-bottom: 5px;
color: #444;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

@media (max-width: 768px) {
.article-content .liangdian li {
width: 48%;
}
}

@media (max-width: 544px) {
.article-content .liangdian {
margin: 0 -2% 20px 0 !important;
}
.article-content .liangdian li {
height: 102px;
padding: 18px 10px;
line-height: 1.4;
font-size: 11px;
}
.article-content .liangdian li::before {
font-size: 14px;
padding: 2px 4px;
height: 16px;
}
.article-content .liangdian strong {
font-size: 14px;
}
}

内容已被隐藏

微信扫码或搜索“小白书签”关注公众号，发送“口令”获得提取码，然后返回此网页提交！

提交

document.addEventListener("DOMContentLoaded", function() {
const submitButton = document.getElementById("submit_btn_secret_content_67ab7452028fb");
const passwordBox = document.getElementById("pwbox_secret_content_67ab7452028fb");

submitButton.addEventListener("click", () => {
const key = "1230";
if (passwordBox.value === key) {
document.getElementById("secret_content_67ab7452028fb").style.display = "block";
passwordBox.closest(".gzhhide").style.display = "none";
} else {
alert("密码错误，请重试。");
passwordBox.value = "";
}
});

passwordBox.addEventListener("keypress", (event) => {
if (event.key === "Enter") {
event.preventDefault();
submitButton.click();
}
});
});