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-6bb4d45354a1fe3ab8851de3fe62d27432" 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-6bb4d45354a1fe3ab8851de3fe62d27432" 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-0ddafa1728ceecb95327463938baa78243" 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-0ddafa1728ceecb95327463938baa78243" 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-ae5a83193a07ea11397eb89a50ee097d47" 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-ae5a83193a07ea11397eb89a50ee097d47" 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-52b8ef18c6e93592afbe9f28454c77d711" 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-52b8ef18c6e93592afbe9f28454c77d711" 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-b32ecadbd7c768f8aef85fee169a3d4197" 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-b32ecadbd7c768f8aef85fee169a3d4197" 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-02af7531de3cc5485428835b83ec90e028" 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-02af7531de3cc5485428835b83ec90e028" 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-cb9c80b495d6b7665373f74c076825de94" 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-cb9c80b495d6b7665373f74c076825de94" 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-6696459c682e6ee96c92ed73a82a0c3012" 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-6696459c682e6ee96c92ed73a82a0c3012" 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-2ccd8b2c7e00201c89bb81a9a6fcc7fd32" 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-2ccd8b2c7e00201c89bb81a9a6fcc7fd32" 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-b00e34734aa378f7d3537f490285932c76" 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-b00e34734aa378f7d3537f490285932c76" 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-8310e88d657e9e566fad0367ef340d0164" 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-8310e88d657e9e566fad0367ef340d0164" 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-ece723b66d8de51a98d53c6ca5dadf3613" 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-ece723b66d8de51a98d53c6ca5dadf3613" 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-cb67354c9bd39485a6dba3108d65c03562" 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-cb67354c9bd39485a6dba3108d65c03562" 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-db479418f17df990d5b5dd751fb0a19c70" 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-db479418f17df990d5b5dd751fb0a19c70" 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-88de4de061d66cbba60b2b1c4f343d2a80" 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-88de4de061d66cbba60b2b1c4f343d2a80" 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-34c13458618841ef40dccdda1442710083" 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-34c13458618841ef40dccdda1442710083" 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-95a630ba7a28d928a44717726f53943698" 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-95a630ba7a28d928a44717726f53943698" 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-82dc4e1fb119d2d127863266c533e41756" 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-82dc4e1fb119d2d127863266c533e41756" 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-63a4b6bf03e4ea895e788e2822a7f2ad17" 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-63a4b6bf03e4ea895e788e2822a7f2ad17" 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-912a88ae07253d4de7eb2ce8568ba74747" 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-912a88ae07253d4de7eb2ce8568ba74747" 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-2f4033609cc6622245e6d9dcd1b5e50b43" 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-2f4033609cc6622245e6d9dcd1b5e50b43" 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-2e300676cf76634ac65b513004df6bdc15" 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-2e300676cf76634ac65b513004df6bdc15" 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-a924190112c57c241ac911506cc618a737" 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-a924190112c57c241ac911506cc618a737" 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-f9f682e70131cf8017d24201da4531086" 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-f9f682e70131cf8017d24201da4531086" 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-8a5fe7ea6ec39faba3af9a1f5742d1ab62" 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-8a5fe7ea6ec39faba3af9a1f5742d1ab62" 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-c0f080c8b3512cac92b18586116ed5b934" 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-c0f080c8b3512cac92b18586116ed5b934" 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-2e454c515f7db49133fe5eccfff926b883" 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-2e454c515f7db49133fe5eccfff926b883" 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-daf13c7e8db915b3e5f7df8c8e78665136" 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-daf13c7e8db915b3e5f7df8c8e78665136" 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-a0e3a33bdc402c03d095573e062e17a89" 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-a0e3a33bdc402c03d095573e062e17a89" 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-566209681ef4cb746753b15ef55ba13e16" 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-566209681ef4cb746753b15ef55ba13e16" 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-c2d0ffd968d949cc835635009541f93046" 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-c2d0ffd968d949cc835635009541f93046" 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-a101ca3876b1e4f2b10bfc4b938c07f016" 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-a101ca3876b1e4f2b10bfc4b938c07f016" 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-898048d08e753b593772ccbf4e6fce9848" 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-898048d08e753b593772ccbf4e6fce9848" 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-7215081a490a76052dcdcd537c710e6579" 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-7215081a490a76052dcdcd537c710e6579" 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-f559984eabe9133d09af33b85fbed50979" 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-f559984eabe9133d09af33b85fbed50979" 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-ef8bbe9fd00f868fba3afea1357905892" 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-ef8bbe9fd00f868fba3afea1357905892" 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-9456355bbe8eb48beea739c3ca47e52b33" 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-9456355bbe8eb48beea739c3ca47e52b33" 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-cb653dc6bbf34b2aa2a016dfa935f6f143" 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-cb653dc6bbf34b2aa2a016dfa935f6f143" 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-f6032fc10262ede5d4695beacdcb853285" 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-f6032fc10262ede5d4695beacdcb853285" 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-db1c60e535d94350bb01f6d8831445a636" 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-db1c60e535d94350bb01f6d8831445a636" 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-f30afe547df1c1e761bfd39eec824d0c98" 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-f30afe547df1c1e761bfd39eec824d0c98" 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-da1c8a628e2406a334387474756ed1b262" 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-da1c8a628e2406a334387474756ed1b262" 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-eeff6cd2e03ba726d4b0a0226b13a2c78" 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-eeff6cd2e03ba726d4b0a0226b13a2c78" 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-0fd44694022ee878b88571655a1c9c3676" 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-0fd44694022ee878b88571655a1c9c3676" 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-190fa627cb1213705e37043d88c9c3e932" 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-190fa627cb1213705e37043d88c9c3e932" 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-5918ffc3b6cbd502ffece84c7a41c32b28" 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-5918ffc3b6cbd502ffece84c7a41c32b28" 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-bed7099733525f2e6d33c508c9bc2a6543" 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-bed7099733525f2e6d33c508c9bc2a6543" 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-49b7fd87fa0efaf1f65a674101e30ae727" 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-49b7fd87fa0efaf1f65a674101e30ae727" 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-f4c33dc2cdf01d20a75e711fd9589f5346" 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-f4c33dc2cdf01d20a75e711fd9589f5346" 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-35c614a2bcb46c25dcb9e30dc271d64f71" 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-35c614a2bcb46c25dcb9e30dc271d64f71" 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-5abba6b6876597c2570ec8311c2504ae63" 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-5abba6b6876597c2570ec8311c2504ae63" 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-099f945c673cd9feb12cc62f83c8975433" 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-099f945c673cd9feb12cc62f83c8975433" 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
学习学习୧(๑•̀⌄•́๑)૭
谢谢!!!
前来学习
看看大佬是怎么美化的!!!
学习学习!
来看看
学习学习
用的什么编辑器嘛?
学习来了
学习来了
才评论过,又要发了
感谢大佬分享
不知道为什么,我的回复评论方可查看永远有问题,
感谢大佬分享