建站笔记

2025-05-24
05-24
子比主题 - 顶部多功能组件导航美化-汇聚访

实用子比主题 – 顶部多功能组件导航美化

这是子比主题的一款快速导航链接美化效果，这个效果最初是在极主题上看到的，于是就照着样式仿了一下，这个效果还是比较适合一些ACG站点的，话不多说喜欢的自行部署吧！ 演示效果： 代码部署： [hidecontent type="reply"] 定位：子比主题–>>页面&显示–>>顶部多功能组件–>>组件【下方】添加额外内容，将下面的代码丢里面即可，如果还不知道在哪，如下图！！ <div class="soft-cat-logo"> <a href="/yxsx"><span> <picture class="picture"> <source type="image/webp" srcset="https://img.dmguo.cn/2025/02/20250212023355196.png"><img class="jitheme-radius" src="https://img.dmguo.cn/2025/02/20250212023355196.png"> </picture> </span><em>游戏资源</em> </a><a href="/7b2"><span> <picture class="picture"> <source type="image/webp" srcset="https://img.dmguo.cn/2025/02/20250212023345786.png"><img class="jitheme-radius" src="https://img.dmguo.cn/2025/02/20250212023345786.png"> </picture> </span><em>主题美化</em> </a><a href="/forums"><span> <picture class="picture"> <source...
8个月前
建站笔记
2025-05-24
05-24
子比主题 - 分类栏目美化（两款）-汇聚访

实用子比主题 – 分类栏目美化（两款）

