Loading... * **本页介绍的方法大部4分不涉及插件,需手动复制黏贴至博客主题设置或博客文件操作 且大部分有对应插件。** * **建议收藏备忘,本文涉及代码操作的地方皆有注释,以便后期修改。** * **本文章内容部分来源自网络,由本站整合。** * **在操作前,请务必备份相关文件和设置。** * **本教程所用方法仅适于Handsome主题,其他主题未尝试。** * **文章有问题或者过时,请留言。由于操作不当等问题导致博客无法使用,本博不承担任何责任。** * **本文持续更新,如果有比较好的美化方案,可以联系我加上去。** ### Handsom文件目录说明 **Handsom文件目录说明** ```html component/aside.php 左边导航栏 component/comments.php 评论区 component/footer.php 底部版权、音乐播放器之类 component/header.php 页面头,没啥要改的 component/headnav.php 顶部导航 component/say.php 时光机动态 component/sidebar.php 右侧栏目 component/third_party_comments.php 3.3.0新增,第三方评论 css/ 博客CSS,一般不要改 fonts/ 博客字体,一般不要改 img/ 图像,一般不要改 js/ js文件,一般不要改 lang/ 语言文件 libs/Content.php 文章内容 libs/... 一般不要改 usr/ 另一个语言文件? 404.php 404界面 archive.php 整合 booklist.php 书单 cross.php 时光机 files.php 归档 functions.php 配置界面的东西 guestbook.php 留言板 index.php 首页 links.php 友链 page.php 文章页面整合 post.php 文章输出 ``` ### 1.网站字体修改 <div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-7023eb66c4ab8da62821a1fde19c50647" aria-expanded="true"><div class="accordion-toggle"><span style="">网站字体修改</span> <i class="pull-right fontello icon-fw fontello-angle-right"></i> </div> </div> <div class="panel-body collapse-panel-body"> <div id="collapse-7023eb66c4ab8da62821a1fde19c50647" class="collapse collapse-content"><p></p> **网站字体修改** > **自定义网站使用的文字,其实有很多插件可以实现此功能,包括但不限于 **`AliceStyle`AliceStyl **使用方法:** **打开Handsome主题设置界面,找到“开发者设置”选项在以下两项中加入对应内容即可,字体效果见本站。** 1. **自定义CSS** ```css /*自定义字体*/ body {font-family: 'ZCOOL XiaoWei';} ``` 1. **自定义输出head头部的HTML代码** ```html <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=ZCOOL+XiaoWei" /> ``` 1. **其他自定义字体** ```css 【站酷快乐体】 自定义CSS:font-family: 'ZCOOL KuaiLe'; Google Fonts API:https://fonts.googleapis.com/css?family=ZCOOL+KuaiLe 当然,如果你动手能力较强,还可以使用其他字体 ``` <p></p></div></div></div> ### 2.文末赞赏按钮跳动 <div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-e5a06d65b98aa291e63a9c4b858000dd39" aria-expanded="true"><div class="accordion-toggle"><span style="">文末赞赏按钮跳动</span> <i class="pull-right fontello icon-fw fontello-angle-right"></i> </div> </div> <div class="panel-body collapse-panel-body"> <div id="collapse-e5a06d65b98aa291e63a9c4b858000dd39" class="collapse collapse-content"><p></p> **文末赞赏按钮跳动** **使用方法:复制下列代码至 **`后台>外观>设置外观>开发者设置>自定义CSS` ```css /* 赞赏按钮跳动 */ @keyframes drop { 0% { transform: scale(1); } 50% { transform: scale(1.2); } to { transform: scale(1); } } div.support-author>button.btn-pay { animation: drop 1s infinite; } button.btn-pay { color: #fff!important; background-color: #b29d6d; border-color: #b29d6d; } ``` <p></p></div></div></div> ### 3.代码高亮 <div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-88b35948c62a6646e20dcdbb97dea64732" aria-expanded="true"><div class="accordion-toggle"><span style="">代码高亮</span> <i class="pull-right fontello icon-fw fontello-angle-right"></i> </div> </div> <div class="panel-body collapse-panel-body"> <div id="collapse-88b35948c62a6646e20dcdbb97dea64732" class="collapse collapse-content"><p></p> **代码高亮** > **此为插件代码高亮修改,支持多种语言,但主题自带的似乎就够了,此插件是我以前在主题作者没有开发出现在代码框的时候使用的,现在我已经不用这个了** **使用方法:** **下载本插件,解压放至usr/plugins/目录中文件夹名改为CodePrettify登录管理后台,激活插件** <p></p></div></div></div> ### 4.头像呼吸光环和鼠标悬停旋转放大 <div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-269d79c06d13fb79710fd4a2f7b7e69897" aria-expanded="true"><div class="accordion-toggle"><span style="">头像呼吸光环和鼠标悬停旋转放大</span> <i class="pull-right fontello icon-fw fontello-angle-right"></i> </div> </div> <div class="panel-body collapse-panel-body"> <div id="collapse-269d79c06d13fb79710fd4a2f7b7e69897" class="collapse collapse-content"><p></p> **头像呼吸光环和鼠标悬停旋转放大** > **本项修改的是首页头像,将鼠标放至头像后使其转动并放大。** 使用方法:将以下代码添加至 `后台主题设置>自定义CSS` ```css /*头像呼吸光环和鼠标悬停旋转放大*/ .img-full { width: 100px; border-radius: 50%; animation: light 4s ease-in-out infinite; transition: 0.5s; } .img-full:hover { transform: scale(1.15) rotate(720deg); } @keyframes light { 0% { box-shadow: 0 0 4px #f00; } 25% { box-shadow: 0 0 16px #0f0; } 50% { box-shadow: 0 0 4px #00f; } 75% { box-shadow: 0 0 16px #0f0; } 100% { box-shadow: 0 0 4px #f00; } } ``` **如果只需要单色呼吸光环,例如红色,可以将关键帧动画改为:** ```css /*头像呼吸光环:*/ @keyframes light { from { box-shadow: 0 0 4px #f00; } to { box-shadow: 0 0 16px #f00; } } ``` <p></p></div></div></div> ### 5.全局彩色标签 <div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-0a84101106ebdb5abefb4115519ee3a58" aria-expanded="true"><div class="accordion-toggle"><span style="">全局彩色标签</span> <i class="pull-right fontello icon-fw fontello-angle-right"></i> </div> </div> <div class="panel-body collapse-panel-body"> <div id="collapse-0a84101106ebdb5abefb4115519ee3a58" class="collapse collapse-content"><p></p> **全局彩色标签** > **sunpma的版本是通过在模板自带的开发者选项中插入JS代码实现的标签云上色功能,但由于网站主要的跳转逻辑都是pjax刷新的内容,所以需要额外复制代码到pjax回调函数上,否则切换页面后标签云会掉色** **使用方法:** **将下列代码添加到 **`设置外观>开发者设置>自定义 JavaScript`和 `设置外观>PJAX>PJAX回调函数`中即可 ```javascript /*全局彩色标签*/ lettags=document.querySelectorAll("#tag_cloud-2 a"); letcolorArr=["#428BCA","#AEDCAE","#ECA9A7","#DA99FF","#FFB380","#D9B999"]; tags.forEach(tag=>{ tagsColor=colorArr[Math.floor(Math.random()*colorArr.length)]; tag.style.backgroundColor=tagsColor; }); ``` <p></p></div></div></div> ### 6.为你的博客添加UserAgent <div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-7b503745e74902483cdc72606ea006bd8" aria-expanded="true"><div class="accordion-toggle"><span style="">为你的博客添加UserAgent</span> <i class="pull-right fontello icon-fw fontello-angle-right"></i> </div> </div> <div class="panel-body collapse-panel-body"> <div id="collapse-7b503745e74902483cdc72606ea006bd8" class="collapse collapse-content"><p></p> **为你的博客添加UserAgent** > **此插件只适用于Handsome主题,目前未对其它主题测试优化!!!** **使用方法:** **下载本插件,解压放到usr/plugins/目录中文件夹名改为UserAgent修改Handsome主题,component目录下的comments.php代码文件,大概第60~80行左右** <p></p></div></div></div> ### 7.网站加载完成提示 <div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-62e9c60ba81890d04adb5c1d0139cfc143" aria-expanded="true"><div class="accordion-toggle"><span style="">网站加载完成提示</span> <i class="pull-right fontello icon-fw fontello-angle-right"></i> </div> </div> <div class="panel-body collapse-panel-body"> <div id="collapse-62e9c60ba81890d04adb5c1d0139cfc143" class="collapse collapse-content"><p></p> **网站加载完成提示** > **为网站添加加载完毕的提示** **使用方法:** **复制下面代码到 **`handsome主题>设置外观>开发者设置>自定义JavaScript` ```java /* 网站加载完成提示开始 */ function kaygb_referrer(){ var kaygb_referrer = document.referrer; if (kaygb_referrer != ""){ return "感谢您的访问! 您来自:<br>" + document.referrer; }else{ return ""; }} $.message({ message: "为了网站的正常运行,请不要使用广告屏蔽插件,谢谢!<br >" + kaygb_referrer(), title: "网站加载完成", type: "success", autoHide: !1, time: "3000" }) /* 网站加载完成提示结束 */ ``` <p></p></div></div></div> ### 8.复制成功提示 <div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-ff354a55b5cb6fba13b1c8a75ada17ad26" aria-expanded="true"><div class="accordion-toggle"><span style="">复制成功提示</span> <i class="pull-right fontello icon-fw fontello-angle-right"></i> </div> </div> <div class="panel-body collapse-panel-body"> <div id="collapse-ff354a55b5cb6fba13b1c8a75ada17ad26" class="collapse collapse-content"><p></p> `为文字添加复制成功时的版权提示` 使用方法: 复制下面代码到 `handsome主题>设置外观>开发者设置>自定义 JavaScript` ```javascript /* 复制成功提示代码开始 */ kaygb_copy();function kaygb_copy(){$(document).ready(function(){$("body").bind('copy',function(e){hellolayer()})});var sitesurl=window.location.href;function hellolayer(){ $.message({ message: "尊重原创,转载请注明出处!<br> 本文作者:ddli.cn<br>原文链接:"+sitesurl, title: "复制成功", type: "warning", autoHide: !1, time: "5000" }) }} /* 复制成功提示代码结束 */ ``` <p></p></div></div></div> ### 9.复制文章带有文章版权 <div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-c8e7df1581126358d8af696760e8d35f65" aria-expanded="true"><div class="accordion-toggle"><span style="">复制文章带有文章版权</span> <i class="pull-right fontello icon-fw fontello-angle-right"></i> </div> </div> <div class="panel-body collapse-panel-body"> <div id="collapse-c8e7df1581126358d8af696760e8d35f65" class="collapse collapse-content"><p></p> > 类似于bilibili的复制后缀,可以一定程度地保护你的权益。 使用方法: 复制下面代码到 `handsome主题>设置外观>开发者设置>自定义 JavaScript` ```javascript /* 复制文章自动带版权开始 */ document.body.addEventListener('copy', function (e) { if (window.getSelection().toString() && window.getSelection().toString().length > 42) { setClipboardText(e); notie({ type: 'info', text: '商业转载请联系作者获得授权,非商业转载请注明出处,谢谢合作。', autoHide: true }) } }); function setClipboardText(event) { var clipboardData = event.clipboardData || window.clipboardData; if (clipboardData) { event.preventDefault(); var htmlData = '' + '著作权归作者所有。<br>' + '商业转载请联系作者获得授权,非商业转载请注明出处!<br>' + '本博转载文章版权及解释权归原作者所有,博主只是勤劳的搬运工!<br>' + '作者:ACO<br>' + '链接:' + window.location.href + '<br>' + '来源:http://blog.ddli.cn/<br><br>' + window.getSelection().toString(); var textData = '' + '著作权归作者所有。\n' + '商业转载请联系作者获得授权,非商业转载请注明出处!\n' + '本博转载文章版权及解释权归原作者所有,博主只是勤劳的搬运工!\n' + '作者:ddli.cn\n' + '链接:' + window.location.href + '\n' + '来源:http://blog.ddli.cn/\n\n' + window.getSelection().toString(); clipboardData.setData('text/html', htmlData); clipboardData.setData('text/plain',textData); } } /* 复制文章自动带版权结束 */ ``` <p></p></div></div></div> ### 10.添加文章页脚版权信息 <div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-05a350cafc4767c197ca511881bde48c36" aria-expanded="true"><div class="accordion-toggle"><span style="">添加文章页脚版权信息</span> <i class="pull-right fontello icon-fw fontello-angle-right"></i> </div> </div> <div class="panel-body collapse-panel-body"> <div id="collapse-05a350cafc4767c197ca511881bde48c36" class="collapse collapse-content"><p></p> > 为你的博客文章末尾添加版权显示。 使用方法: 下载本插件,解压放至`usr/plugins/`目录中 文件夹名改为`Copyright` 登录管理后台,激活插件 <button class=" btn m-b-xs btn-success " onclick='window.open("https://github.com/Yves-X/Copyright-for-Typecho","_blank")'>官方下载</button> <button class=" btn m-b-xs btn-success " onclick='window.open("https://wwr.lanzoui.com/ixINfqnj7fa","_blank")'>镜像下载</button> <p></p></div></div></div> ### 11.Handsome底部页脚标签 <div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-b77723c116a71791dfe2fbda7852edeb98" aria-expanded="true"><div class="accordion-toggle"><span style="">Handsome底部页脚标签</span> <i class="pull-right fontello icon-fw fontello-angle-right"></i> </div> </div> <div class="panel-body collapse-panel-body"> <div id="collapse-b77723c116a71791dfe2fbda7852edeb98" class="collapse collapse-content"><p></p> > 添加底部页脚标签样式 使用方法: 1. 添加自定义`css` 添加代码至`后台>自定义 CSS` ```css /*页脚标签样式*/ .github-badge { display: inline-block; border-radius: 2px; text-shadow: none; font-size: 10px; color: #fff; line-height: 13px; background-color: #ABBAC3; margin-bottom: 3px; } .github-badge .badge-subject { display: inline-block; background-color: #4D4D4D; padding: 2px 2px 2px 3px; border-top-left-radius: 2px; border-bottom-left-radius: 2px; } .github-badge .badge-value { display: inline-block; padding: 2px 3px 2px 2px; border-top-right-radius: 2px; border-bottom-right-radius: 2px; } .github-badge .bg-brightgreen { background-color: #4c1 !important; } .github-badge .bg-green { background-color: #97CA00 !important; } .github-badge .bg-yellow { background-color: #dfb317 !important; } .github-badge .bg-zise { background-color:#F08080 !important; } .github-badge .bg-orange { background-color: #fe7d37 !important; } .github-badge .bg-red { background-color: #e05d44 !important; } .github-badge .bg-blue { background-color: #007ec6 !important; } .github-badge .bg-grey, .github-badge .bg-gray { background-color: #555 !important; } .github-badge .bg-lightgrey, .github-badge .bg-lightgray { background-color: #9f9f9f !important; } ``` 2. 选择显示位置 打开`Handsome主题设置>博客底部左侧信息`添加以下代码 ```html <a class="github-badge"> <span class="badge-subject">Copyright</span> <span class="badge-value bg-brightgreen">XXX</span> </a> | <a class="github-badge" target="_blank" href="https://beian.miit.gov.cn"> <span class="badge-subject">皖 ICP备</span> <span class="badge-value bg-red">20002006号-3</span> </a> ``` `打开 Handsome主题设置>博客底部右侧信息`添加以下代码 ```html <a class="github-badge" target="_blank" href="https://www.ihewro.com/"> <span class="badge-subject">Themes</span> <span class="badge-value bg-blue">Handsome</span> </a> | <a class="github-badge" target="_blank" href="https://typecho.org"> <span class="badge-subject">Powered</span> <span class="badge-value bg-orange">Typecho</span> </a> ``` 删除多余代码 位置在`125-140行`之间 删除`usr/themes/handsome/component/footer.php`中以下代码 ```php Powered by <a target="_blank" href="http://www.typecho.org">Typecho</a> | Theme by <a target="_blank" href="https://www.ihewro.com/archives/489/">handsome</a>@<?php echo date("Y"); ?> Copyright ``` <p></p></div></div></div> ### 12.炫彩鼠标指针图标及点击效果 <div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-62f82686fb0cc3568cc4f006dcd803f588" aria-expanded="true"><div class="accordion-toggle"><span style="">点击展开</span> <i class="pull-right fontello icon-fw fontello-angle-right"></i> </div> </div> <div class="panel-body collapse-panel-body"> <div id="collapse-62f82686fb0cc3568cc4f006dcd803f588" class="collapse collapse-content"><p></p> <div class="hideContent">此处内容需要评论回复后(审核通过)方可阅读。</div> <p></p></div></div></div> ### 13.自定义滚动条滑块 <div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-bda4361212ac1c1c0b9fb846f51cd11647" aria-expanded="true"><div class="accordion-toggle"><span style="">点击展开</span> <i class="pull-right fontello icon-fw fontello-angle-right"></i> </div> </div> <div class="panel-body collapse-panel-body"> <div id="collapse-bda4361212ac1c1c0b9fb846f51cd11647" class="collapse collapse-content"><p></p> <div class="hideContent">此处内容需要评论回复后(审核通过)方可阅读。</div> <p></p></div></div></div> ### 14.鼠标点击特效 <div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-08a69d92f698da66454db086c8b5bb3884" aria-expanded="true"><div class="accordion-toggle"><span style="">点击展开</span> <i class="pull-right fontello icon-fw fontello-angle-right"></i> </div> </div> <div class="panel-body collapse-panel-body"> <div id="collapse-08a69d92f698da66454db086c8b5bb3884" class="collapse collapse-content"><p></p> <div class="hideContent">此处内容需要评论回复后(审核通过)方可阅读。</div> <p></p></div></div></div> ### 15.顶部导航天气 <div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-8d6c6d7c71fd3cdd7c5f5dea1194e15c98" aria-expanded="true"><div class="accordion-toggle"><span style="">点击展开</span> <i class="pull-right fontello icon-fw fontello-angle-right"></i> </div> </div> <div class="panel-body collapse-panel-body"> <div id="collapse-8d6c6d7c71fd3cdd7c5f5dea1194e15c98" class="collapse collapse-content"><p></p> <div class="hideContent">此处内容需要评论回复后(审核通过)方可阅读。</div> <p></p></div></div></div> ### 16.魔性动态标题 <div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-2efd293a0accb0472be3089d12840a8e29" aria-expanded="true"><div class="accordion-toggle"><span style="">点击展开</span> <i class="pull-right fontello icon-fw fontello-angle-right"></i> </div> </div> <div class="panel-body collapse-panel-body"> <div id="collapse-2efd293a0accb0472be3089d12840a8e29" class="collapse collapse-content"><p></p> <div class="hideContent">此处内容需要评论回复后(审核通过)方可阅读。</div> <p></p></div></div></div> ### 17.网站加载耗时 <div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-59084a995fca3b0cfb6d5bbaa912bcda45" aria-expanded="true"><div class="accordion-toggle"><span style="">点击展开</span> <i class="pull-right fontello icon-fw fontello-angle-right"></i> </div> </div> <div class="panel-body collapse-panel-body"> <div id="collapse-59084a995fca3b0cfb6d5bbaa912bcda45" class="collapse collapse-content"><p></p> <div class="hideContent">此处内容需要评论回复后(审核通过)方可阅读。</div> <p></p></div></div></div> ### 18.访客总数统计 <div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-af23cebf00f4d8c8bc4145f6a61f3cad47" aria-expanded="true"><div class="accordion-toggle"><span style="">点击展开</span> <i class="pull-right fontello icon-fw fontello-angle-right"></i> </div> </div> <div class="panel-body collapse-panel-body"> <div id="collapse-af23cebf00f4d8c8bc4145f6a61f3cad47" class="collapse collapse-content"><p></p> <div class="hideContent">此处内容需要评论回复后(审核通过)方可阅读。</div> <p></p></div></div></div> ### 19.首页文章添加圆角效果 <div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-91134f9f12616ef191d917671cbfd81661" aria-expanded="true"><div class="accordion-toggle"><span style="">点击展开</span> <i class="pull-right fontello icon-fw fontello-angle-right"></i> </div> </div> <div class="panel-body collapse-panel-body"> <div id="collapse-91134f9f12616ef191d917671cbfd81661" class="collapse collapse-content"><p></p> <div class="hideContent">此处内容需要评论回复后(审核通过)方可阅读。</div> <p></p></div></div></div> ### 20.博主介绍彩色打字特效 <div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-bb78d7e0273d19b845733062be6535c443" aria-expanded="true"><div class="accordion-toggle"><span style="">点击展开</span> <i class="pull-right fontello icon-fw fontello-angle-right"></i> </div> </div> <div class="panel-body collapse-panel-body"> <div id="collapse-bb78d7e0273d19b845733062be6535c443" class="collapse collapse-content"><p></p> <div class="hideContent">此处内容需要评论回复后(审核通过)方可阅读。</div> <p></p></div></div></div> ### 21.评论框打字烟花及震动特效 <div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-363be8382b00953489cff63ad7fdd36d85" aria-expanded="true"><div class="accordion-toggle"><span style="">点击展开</span> <i class="pull-right fontello icon-fw fontello-angle-right"></i> </div> </div> <div class="panel-body collapse-panel-body"> <div id="collapse-363be8382b00953489cff63ad7fdd36d85" class="collapse collapse-content"><p></p> <div class="hideContent">此处内容需要评论回复后(审核通过)方可阅读。</div> <p></p></div></div></div> ### 22.图片API随机动漫文章头图 <div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-3844e22512d81714453ebaf6c651b60153" aria-expanded="true"><div class="accordion-toggle"><span style="">点击展开</span> <i class="pull-right fontello icon-fw fontello-angle-right"></i> </div> </div> <div class="panel-body collapse-panel-body"> <div id="collapse-3844e22512d81714453ebaf6c651b60153" class="collapse collapse-content"><p></p> 8.4.1版本以下打开并编辑/usr/themes/handsome/libs路径下的Content.php文件 查找如下代码 ```php $random = STATIC_PATH . 'img/sj/' . @$randomNum[$index] . '.jpg';//如果有文章置顶,这里可能会导致index not undefined ``` 9.0.1版本以上打开并编辑/usr/themes/handsome/libs/content路径下的CommonContent.php文件 查找如下代码 ```php $random = STATIC_PATH . 'img/sj/' . @$randomNum[$index];//如果有文章置顶,这里可能会导致index not undefined ``` 并替换该代码保存 ```php $random = 'https://blog.ddli.cn/go/get_img.php?_='.rand(999, 3000); ``` 完成,效果可以参考本博客 <div class="tip inlineBlock success simple small"> 如需自定义API,复制如下代码,在https://www.pexels.com/zh-cn/里选择图片,然后将图片链接后面的6位数字替换下面的对应的位置,并保存PHP文件,并替换上面的网址为自己的地址 </div> 回复支持下可见源代码<div class="hideContent">此处内容需要评论回复后(审核通过)方可阅读。</div> <p></p></div></div></div> ### 23.自定义右侧热门文章图标 <div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-4aaa0ae63793c7f99a02f7c9b2997b0041" aria-expanded="true"><div class="accordion-toggle"><span style="">点击展开</span> <i class="pull-right fontello icon-fw fontello-angle-right"></i> </div> </div> <div class="panel-body collapse-panel-body"> <div id="collapse-4aaa0ae63793c7f99a02f7c9b2997b0041" class="collapse collapse-content"><p></p> <div class="hideContent">此处内容需要评论回复后(审核通过)方可阅读。</div> <p></p></div></div></div> ### 24.自定义添加左侧导航 <div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-3081441f6b62bb73aee474acdd49f1af52" aria-expanded="true"><div class="accordion-toggle"><span style="">点击展开</span> <i class="pull-right fontello icon-fw fontello-angle-right"></i> </div> </div> <div class="panel-body collapse-panel-body"> <div id="collapse-3081441f6b62bb73aee474acdd49f1af52" class="collapse collapse-content"><p></p> <div class="hideContent">此处内容需要评论回复后(审核通过)方可阅读。</div> <p></p></div></div></div> ### 25.开启网站gzip压缩 <div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-990ed26a30df42ec2e3cca6f7acfcbdb55" aria-expanded="true"><div class="accordion-toggle"><span style="">点击展开</span> <i class="pull-right fontello icon-fw fontello-angle-right"></i> </div> </div> <div class="panel-body collapse-panel-body"> <div id="collapse-990ed26a30df42ec2e3cca6f7acfcbdb55" class="collapse collapse-content"><p></p> <div class="hideContent">此处内容需要评论回复后(审核通过)方可阅读。</div> <p></p></div></div></div> ### 26.禁用F12键 <div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-fbc7bf71e65db3302ed81ca8dc1099bd7" aria-expanded="true"><div class="accordion-toggle"><span style="">点击展开</span> <i class="pull-right fontello icon-fw fontello-angle-right"></i> </div> </div> <div class="panel-body collapse-panel-body"> <div id="collapse-fbc7bf71e65db3302ed81ca8dc1099bd7" class="collapse collapse-content"><p></p> <div class="hideContent">此处内容需要评论回复后(审核通过)方可阅读。</div> <p></p></div></div></div> ### 27.自定义右键菜单美化 <div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-ee610feaf9f470d88b736d46232ca29d25" aria-expanded="true"><div class="accordion-toggle"><span style="">点击展开</span> <i class="pull-right fontello icon-fw fontello-angle-right"></i> </div> </div> <div class="panel-body collapse-panel-body"> <div id="collapse-ee610feaf9f470d88b736d46232ca29d25" class="collapse collapse-content"><p></p> <div class="hideContent">此处内容需要评论回复后(审核通过)方可阅读。</div> <p></p></div></div></div> ### 28.文章内挂载视频 <div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-fabb40d3dd26e5a36f5a942cae6e5b6286" aria-expanded="true"><div class="accordion-toggle"><span style="">点击展开</span> <i class="pull-right fontello icon-fw fontello-angle-right"></i> </div> </div> <div class="panel-body collapse-panel-body"> <div id="collapse-fabb40d3dd26e5a36f5a942cae6e5b6286" class="collapse collapse-content"><p></p> <div class="hideContent">此处内容需要评论回复后(审核通过)方可阅读。</div> <p></p></div></div></div> ### 29.自定义后台路径 <div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-d89f661033fc99ca377f7a803faf5f9b14" aria-expanded="true"><div class="accordion-toggle"><span style="">点击展开</span> <i class="pull-right fontello icon-fw fontello-angle-right"></i> </div> </div> <div class="panel-body collapse-panel-body"> <div id="collapse-d89f661033fc99ca377f7a803faf5f9b14" class="collapse collapse-content"><p></p> <div class="hideContent">此处内容需要评论回复后(审核通过)方可阅读。</div> <p></p></div></div></div> ### 30.在线客服Crisp <div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-7e3512d3242068d10f6eb61d229eec0586" aria-expanded="true"><div class="accordion-toggle"><span style="">点击展开</span> <i class="pull-right fontello icon-fw fontello-angle-right"></i> </div> </div> <div class="panel-body collapse-panel-body"> <div id="collapse-7e3512d3242068d10f6eb61d229eec0586" class="collapse collapse-content"><p></p> <div class="hideContent">此处内容需要评论回复后(审核通过)方可阅读。</div> <p></p></div></div></div> ### 31.右边侧栏加入每日pixiv热榜图片 <div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-582139ee5d3aa870b702944abebc7d0d86" aria-expanded="true"><div class="accordion-toggle"><span style="">点击展开</span> <i class="pull-right fontello icon-fw fontello-angle-right"></i> </div> </div> <div class="panel-body collapse-panel-body"> <div id="collapse-582139ee5d3aa870b702944abebc7d0d86" class="collapse collapse-content"><p></p> <div class="hideContent">此处内容需要评论回复后(审核通过)方可阅读。</div> <p></p></div></div></div> ### 32.一键评论打卡 <div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-16e3d088324f5cd0a5565b77ef84681d71" aria-expanded="true"><div class="accordion-toggle"><span style="">点击展开</span> <i class="pull-right fontello icon-fw fontello-angle-right"></i> </div> </div> <div class="panel-body collapse-panel-body"> <div id="collapse-16e3d088324f5cd0a5565b77ef84681d71" class="collapse collapse-content"><p></p> <div class="hideContent">此处内容需要评论回复后(审核通过)方可阅读。</div> <p></p></div></div></div> ### 33.网页文字禁止复制 <div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-0d1f1dd8860704fd242acba07ea417c86" aria-expanded="true"><div class="accordion-toggle"><span style="">点击展开</span> <i class="pull-right fontello icon-fw fontello-angle-right"></i> </div> </div> <div class="panel-body collapse-panel-body"> <div id="collapse-0d1f1dd8860704fd242acba07ea417c86" class="collapse collapse-content"><p></p> <div class="hideContent">此处内容需要评论回复后(审核通过)方可阅读。</div> <p></p></div></div></div> ### 34.正文结束及版权 <div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-c2e6c1104e3ba83d3e21a46d6e964f0230" aria-expanded="true"><div class="accordion-toggle"><span style="">点击展开</span> <i class="pull-right fontello icon-fw fontello-angle-right"></i> </div> </div> <div class="panel-body collapse-panel-body"> <div id="collapse-c2e6c1104e3ba83d3e21a46d6e964f0230" class="collapse collapse-content"><p></p> <div class="hideContent">此处内容需要评论回复后(审核通过)方可阅读。</div> <p></p></div></div></div> ### 35.左侧导航多彩图标 <div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-fb42ff58cd861b89a2ca55ed3ff24df874" aria-expanded="true"><div class="accordion-toggle"><span style="">点击展开</span> <i class="pull-right fontello icon-fw fontello-angle-right"></i> </div> </div> <div class="panel-body collapse-panel-body"> <div id="collapse-fb42ff58cd861b89a2ca55ed3ff24df874" class="collapse collapse-content"><p></p> <div class="hideContent">此处内容需要评论回复后(审核通过)方可阅读。</div> <p></p></div></div></div> ### 36.等距标签云 <div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-1dbac440aa8ff03afd0e57022bc8056611" aria-expanded="true"><div class="accordion-toggle"><span style="">点击展开</span> <i class="pull-right fontello icon-fw fontello-angle-right"></i> </div> </div> <div class="panel-body collapse-panel-body"> <div id="collapse-1dbac440aa8ff03afd0e57022bc8056611" class="collapse collapse-content"><p></p> <div class="hideContent">此处内容需要评论回复后(审核通过)方可阅读。</div> <p></p></div></div></div> ### 37.新年喝彩横图 <div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-b5c900a0093991c97a33914c72f1a3f526" aria-expanded="true"><div class="accordion-toggle"><span style="">点击展开</span> <i class="pull-right fontello icon-fw fontello-angle-right"></i> </div> </div> <div class="panel-body collapse-panel-body"> <div id="collapse-b5c900a0093991c97a33914c72f1a3f526" class="collapse collapse-content"><p></p> <div class="hideContent">此处内容需要评论回复后(审核通过)方可阅读。</div> <p></p></div></div></div> ### 38.每日新闻 <div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-43a8c904b99f5d151a33371b4af758cb89" aria-expanded="true"><div class="accordion-toggle"><span style="">点击展开</span> <i class="pull-right fontello icon-fw fontello-angle-right"></i> </div> </div> <div class="panel-body collapse-panel-body"> <div id="collapse-43a8c904b99f5d151a33371b4af758cb89" class="collapse collapse-content"><p></p> <div class="hideContent">此处内容需要评论回复后(审核通过)方可阅读。</div> <p></p></div></div></div> ### 39.添加右侧全站字数、在线人数、响应耗时和访客总数 <div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-0c34b4f387841117aa8291b9c600c18232" aria-expanded="true"><div class="accordion-toggle"><span style="">点击展开</span> <i class="pull-right fontello icon-fw fontello-angle-right"></i> </div> </div> <div class="panel-body collapse-panel-body"> <div id="collapse-0c34b4f387841117aa8291b9c600c18232" class="collapse collapse-content"><p></p> <div class="hideContent">此处内容需要评论回复后(审核通过)方可阅读。</div> <p></p></div></div></div> ### 40.自定义添加的表情包显示过大 <div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-c4566375f62dbf6cd8de27ad4fb2df0a88" aria-expanded="true"><div class="accordion-toggle"><span style="">点击展开</span> <i class="pull-right fontello icon-fw fontello-angle-right"></i> </div> </div> <div class="panel-body collapse-panel-body"> <div id="collapse-c4566375f62dbf6cd8de27ad4fb2df0a88" class="collapse collapse-content"><p></p> <div class="hideContent">此处内容需要评论回复后(审核通过)方可阅读。</div> <p></p></div></div></div> ### 41.鼠标点击特效第二种 <div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-0eb46923bf31fcdda13354d76a7887752" aria-expanded="true"><div class="accordion-toggle"><span style="">点击展开</span> <i class="pull-right fontello icon-fw fontello-angle-right"></i> </div> </div> <div class="panel-body collapse-panel-body"> <div id="collapse-0eb46923bf31fcdda13354d76a7887752" class="collapse collapse-content"><p></p> <div class="hideContent">此处内容需要评论回复后(审核通过)方可阅读。</div> <p></p></div></div></div> ### 42.魔性动态标题第二种 <div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-0e03b88d88d83627efb1c1d7c85d739c13" aria-expanded="true"><div class="accordion-toggle"><span style="">点击展开</span> <i class="pull-right fontello icon-fw fontello-angle-right"></i> </div> </div> <div class="panel-body collapse-panel-body"> <div id="collapse-0e03b88d88d83627efb1c1d7c85d739c13" class="collapse collapse-content"><p></p> <div class="hideContent">此处内容需要评论回复后(审核通过)方可阅读。</div> <p></p></div></div></div> ### 43.在文章顶部添加百度是否收录 <div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-382ba213b74d564c2e66ada38fec1ac027" aria-expanded="true"><div class="accordion-toggle"><span style="">点击展开</span> <i class="pull-right fontello icon-fw fontello-angle-right"></i> </div> </div> <div class="panel-body collapse-panel-body"> <div id="collapse-382ba213b74d564c2e66ada38fec1ac027" class="collapse collapse-content"><p></p> <div class="hideContent">此处内容需要评论回复后(审核通过)方可阅读。</div> <p></p></div></div></div> ### 44.生成当前文章标签 <div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-68889c5276e888b6889d127ea489cbec33" aria-expanded="true"><div class="accordion-toggle"><span style="">点击展开</span> <i class="pull-right fontello icon-fw fontello-angle-right"></i> </div> </div> <div class="panel-body collapse-panel-body"> <div id="collapse-68889c5276e888b6889d127ea489cbec33" class="collapse collapse-content"><p></p> <div class="hideContent">此处内容需要评论回复后(审核通过)方可阅读。</div> <p></p></div></div></div> ### 45.顶部导航栏添加网页动态滚动进度条|滚动指示器 <div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-7a3c1eeb270b4fdb270ccbe0437058593" aria-expanded="true"><div class="accordion-toggle"><span style="">点击展开</span> <i class="pull-right fontello icon-fw fontello-angle-right"></i> </div> </div> <div class="panel-body collapse-panel-body"> <div id="collapse-7a3c1eeb270b4fdb270ccbe0437058593" class="collapse collapse-content"><p></p> <div class="hideContent">此处内容需要评论回复后(审核通过)方可阅读。</div> <p></p></div></div></div> ### 46.评论邮件提醒插件 <div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-dd118c737d091da40388ad103192bd914" aria-expanded="true"><div class="accordion-toggle"><span style="">点击展开</span> <i class="pull-right fontello icon-fw fontello-angle-right"></i> </div> </div> <div class="panel-body collapse-panel-body"> <div id="collapse-dd118c737d091da40388ad103192bd914" class="collapse collapse-content"><p></p> <div class="hideContent">此处内容需要评论回复后(审核通过)方可阅读。</div> <p></p></div></div></div> ### 47.时光机栏目增添额外内容 <div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-b70031333f2f27ae57ab620e456deea914" aria-expanded="true"><div class="accordion-toggle"><span style="">点击展开</span> <i class="pull-right fontello icon-fw fontello-angle-right"></i> </div> </div> <div class="panel-body collapse-panel-body"> <div id="collapse-b70031333f2f27ae57ab620e456deea914" class="collapse collapse-content"><p></p> <div class="hideContent">此处内容需要评论回复后(审核通过)方可阅读。</div> <p></p></div></div></div> ### 48.打字出现烟花的动画效果(非插件方法) <div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-5fb0bae8434119d7b73fd4c2206ead5a41" aria-expanded="true"><div class="accordion-toggle"><span style="">点击展开</span> <i class="pull-right fontello icon-fw fontello-angle-right"></i> </div> </div> <div class="panel-body collapse-panel-body"> <div id="collapse-5fb0bae8434119d7b73fd4c2206ead5a41" class="collapse collapse-content"><p></p> <div class="hideContent">此处内容需要评论回复后(审核通过)方可阅读。</div> <p></p></div></div></div> ### 49.背景云雾特效 <div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-2820a4b7f129786d0ae12ee2947d3b2847" aria-expanded="true"><div class="accordion-toggle"><span style="">点击展开</span> <i class="pull-right fontello icon-fw fontello-angle-right"></i> </div> </div> <div class="panel-body collapse-panel-body"> <div id="collapse-2820a4b7f129786d0ae12ee2947d3b2847" class="collapse collapse-content"><p></p> <div class="hideContent">此处内容需要评论回复后(审核通过)方可阅读。</div> <p></p></div></div></div> ### 50.文章中嵌入网页 <div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-a38fd30c248bb2f487d13daba1421c8742" aria-expanded="true"><div class="accordion-toggle"><span style="">点击展开</span> <i class="pull-right fontello icon-fw fontello-angle-right"></i> </div> </div> <div class="panel-body collapse-panel-body"> <div id="collapse-a38fd30c248bb2f487d13daba1421c8742" class="collapse collapse-content"><p></p> <div class="hideContent">此处内容需要评论回复后(审核通过)方可阅读。</div> <p></p></div></div></div> ### 51.文章页角底部添加结束提示以及版权说明(非插件) <div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-8e67403cf80c9a9ae534da162ab8026e18" aria-expanded="true"><div class="accordion-toggle"><span style="">点击展开</span> <i class="pull-right fontello icon-fw fontello-angle-right"></i> </div> </div> <div class="panel-body collapse-panel-body"> <div id="collapse-8e67403cf80c9a9ae534da162ab8026e18" class="collapse collapse-content"><p></p> <div class="hideContent">此处内容需要评论回复后(审核通过)方可阅读。</div> <p></p></div></div></div> ### 52.气泡背景 <div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-5d87135615fc5a7d7a923ab402f735d916" aria-expanded="true"><div class="accordion-toggle"><span style="">点击展开</span> <i class="pull-right fontello icon-fw fontello-angle-right"></i> </div> </div> <div class="panel-body collapse-panel-body"> <div id="collapse-5d87135615fc5a7d7a923ab402f735d916" class="collapse collapse-content"><p></p> <div class="hideContent">此处内容需要评论回复后(审核通过)方可阅读。</div> <p></p></div></div></div> 最后修改:2024 年 03 月 27 日 © 允许规范转载 打赏 赞赏作者 支付宝微信 赞 4 如果觉得我的文章对你有用,请随意赞赏
46 条评论
支持
看看看
滴!学生卡!打卡时间:22:12:26|´・ω・)ノ,请上车的乘客系好安全带~
感谢分享
看看OωO
୧(๑•̀⌄•́๑)૭
学习一下
再来学习一下
原来要工具才行
为什么一直加载不出来了?
学习学习
OωO
学习
再来学习一下
我也来学习学习
看一下
写得好好哟,我要给你生猴子!
学习一下
看看
赞诶
感谢大佬分享
感谢大佬分享
look一下
iju
学习学习୧(๑•̀⌄•́๑)૭
看看
学习
学习
棒
学习一下
OωO
666
学习学习୧(๑•̀⌄•́๑)૭
谢谢!!!
前来学习
看看大佬是怎么美化的!!!
学习学习!
来看看
学习学习
用的什么编辑器嘛?
学习来了
学习来了
才评论过,又要发了
感谢大佬分享
不知道为什么,我的回复评论方可查看永远有问题,
感谢大佬分享