子比主题-魔改教程合集(从零开始),打造个性化网站[2024-10-09更新]

前言

我本身也比较注重站点速度,所以以下的教程,我会根据结合魔改实际情况,给出是否建议魔改

具体从以下几个方面来考量

  1. 魔改难易度,是否对源码修改量过大
  2. 对网站速度影响是否过大
  3. 是否需要额外部署其它应用
  4. 是否依赖第三方的API

有言在先

  • 每个人的审美观念不同,所以请先参考本站或测试在用的美化。
  • 主题美化、小工具可能会导致网站加载速度变慢、CSS全局影响等一系列问题,务必在进行美化前进行测试。
  • 主题美化可能会对主题文件进行修改,因此在更新时请及时备份美化的文件,或者收藏本站,以免丢失一些主题页面或美化效果。
  • 子比主题美化都是经过满心自己的努力、测试后才发布的。

魔改说明

  • CSS文件:未从外链引入情况下,默认添加至主题后台>>自定义代码>>自定义CSS样式
  • JS即JavaScript:未从外链引入情况下,默认添加至主题后台>>自定义代码>>自定义javascript代码
  • 小工具:未特殊说明,在前台模块配置>>自定义html将具体html代码填入其中即可

魔改合集

自定义CSS样式

/*文章随机彩色标签开始*/
.article-tags{margin-bottom: 10px}.article-tags a{padding: 4px 10px;background-color: #19B5FE;color: white;font-size: 12px;line-height: 16px;font-weight: 400;margin: 0 5px 5px 0;border-radius: 2px;display: inline-block}.article-tags a:nth-child(5n){background-color: #4A4A4A;color: #FFF}.article-tags a:nth-child(5n+1){background-color: #ff5e5c;color: #FFF}.article-tags a:nth-child(5n+2){background-color: #ffbb50;color: #FFF}.article-tags a:nth-child(5n+3){background-color: #1ac756;color: #FFF}.article-tags a:nth-child(5n+4){background-color: #19B5FE;color: #FFF}.article-tags a:hover{background-color: #1B1B1B;color: #FFF}
/*文章随机彩色标签结束*/

自定义CSS

/* 彩色滚动条 开始 */
::-webkit-scrollbar {
    width: 8px;  /*滚动条宽度*/
    height: 7px;  /*滚动条高度*/
}
/*定义滚动条轨道*/  
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #f6f6f6;
}
/*定义滑块*/  
 ::-webkit-scrollbar-thumb {
   background-color: #12b7f5;
    background-image: -webkit-linear-gradient(45deg, rgba(255, 93, 143, 1) 25%, transparent 25%, transparent 50%, rgba(255, 93, 143, 1) 50%, rgba(255, 93, 143, 1) 75%, transparent 75%, transparent);
    border-radius: 4px;
}
/* 彩色滚动条 结束*/

自定义CSS

/*头像呼吸光环和鼠标悬停旋转放大*/
.avatar{border-radius:50%; animation:light 4s ease-in-out infinite;transition:0.5s;}.avatar:hover{transform: scale(1.15) rotate(720deg);}

1 2 3 4 5

- - - - - 本页内容已结束,喜欢请分享 - - - - -

感谢您的来访,获取更多精彩文章请收藏本站。

© 版权声明
THE END
喜欢就支持一下吧
点赞226 分享
评论 共9条

请登录后发表评论