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-03f7482ac7e8bc8f88feeb2efd765916100" 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-03f7482ac7e8bc8f88feeb2efd765916100" 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-71f5f5ce71e5ee99c6db011e8941e8b584" 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-71f5f5ce71e5ee99c6db011e8941e8b584" 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-bc85d8bb77de884b561e02a16106cf0859" 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-bc85d8bb77de884b561e02a16106cf0859" 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-17b85a6f460d0971ce7e93b3ed03814c18" 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-17b85a6f460d0971ce7e93b3ed03814c18" 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-aeb81446db45fc0ba08883686fa4ef2417" 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-aeb81446db45fc0ba08883686fa4ef2417" 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-97b7b755d3dcde225f1e33b5e5e9799021" 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-97b7b755d3dcde225f1e33b5e5e9799021" 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-02cadd93e649839f513aa53cc4361ebf15" 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-02cadd93e649839f513aa53cc4361ebf15" 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-c14c7fdf926d86dfe9e3acefe94696c937" 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-c14c7fdf926d86dfe9e3acefe94696c937" 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-316917d44052425f3b36136c2905ca6036" 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-316917d44052425f3b36136c2905ca6036" 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-8c466c017110c93f56f6fef26d64f5190" 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-8c466c017110c93f56f6fef26d64f5190" 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-f3e0c67439ebc585e00448685d424e9816" 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-f3e0c67439ebc585e00448685d424e9816" 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-0cf38a036ee4d794ab83344d1b6692cb79" 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-0cf38a036ee4d794ab83344d1b6692cb79" 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-0a77950b98a35ad4ba87fc07e6d2a2fe32" 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-0a77950b98a35ad4ba87fc07e6d2a2fe32" 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-c7cb82f49f010b7dc718c3dea4712db46" 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-c7cb82f49f010b7dc718c3dea4712db46" 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-7d1465311a884a552751a758c6f3f54196" 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-7d1465311a884a552751a758c6f3f54196" 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-7fc406d7b80c77ccbc7ea2605da9feab22" 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-7fc406d7b80c77ccbc7ea2605da9feab22" 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-a156df294fa70bf18c3c9eb4c495001a15" 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-a156df294fa70bf18c3c9eb4c495001a15" 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-98ba2448219df119b80fcf7d2d9d62e222" 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-98ba2448219df119b80fcf7d2d9d62e222" 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-0dd20f56198b50febf330f91ebf2709110" 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-0dd20f56198b50febf330f91ebf2709110" 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-8a27035c2d7d29fe7d862367729fc27c73" 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-8a27035c2d7d29fe7d862367729fc27c73" 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-6a620e55175d5e8c6d3e684e27b9c3ca73" 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-6a620e55175d5e8c6d3e684e27b9c3ca73" 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-fb917fa87e032081af5c4079bb60979e79" 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-fb917fa87e032081af5c4079bb60979e79" 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-b96d3c653c1fcd048c3f1333e23f6d4971" 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-b96d3c653c1fcd048c3f1333e23f6d4971" 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-b8950aad42fbd68d53574f08376138a079" 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-b8950aad42fbd68d53574f08376138a079" 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-03e905157d39b843b96a02f21e11377650" 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-03e905157d39b843b96a02f21e11377650" 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-609e66e6e6c8b8520a9d4b50a8f96ef619" 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-609e66e6e6c8b8520a9d4b50a8f96ef619" 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-116a06e4f113278b1e259bf93c48895256" 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-116a06e4f113278b1e259bf93c48895256" 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-27acddfdd94103d5adaace8f8749d24a20" 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-27acddfdd94103d5adaace8f8749d24a20" 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-5502e5962228a5b522254020b3929f8b73" 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-5502e5962228a5b522254020b3929f8b73" 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-b46f81dbb4505b43e765e45d597447df55" 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-b46f81dbb4505b43e765e45d597447df55" 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-002005a5e78e8b0be8e19fecd8e8e3a450" 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-002005a5e78e8b0be8e19fecd8e8e3a450" 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-630dc957bfd24f1983ec2a95e1cca82376" 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-630dc957bfd24f1983ec2a95e1cca82376" 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-93a28809092489dbccae74c13337b50a3" 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-93a28809092489dbccae74c13337b50a3" 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-11cda06905b6eb714829158678bf40df1" 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-11cda06905b6eb714829158678bf40df1" 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-33ce2a7621cb5299009788fbdc94d81432" 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-33ce2a7621cb5299009788fbdc94d81432" 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-6bb6ae8bfe6e404ba4a8a190a3d97e169" 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-6bb6ae8bfe6e404ba4a8a190a3d97e169" 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-b441df1d9068924d5c419c65f6421a0f42" 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-b441df1d9068924d5c419c65f6421a0f42" 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-38d0a4240b7885f9cec76785324a94d730" 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-38d0a4240b7885f9cec76785324a94d730" 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-6671ffe757cb65d38fab14165dc28c1d33" 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-6671ffe757cb65d38fab14165dc28c1d33" 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-bb0a6dbfa6a4487115e853691ceaeeea24" 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-bb0a6dbfa6a4487115e853691ceaeeea24" 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-4b7d23c59b921bf20356d6e85b13d22324" 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-4b7d23c59b921bf20356d6e85b13d22324" 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-58af85eb97f4a4a26639ba1d41a27d8c29" 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-58af85eb97f4a4a26639ba1d41a27d8c29" 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-8c7f277408545bbcc408287c87c583f670" 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-8c7f277408545bbcc408287c87c583f670" 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-a1fa078b41c04f755581fd3a9e3c80b57" 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-a1fa078b41c04f755581fd3a9e3c80b57" 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-78d019c158c6abe73a8d1c195a3d38d244" 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-78d019c158c6abe73a8d1c195a3d38d244" 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-0d8e6eb073f231d90dee1541965a22e038" 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-0d8e6eb073f231d90dee1541965a22e038" 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-b228edf13711f2684fbcba7896722e0c51" 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-b228edf13711f2684fbcba7896722e0c51" 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-071ee9cb77d6a2a7fa7df900d70cc58d75" 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-071ee9cb77d6a2a7fa7df900d70cc58d75" 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-eff729c456e570a77abc4e90ff6f7f5f54" 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-eff729c456e570a77abc4e90ff6f7f5f54" 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-1ded604a9c54b11be5062ded351bdd6034" 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-1ded604a9c54b11be5062ded351bdd6034" 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-d40c7e47b81f5a30c56570b83585895286" 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-d40c7e47b81f5a30c56570b83585895286" 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-368054700da39792e9f1e76a6a89fa3b62" 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-368054700da39792e9f1e76a6a89fa3b62" 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
学习学习୧(๑•̀⌄•́๑)૭
谢谢!!!
前来学习
看看大佬是怎么美化的!!!
学习学习!
来看看
学习学习
用的什么编辑器嘛?
学习来了
学习来了
才评论过,又要发了
感谢大佬分享
不知道为什么,我的回复评论方可查看永远有问题,
感谢大佬分享