网站分类栏目美化的意义主要体现在提升用户体验和视觉吸引力，以及优化搜索引擎排名等方面。本文章将给大家分享两种分类栏目美化的教程哦~ 演示效果①： 演示效果②： 代码部署： [hidecontent type="reply"] 将下方代码加入到后台CSS里即可！图片放在帖子附件里了，可自行下载！ 效果①效果② .index-tab ul>li.active { color: #ffffff00 !important; background-color: #ffffff00 !important; border-radius: 6px; z-index: 1; position: relative; height: 39px; line-height: 44px; background: url(https://img.dmguo.cn/2025/01/20250120091106173.png); background-repeat: no-repeat; -webkit-background-size: 91px 39px; -moz-background-size:...
8个月前
建站笔记
2025-05-24
05-24
子比主题 - ajax加载更多按钮美化-汇聚访

实用子比主题 – ajax加载更多按钮美化

给子比主题加一个ajax加载更多按钮的美化，这个美化确实很不错，（提供两种样式) 演示效果①： 演示效果②： 代码部署： [hidecontent type="reply"] 将下面代码放到子比自定义CSS即可 样式一： /*加载更多*/ .chat-next a, .theme-pagination .ajax-next a, .theme-pagination .order-ajax-next a { display: inline-block; width: 130px; -webkit-border-radius: 0 0 16px 16px; -moz-border-radius: 0 0 16px 16px; border-radius: 0 0...
8个月前
建站笔记
2025-05-24
05-24
子比主题 - 仿哔哩哔哩网站页面回顶部的火箭-汇聚访

实用子比主题 – 仿哔哩哔哩网站页面回顶部的火箭

网站添加一个仿哔哩哔哩网站页面回顶部的火箭，小白式部署方式，喜欢的可以设置一波。 演示效果： 代码部署： [hidecontent type="payshow"] 如果是子比主题的话直接填在主题设置里的头部自定义html里即可，其他主题请自行测试！！ HTMLCSSJS <div class="to-top"></div> /*小火箭*/ .to-top { position: fixed; display: none; bottom: 100px; right: 20px; width: 62px; height: 85px; cursor: pointer; background-image: url(https://pic1.imgdb.cn/item/6900b5833203f7be00ac78dc .webp); background-position: -40px -44px; transition: transform 0.3s ease-in;...
8个月前
建站笔记
2025-05-24
05-24
子比主题 - 系统弹窗跳转引导提醒（第一版）-汇聚访

实用子比主题 – 系统弹窗跳转引导提醒（第一版）

尘封已久的代码，今天趁有空就跟大家分享一下！做有关Mac资源的站应该比较有用，该代码可以判断主机系统来显示对应的引导链接，样式简约美观，倒计时自动关闭！ 演示效果： 代码部署： [hidecontent type="reply"] JS代码放入后台！ try { if($ || jQuery) { tipsFun(); } } catch(e) { let script=document.createElement("script"); script.type="text/javascript"; script.src="/jquery.min.js"; document.getElementsByTagName('head')[0].appendChild(script); script.onload = tipsFun; } function tipsFun() { // 判断用户是否是windows if((navigator.platform == "Win32") ||...
8个月前
建站笔记
2025-05-24
05-24
子比主题 - 文章封面角标美化-汇聚访

实用子比主题 – 文章封面角标美化

今天分享的教程是WordPress子比主题美化教程：文章角标及封面图底部美化。简单的来说，就是在文章发布页面增加一个附加选项，可以通过这个附加选项达到我们想要的美化效果！文章发布时可在编辑页底部自行配置输入内容以及颜色，不填写内容则不显示。 演示效果： 代码部署： [hidecontent type="reply"] 一共三个代码，两个PHP代码和一个CSS代码，跟着教程操作就不会有问题！！ func代码zib-posts-list代码CSS代码 定位：/wp-content/themes/zibll/func.php文件，把下方代码添加进去即可： if (class_exists('CSF')) { CSF::createMetabox('huijuf', array( 'title' => '文章封面自定义标识', 'post_type' => array('post', 'page', 'plate', 'forum_post'), 'context' => 'advanced', 'data_type' => 'unserialize', )); CSF::createSection('huijuf', array( 'fields' => array( array(...
8个月前
建站笔记
2025-05-24
05-24
子比主题 - 自带滑块验证图片修改-汇聚访

实用子比主题 – 自带滑块验证图片修改

对于子比的滑动模块我们很多人都不是很喜欢自带的滑动模块的图片，接下来我来教大家怎么自...
8个月前
建站笔记
2025-05-22
05-22
子比主题 - 侧边动漫图片卡片小工具-汇聚访

实用子比主题 – 侧边动漫图片卡片小工具

这是一款仿B站的侧边动漫图片社区小工具，这款小工具是纯代码并没有写成可视化小工具，没有适配昼夜模式，放上自己的二维码即可，旁边的几个标签都可以更改，喜欢的自行部署吧！ 演示效果： 代码部署： [hidecontent type="reply"] 定位：外观 - 小工具 - 文章页&侧边栏（自定义HTML代码区块）添加以下代码即可，图片可自行本地化，以防丢失！ <style type="text/css"> .mhy-qrcode-download-card .mhy-qrcode-top-card{position:relative;width:auto;height:212px;border-radius:4px;padding-top:42px}.mhy-qrcode-download-card .mhy-qrcode-top-card__role-image{position:absolute;width:154px;height:106px;right:0;top:0;background-size:100% 100%;background-repeat:no-repeat;cursor:pointer}.mhy-qrcode-download-card .mhy-qrcode-top-card__role-content{cursor:pointer}.mhy-qrcode-download-card .mhy-qrcode-top-card__role-content-background{width:auto;height:64px;background-size:280px 64px;border-radius:3px 3px 0 0}.mhy-qrcode-download-card .mhy-qrcode-top-card__role-content-background .background__welcome{display:-webkit-box;display:-ms-flexbox;display:flex;position:absolute;width:100%;height:32px;left:0px;top:75px;background-image:url(https://oss.longs.cn/images/2025/05/20250519104024124.png);background-size:100% 32px;background-repeat:no-repeat}.mhy-qrcode-download-card .mhy-qrcode-top-card__role-content-background .background__welcome-image{width:24px;height:24px;margin:8px 6px 0 12px;background-size:100% 100%;background-repeat:no-repeat}.mhy-qrcode-download-card .mhy-qrcode-top-card__role-content-background .background__welcome-text_img{width:111px;height:22px;margin-top:9px;background-size:100% 100%;background-repeat:no-repeat}.mhy-qrcode-download-card .mhy-qrcode-top-card__role-content-info{display:-webkit-box;display:-ms-flexbox;display:flex;width:auto;height:106px;background:var(--main-bg-color);border-radius:0...
8个月前
建站笔记
2025-05-22
05-22
子比主题 - 添加一个每日60s新闻模块+新闻独立页面+本地接口-汇聚访

实用子比主题 – 添加一个每日60s新闻模块+新闻独立页面+本地接口

大家好，本次汇聚访给大家带来了子比主题添加一个每日60s新闻模块及独立页面和本地接口的教程，为什么要用本地接口而不用Api呢，因为Api随时可能失效，但是本地接口避免了这个问题，话不多说有喜欢的自行部署吧，教程写的很详细！ 演示效果： 代码部署： [hidecontent type="payshow"] 一：本地接口制作方法： 第一步：下载文章附件文件后把本地接口文件夹里的文件上传到网站的根目录下！ 第二步：打开 60s的文件夹，修改 60s.php 文件中的 Tonke！ 第三步：token获取——前往获取 注册登录 - >个人管理 -> 个人中心 -> 数据中心 -> token管理 - >获取token 第四步：添加宝塔 计划任务，如下图所示: 任务类型：访问URL-GET URL地址： 你的网站域名/60s/60s.php?api=api-json 如果你不是放在根目录的请自行修改 执行周期：每天执行一次就行，不建议太早。也可以每天隔几小时执行一次 添加好之后先手动执行一次 第五步：检查60s文件夹内的 test.json 文件内是否已有内容，如果没有内容请检查是否那一次出问题了!!! 二：模块+页面 添加步骤 第一步：添加新闻模块: 1、子比主题文件目录/wp-content/themes/zibll/func.php 或 functions.php 文件内...
8个月前
建站笔记
2025-05-18
05-18
子比主题 - 旋转小人小工具-汇聚访

实用子比主题 – 旋转小人小工具

这是一款给子比主题适配的旋转小人小工具组件，此小工具不仅仅可以用来展示网站的公告信息，同时还可以引导用户去查看信息，样式也是十分好看，有喜欢的朋友自行部署吧！ 演示效果： 代码部署： [hidecontent type="payshow"] 定位：WP后台 - 外观 - 小工具中选择文章页-侧边栏随后添加自定义HTML代码即可： <div style="background:#fff;border-radius:15px;padding:10px 20px;" class="card-widget card-announcement"> <div class="item-headline"><i style="font-size:20px;color:red;" class="fa fa-bullhorn"> </i> <span style="font-size:15px;font-weight:700;margin-left:3px;line-height:15px;"> 公告</span></div> <div class="announcement_content"> <p>不定时更新博客，欢迎交换<a href="/links.html"><strong>友链</strong></a>...</p> <div class="twopeople"> <div class="container" style="height:200px;"><canvas class="illo" width="1200"...
8个月前
建站笔记
1…2425262728…32跳转