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-1ba0e2ef38d78f9394e04fe6c7f5925d50" 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-1ba0e2ef38d78f9394e04fe6c7f5925d50" 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-762e78671a07f0d25654ffdea040a0c845" 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-762e78671a07f0d25654ffdea040a0c845" 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-9e6ff74fe86e19a91227feff941eaa7833" 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-9e6ff74fe86e19a91227feff941eaa7833" 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-ed28545a013269cf44a00f1e1761c99f23" 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-ed28545a013269cf44a00f1e1761c99f23" 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-b3c965c975aa6df552827e72aa0754b415" 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-b3c965c975aa6df552827e72aa0754b415" 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-52dfd3c4e87e7943c61064f45bee4ace36" 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-52dfd3c4e87e7943c61064f45bee4ace36" 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-d38927e8b4a966e3fe19716b418d535c93" 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-d38927e8b4a966e3fe19716b418d535c93" 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-e7770cf787d83d57d07f1b71125acb8723" 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-e7770cf787d83d57d07f1b71125acb8723" 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-127aec5492c96d18bb0a3057b865c84c38" 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-127aec5492c96d18bb0a3057b865c84c38" 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-26deafa4d7b50dc65b655f8de872e3d066" 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-26deafa4d7b50dc65b655f8de872e3d066" 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-be9d5633010f9283c16c59a70fe2476715" 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-be9d5633010f9283c16c59a70fe2476715" 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-2684a796dfbc4098270325c8658538c755" 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-2684a796dfbc4098270325c8658538c755" 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-923b3af2e3a9299b5887a402dd0de56131" 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-923b3af2e3a9299b5887a402dd0de56131" 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-048d160adbe57aacbf196421df98a45e61" 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-048d160adbe57aacbf196421df98a45e61" 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-e0173ff80c82a943b07c82852758db5d28" 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-e0173ff80c82a943b07c82852758db5d28" 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-5d4370003221755ef48324a17baee6c282" 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-5d4370003221755ef48324a17baee6c282" 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-091593365657497e3707bf9a30fa724c26" 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-091593365657497e3707bf9a30fa724c26" 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-fc3d7722f09802997a9d2783861b427062" 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-fc3d7722f09802997a9d2783861b427062" 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-75ecb520c2d2f459e82ec75afdf06a6290" 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-75ecb520c2d2f459e82ec75afdf06a6290" 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-98980c332c629dd48c58e0b224245df720" 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-98980c332c629dd48c58e0b224245df720" 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-7c67eaf9ce4c7adf107f6cc83b14882087" 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-7c67eaf9ce4c7adf107f6cc83b14882087" 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-e04fd2a94e087a3fa064dc94ad6af61995" 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-e04fd2a94e087a3fa064dc94ad6af61995" 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-b9f6cc9590c2a756cf1a19366279f5691" 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-b9f6cc9590c2a756cf1a19366279f5691" 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-fa9593c269ec23e371a27fc2f0a550e031" 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-fa9593c269ec23e371a27fc2f0a550e031" 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-2ed427ee7275f9aa421442c772fc5f080" 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-2ed427ee7275f9aa421442c772fc5f080" 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-a6159bbf7d4adabe91bf7f49be2707d536" 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-a6159bbf7d4adabe91bf7f49be2707d536" 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-bf78cfa3cc21912a43f6c5caaba0130e19" 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-bf78cfa3cc21912a43f6c5caaba0130e19" 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-64bca68069d12f086ce5db068015ee9599" 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-64bca68069d12f086ce5db068015ee9599" 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-43283ce6bbb1a4464b8265ecff8d8c8757" 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-43283ce6bbb1a4464b8265ecff8d8c8757" 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-145c87f7b6aac041d7a1caa0a8315e5999" 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-145c87f7b6aac041d7a1caa0a8315e5999" 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-68363ebb6c616643aa29d731f98c58bf0" 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-68363ebb6c616643aa29d731f98c58bf0" 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-0c331ef0d568c0fabb9ed5347797959493" 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-0c331ef0d568c0fabb9ed5347797959493" 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-4e4ef29752825c03a17180102bbc4d1573" 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-4e4ef29752825c03a17180102bbc4d1573" 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-4cd0aba3a74aa9025383c192ad2deded19" 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-4cd0aba3a74aa9025383c192ad2deded19" 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-ab23f6f1402ddec1c8bef9b2a98b944831" 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-ab23f6f1402ddec1c8bef9b2a98b944831" 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-4783a08ef1cc10fa4b9c192d95dbaac842" 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-4783a08ef1cc10fa4b9c192d95dbaac842" 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-dd5236f8b9db5a6c954b212358bbcd1a73" 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-dd5236f8b9db5a6c954b212358bbcd1a73" 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-b566f0e842f0c663e32f060077cfe6ba13" 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-b566f0e842f0c663e32f060077cfe6ba13" 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-71f6f1d7678f529e5b80773cac70b24464" 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-71f6f1d7678f529e5b80773cac70b24464" 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-245338384039b0a8e6dc89b7981fa70357" 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-245338384039b0a8e6dc89b7981fa70357" 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-4aa324f39b091ea52cb1c0492f03f0aa29" 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-4aa324f39b091ea52cb1c0492f03f0aa29" 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-88d68d5b3348a9c0b7fe7f3b7271ae1b28" 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-88d68d5b3348a9c0b7fe7f3b7271ae1b28" 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-176dcc126569703f203cc1ca79c2c0f852" 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-176dcc126569703f203cc1ca79c2c0f852" 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-c33088d035fbb5fbafe4582b60aef90c43" 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-c33088d035fbb5fbafe4582b60aef90c43" 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-1dc2d2f4c7defc895fc0861a942d811167" 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-1dc2d2f4c7defc895fc0861a942d811167" 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-db50fd5676b91c78673b326c3b274b865" 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-db50fd5676b91c78673b326c3b274b865" 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-1d686c441effaa8f582f35f0f42305e312" 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-1d686c441effaa8f582f35f0f42305e312" 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-bb3741bf853570f81814bfc8dcc1293b94" 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-bb3741bf853570f81814bfc8dcc1293b94" 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-d99a78ba39b3effc1b6dff71e491d46f21" 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-d99a78ba39b3effc1b6dff71e491d46f21" 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-6ea145b7fb995e0550bef63bcc9c2a2328" 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-6ea145b7fb995e0550bef63bcc9c2a2328" 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-599e600dfed33f1abba018acba45c8fd16" 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-599e600dfed33f1abba018acba45c8fd16" 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-61a491237cb99a3675668054b20f669432" 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-61a491237cb99a3675668054b20f669432" 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
学习学习୧(๑•̀⌄•́๑)૭
谢谢!!!
前来学习
看看大佬是怎么美化的!!!
学习学习!
来看看
学习学习
用的什么编辑器嘛?
学习来了
学习来了
才评论过,又要发了
感谢大佬分享
不知道为什么,我的回复评论方可查看永远有问题,
感谢大佬分享