演示使用教程感觉在每个页面都把标签云显示出来会有点乱，但标签云的存在又有它自己的作用，于是想着将标签云单独在一个页面中罗列出来。新建一个名为：tags.php文件，填入以下代码后存放在模板目录下：<?php /** * 标签云 * * @package custom */ ?> <?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?> <?php $this->need('component/header.php'); ?> <?php $this->need('component/aside.php'); ?> <main class="app-content-body <?php echo Content::returnPageAnimateClass($this); ?>"> <?php echo Content::exportPostPageHeader($this,$this->user->hasLogin(),true); ?> <?php Content::BreadcrumbNavigation($this, $this->options->rootUrl); ?> <?php echo Content::exportHeaderImg($this); ?> <?php Typecho_Widget::widget('Widget_Metas_Tag_Cloud','ignoreZeroCount=1&limit=280')->to($tags); ?> <?php if($tags->have()): ?> <?php while ($tags->next()): ?> <span class="tt-badge" style="background-color:rgb(<?php echo(rand(0,255)); ?>,<?php echo(rand(0,255)); ?>,<?php echo(rand(0,255)); ?>)"><a href="<?php $tags->permalink();?>" target="_blank"> <?php $tags->name(); ?> <?php endwhile; ?> <?php endif; ?> <?php $this->need('component/sidebar.php'); ?> <?php $this->need('component/footer.php'); ?> 完成后，在后台创建独立页面，自定义模板选择刚刚新建的“标签云”模板，可以不用填入任何内容，直接发布便完成。
前言本篇文章是为了下一篇关于优化博客网站加载速度的文章来做铺垫的因为涉及到图片压缩后的Webp格式，且暂时Typecho貌似还不支持Webp格式的图片，所以有了这篇文章\~注意：如果您没有十足的把握，十分建议您在更改之前现将主程序备份，防止不必要的麻烦！!环境该篇博文针对的程序版本号如下，若您Typecho程序很旧可能不适用Typecho：1.2.0(正式版)方法1.修改Rows.php找到你的网站根目录/var/Widget/Themes/里面的Rows.php文件找到下面这行代码return preg_match("/screenshot\.(jpg|png|gif|bmp|jpeg)/i",$path);在jpeg后面添加一个webp，比如下面这样return preg_match("/screenshot\.(jpg|png|gif|bmp|jpeg|webp)/i",$path);改完保存退出2.修改contents.php找到你的网站根目录/var/Widget/Base/内的contents.php将557行的这行代码：$value['attachment']->isImage = in_array($content['type'], ['jpg', 'jpeg', 'gif', 'png', 'tiff', 'bmp']);在末尾添加webp，比如下面这样$value['attachment']->isImage = in_array($content['type'], ['jpg', 'jpeg', 'gif', 'png', 'tiff', 'bmp', 'webp']);改好后保存并退出\~3.修改Common.php还是先找到网站根目录/var/Typecho/里面的common.php在1254行，即bmp相关内容的上方，添加下面这一行代码'bmp' => 'image/x-ms-bmp',改好后保存并退出4.最后一步这一步我们需要先去到网站的后台，找到设置-基本把允许上传类型里的其他格式打勾，并在后面加入webp，如图所示最后上述步骤完成后，现在去写文章并上传一个.webp格式的图片来看看是否生效吧\~本篇文章是为了下一篇关于优化博客网站加载速度的文章来做铺垫的因为涉及到图片压缩后的Webp格式，且暂时Typecho貌似还不支持Webp格式的图片，所以有了这篇文章\~注意：如果您没有十足的把握，十分建议您在更改之前现将主程序备份，防止不必要的麻烦！
千篇一律的登录界面难免有点视觉疲劳，简单修改一下Typecho的后台登录界面，开启登录博客愉悦的一刻。修改文件：typecho系统文件\admin\login.php由于登录界面不需要额外的js代码，删除了文件中的下列代码：<?php include 'common-js.php'; ?>增加html代码： 增加CSS样式：.typecho-login-wrap { position: fixed; } .typecho-login {display: block;padding: 10px 20px;margin-top: 20vh;border-radius: 15px;-moz-box-shadow: 0 0 10px #ffffff;box-shadow: 0 0 15px 0px #868686;background: rgb(255 255 255 / 60%);} .i-logo{display: unset;background: unset;filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=55);opacity: 0.55;} input{outline: 0;} input:focus {box-shadow: 0 0 0 0.2rem rgb(167 191 232 / 25%);} body {display: flex;align-items: center;justify-content: center;}<?php include 'common.php'; if ($user->hasLogin()) { $response->redirect($options->adminUrl); } $rememberName = htmlspecialchars(Typecho_Cookie::get('__typecho_remember_name')); Typecho_Cookie::delete('__typecho_remember_name'); $bodyClass = 'body-100'; include 'header.php'; ?> TuJun's Blog <form action="<?php $options->loginAction(); ?>" method="post" name="login" role="form"> <?php _e('用户名'); ?> <input type="text" id="name" name="name" value="<?php echo $rememberName; ?>" placeholder="<?php _e('用户名'); ?>" class="text-l w-100" autofocus /> <?php _e('密码'); ?> <input type="password" id="password" name="password" class="text-l w-100" placeholder="<?php _e('密码'); ?>" /> <?php _e('登录'); ?> <input type="hidden" name="referer" value="<?php echo htmlspecialchars($request->get('referer')); ?>" /> <?php _e('下次自动登录'); ?> <a href="<?php $options->siteUrl(); ?>"><?php _e('返回首页'); ?> <?php if($options->allowRegister): ?> • <a href="<?php $options->registerUrl(); ?>"><?php _e('用户注册'); ?> <?php endif; ?> <?php include 'footer.php'; ?> 加入canvas动画js代码（可选）。修改后的login.php的内容如下：
悬挂猫咪返回顶部插件具体效果见下图：食用方法重命名文件夹为GoTop上传至usr/plugins目录，登录后台启用即可如果主题模板已加载jquery，可以在插件设置内禁用加载jquery。下载地址
[scode type="blue" size=""]这篇文章作为本站美化的记录，有新增时会实时更新。[/scode][scode type="green" size=""]如果您有好玩的效果也欢迎在评论区提出，若可以的话我也会加到文章并实现其效果。[/scode][scode type="yellow" size=""]更新时间：2024年10月06日[/scode]说明该站的所有修改项均在本文列出，实际效果看本站即可。若您也想拥有类似的效果，欢迎借鉴~~注意：以下代码出现/ / 、或//字符均为注释，即不会有实际效果，仅仅是给人看的一个标记。在这里不建议删除，因为会影响后期修改时的辨别。悉知~为了给小白讲明白，这里记录的已经很细了。老博主的话，拿着代码按自己意愿改即可，懂得都懂~本站环境Typecho：1.2.1正式版HandSome：8.4.1 Pro其他版本的Typecho和HandSome不确定其可行性，请自行测试\~[collapse status="false" title="Handsome主题文件目录结构"]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 文章输出 color： 选填，不填默认为success（绿色），可选值： light：白色 info：蓝色 dark：深色 success：绿色 black：黑色 warning：黄色 primary：紫色 danger：红色[/collapse]基础设置开启全站HTTPS[collapse status="false" title="开启全站HTTPS"]1、首先在宝塔或通过配置文件给你的网站配置好证书，并开启强制HTTPS2、去网站后台，找到设置 -> 基本设置 -> 站点地址将其改为https开头的网址。[/collapse]添加GZIP压缩[collapse status="false" title="添加GZIP压缩"]这个主要是减小带宽压力，以达到加快网站加速速度的目的。和上面的HTTPS一样，在config.inc.php内加入以下配置即可：/** 开启gzip压缩 */ ob_start('ob_gzhandler');[/collapse]去掉地址栏的index.php[collapse status="false" title="去掉地址栏的index.php"]更改前是这样的：https://blog.l54l.com/index.php/archives/5.html更改后是这样的：https://blog.l54l.com/diary/5.html首先进入后台，找到设置 - 永久链接，改成如下图所示然后我们需要配置伪静态规则如果使用的宝塔面板，就在 网站-设置-伪静态-选择Typecho-保存即可[/collapse]自定义后台路径[collapse status="false" title="自定义后台路径"]1、将Typecho程序根目录中的后台文件夹"admin"改名，名字即为你想自定义的地址名，例如：将"admin"改为"xxx"2、修改根目录文件"config.inc.php"，打开该文件后找到/* 后台路径(相对路径) / define(' **TYPECHO_ADMIN_DIR** ', '/admin/');将代码中"admin"改为你自定义的地址，例如：xxx这样一来，我们的Typecho程序网站的后台就改成：域名/xxx了[/collapse]使Typecho支持emoji[collapse status="false" title="使Typecho支持emoji"]效果🔘🔵🟣🟤⚫🔴🟠🟡💰✨🍭🎄alter table typecho_comments convert to character set utf8mb4 collate utf8mb4_unicode_ci; alter table typecho_contents convert to character set utf8mb4 collate utf8mb4_unicode_ci; alter table typecho_fields convert to character set utf8mb4 collate utf8mb4_unicode_ci; alter table typecho_metas convert to character set utf8mb4 collate utf8mb4_unicode_ci; alter table typecho_options convert to character set utf8mb4 collate utf8mb4_unicode_ci; alter table typecho_relationships convert to character set utf8mb4 collate utf8mb4_unicode_ci; alter table typecho_users convert to character set utf8mb4 collate utf8mb4_unicode_ci;执行上述sql语句来修改表的编码，如果用的是宝塔面板和MySQL数据库，一般有可视化的phpmyadmin界面，可以在phpmyadmin的控制台里面执行上面的语句。最后将 Typecho 目录下的config.inc.php 配置文件中数据库定义参数中的 charset 为 utf8mb4： $db->addServer(array ( 'host' => localhost, 'user' => 'root', 'password' => 'root', 'charset' => 'utf8mb4', //修改这一行 'port' => 3306, 'database' => '' ), Typecho_Db::READ | Typecho_Db::WRITE);[/collapse]文章中嵌入网页[collapse status="false" title="文章中嵌入网页"]比如在独立页面上放置一个单独的网页页面使用方法在文章中添加代码即可，将链接地址修改为你需要展示的网站地址 [/collapse]时光机栏目增添额外内容[collapse status="false" title="时光机栏目增添额外内容"]使用方法将以下代码按照需求自行修改后放到主题后台-时光机配置-RSS动态内容配置内即可{"id":"iciba","name":"曦丽API接口","url":"https://api.l54l.com"}, [/collapse]自定义音乐播放器音量[collapse status="false" title="自定义音乐播放器音量"]后台-设置外观-开发者设置-自定义JS 添加以下代码setTimeout(function (){document.querySelector(".skPlayer-source").volume=0.3;}, 3000);其中volume=0.3为播放器音量控制，默认为0.3支持修改范围为0.0 - 1可自行设置[/collapse]美化记录自定义CSS[scode type="red" size=""]该修改项位于Handsome主题后台-外观-设置外观-开发者设置-自定义CSS处部分提到PJAX回调的部分添加到主题后台-外观-外观设置-PJAX-PJAX回调函数内[/scode]文章标题居中[collapse status="false" title="文章标题居中"]/*文章标题居中*/ header.bg-light.lter.wrapper-md { text-align: center; }[/collapse]首页标题文字居中[collapse status="false" title="首页标题文字居中"]/*首页标题文字居中*/ .m-t-none.text-ellipsis.index-post-title.text-title { text-align:center !important; }[/collapse]左上角博客LOGO/博客名称的扫光效果[collapse status="false" title="左上角博客LOGO/博客名称的扫光效果"]/* logo扫光 */ .navbar-brand{position:relative;overflow:hidden;margin: 0px 0 0 0px;}.navbar-brand:before{content:""; position: absolute; left: -665px; top: -460px; width: 200px; height: 15px; background-color: rgba(255,255,255,.5); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-animation: searchLights 6s ease-in 0s infinite; -o-animation: searchLights 6s ease-in 0s infinite; animation: searchLights 6s ease-in 0s infinite;}@-moz-keyframes searchLights{50%{left: -100px; top: 0;} 65%{left: 120px; top: 100px;}}@keyframes searchLights{40%{left: -100px; top: 0;} 60%{left: 120px; top: 100px;} 80%{left: -100px; top: 0px;}}[/collapse]左上角博主信息羽毛背景[collapse status="false" title="左上角博主信息羽毛背景"]background:url后面括号里的网址就是羽毛动画的网址，你也可以把它保存下来放到自己网站的根目录的某个位置内，然后将网址改为自己的博客，防止该效果失效（也就是做了个备份的意思，当然如果你嫌麻烦也可以不做）/* 羽毛_css */ .dropdown.wrapper { background:url(https://您的博客网址/yumao.webp) right bottom no-repeat; }[/collapse]鼠标路过头像时放大并旋转[collapse status="false" title="鼠标路过头像时放大并旋转"]/* 鼠标经过头像旋转放大 */ .img-circle {border-radius: 50%;animation: light 4s ease-in-out infinite;transition: all 0.5s;}.img-circle: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;}}[/collapse]首页文章图片获取焦点放大[collapse status="true" title="首页文章图片获取焦点放大"]/* 首页文章图片获取焦点放大 */ .item-thumb{cursor: pointer; transition: all 0.6s; }.item-thumb:hover{transform: scale(1.05); }.item-thumb-small{cursor: pointer; transition: all 0.6s;}.item-thumb-small:hover{transform: scale(1.05);}[/collapse]时光机内圆形头像[collapse status="false" title="时光机内圆形头像"]顾名思义，就是将独立页面-时光机里的头像都更改为圆形(原版是方形圆角样式)/* 时光机圆形头像 */ .img-square {border-radius: 50%;} .list-group-item .thumb-sm .img-square {border-radius: 5px;}[/collapse]文章版式阴影化[collapse status="false" title="文章版式阴影化"]可能这个项目看名称比较晦涩，其实就是你现在看到的各个边框散发的蓝(色的)光效果。所有rgba后面的，如26, 169, 255都可以进行修改，它代表的是散发出来的颜色类型。你同样可以去 http://tools.jb51.net/static/colorpicker/ 这个网站去选自己喜欢的颜色，但更改的时候一定注意"标点"，不要出现类似少逗号的问题哦\~/* 首页文章版式阴影颜色 */ .panel{ box-shadow: 1px 1px 5px 5px rgba(26, 169, 255, 0.35); -moz-box-shadow: 1px 1px 5px 5px rgba(26, 169, 255, 0.35); } .panel:hover{ box-shadow: 1px 1px 5px 5px rgba(26, 169, 255, 0.35); -moz-box-shadow: 1px 1px 5px 5px rgba(26, 169, 255, 0.35); } .panel-small{ box-shadow: 1px 1px 5px 5px rgba(26, 169, 255, 0.35); -moz-box-shadow: 1px 1px 5px 5px rgba(26, 169, 255, 0.35); } .panel-small:hover{ box-shadow: 1px 1px 5px 5px rgba(26, 169, 255, 0.35); -moz-box-shadow: 1px 1px 5px 5px rgba(26, 169, 255, 0.35); } .app.container { box-shadow: 0 0 30px rgba(26, 169, 255, 0.35); }本站调用* 首页文章版式阴影颜色 */ .panel:hover{ box-shadow: 1px 1px 5px 5px rgba(26, 169, 255, 0.35); } .app.container { box-shadow: 0 0 30px rgba(26, 169, 255, 0.35); }[/collapse]右侧列表导航栏图标颜色[collapse status="false" title="右侧列表导航栏图标颜色"]这一项是更改右上方三个图标(大拇指，信息，礼物)的颜色，默认是白色。同样#后面的六位数字代表颜色，可以改\~/* 右侧列表导航栏图标颜色 */ .sidebar-icon svg.feather.feather-thumbs-up{color: #ff0000;} .sidebar-icon svg.feather.feather-message-square{color:#495dc3;} .sidebar-icon svg.feather.feather-gift{color:#52DE97;} #post-content pre code { display:block; overflow-x:auto; position:relative; margin:0; padding-left:50px; } pre code { position:relative; display:block; overflow-x:auto; margin:4.4px 0.px .4px 1px; padding:0; max-height:500px; padding-left:3.5em } .img-square { transition: all 0.3s; } .img-square:hover { transform: rotate(360deg); } .glyphicon-fire { color: #ff0000; } .nav-tabs-alt .glyphicon-comment { color: #495dc3; } .glyphicon-transfer { color: #0e5458; }[/collapse]等距标签云[collapse status="false" title="等距标签云"]/*词云等距美化*/ #tag_cloud-2 a { border-radius: 5px; width: 32%; }[/collapse]首页文章列表悬停上浮[collapse status="false" title="首页文章列表悬停上浮"]/*首页文章列表悬停上浮*/ .blog-post .panel:not(article) { transition: all 0.3s; } .blog-post .panel:not(article):hover { transform: translateY(-10px); box-shadow: 0 8px 10px rgba(73, 90, 47, 0.47); }[/collapse]赞赏按钮跳动[collapse status="false" title="赞赏按钮跳动"]/*赞赏按钮跳动*/ .btn-pay { animation: star 0.5s ease-in-out infinite alternate; } @keyframes star { from { transform: scale(1); } to { transform: scale(1.1); } }[/collapse]评论边框[collapse status="false" title="评论边框"]/*评论边框*/ .comment-parent { margin: 20px; padding: 20px; border-radius: 25px; border: 1px solid rgba(255,255,255,.3); }新优化/*评论边框*/ .comment-parent{ margin:10px 5px; padding:20px; border-radius:10px; border:1px solid rgba(0,191,255,.3); box-shadow:2px 2px 5px rgba(0,191,255,.3) }[/collapse]粗斜体上色[collapse status="false" title="粗斜体上色"]/* 粗斜体上色 */ strong{ color: #f26522; } em{ font-style: normal; color: #fcaf17; }[/collapse]开启全站变灰（黑白模式）[collapse status="false" title="开启全站变灰（黑白模式）"]方式一 html {-webkit-filter: grayscale(100%);filter:progid:DXImageTransform.Microsoft.BasicImage(graysale=1);} html { filter:progidXImageTransform.Microsoft.BasicImage(grayscale=1); } html{ filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: url("data:image/svg+xml;utf8,#grayscale"); filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter: grayscale(1);} 方式二 方式三 方式四 [/collapse]修改h1，h2标题背景颜色[collapse status="false" title="修改h1，h2标题背景颜色"]/*文章页h标签背景颜色修改*/ #post-content h1, #post-content h2 { background : linear-gradient(to bottom,transparent 60%,rgba(0,191,255,.3) 0) no-repeat }[/collapse]手机端不显示热门文章和标签云[collapse status="false" title="手机端不显示热门文章和标签云"]/*手机不显示*/ @media (max-width:767px) { #tabs-4,#tag_cloud-2 { display: none; } }[/collapse]网站背景添加海浪背景[collapse status="false" title="网站背景添加海浪背景"]效果图：添加至后台主题设置-开发者设置-自定义CSS/* 海浪背景CSS部分 */ #wavesDIV{position: fixed;bottom: 0;width: 100%;display:block;height:20vh;background-color:rgb(125,165,191);animation: move-out 2s cubic-bezier(0,.98,.97,1) forwards;} .waves { position:relative; width: 100%; height:15vh; margin-top:-15vh; min-height:100px; max-height:150px; } .parallax > use { animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite; } .parallax > use:nth-child(1) { animation-delay: -2s; animation-duration: 7s; } .parallax > use:nth-child(2) { animation-delay: -3s; animation-duration: 10s; } .parallax > use:nth-child(3) { animation-delay: -4s; animation-duration: 13s; } .parallax > use:nth-child(4) { animation-delay: -5s; animation-duration: 20s; } @keyframes move-forever { 0% { transform: translate3d(-90px, 0, 0); } 100% { transform: translate3d(85px, 0, 0); } } @keyframes move-out { 0% { transform: translateY(400%); } 100% { transform: translateY(0%); } }添加至后台主题设置-开发者设置-自定义输出head 头部的HTML代码 <defs> <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"></path> </defs> <g class="parallax"> <use xlink:href="#gentle-wave" x="48" y="-2" fill="rgba(125,165,191,0.3)"></use> <use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(125,165,191,0.5)"></use> <use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(125,165,191,0.7)"></use> <use xlink:href="#gentle-wave" x="48" y="12" fill="rgba(125,165,191,1)"></use> </g> [/collapse]自定义JavaScripts[scode type="green" size=""]该修改项位于Handsome主题后台-外观-设置外观-开发者设置-自定义 JavaScript处[/scode]网页文字禁止复制[collapse status="false" title="网页文字禁止复制"] [/collapse]复制成功提示[collapse status="false" title="复制成功提示"]效果图：使用方法：复制下面代码到 handsome主题>设置外观>开发者设置>自定义 JavaScript/* 复制成功提示代码开始 */ kaygb_copy();function kaygb_copy(){$(document).ready(function(){$("body").bind('copy',function(e){hellolayer()})});var sitesurl=window.location.href;function hellolayer(){ $.message({ message: "尊重原创，转载请注明出处！ 本文作者：岁月无声 原文链接："+sitesurl, title: "复制成功", type: "warning", autoHide: !1, time: "5000" }) }} /* 复制成功提示代码结束 */[/collapse]复制文章带有文章版权[collapse status="false" title="复制文章带有文章版权"]效果图：使用方法：复制下面代码到 handsome主题>设置外观>开发者设置>自定义 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 = '' + '著作权归作者所有。 ' + '商业转载请联系作者获得授权，非商业转载请注明出处！ ' + '本博转载文章版权及解释权归原作者所有，博主只是勤劳的搬运工！ ' + '作者：罗洪斌 ' + '链接：' + window.location.href + ' ' + '来源：http://www.l54l.com/ ' + window.getSelection().toString(); var textData = '' + '著作权归作者所有。\n' + '商业转载请联系作者获得授权，非商业转载请注明出处！\n' + '本博转载文章版权及解释权归原作者所有，博主只是勤劳的搬运工！\n' + '作者：罗洪斌\n' + '链接：' + window.location.href + '\n' + '来源：http://www.l54l.com/\n\n' + window.getSelection().toString(); clipboardData.setData('text/html', htmlData); clipboardData.setData('text/plain',textData); } } /* 复制文章自动带版权结束 */[/collapse]鼠标点击特效-爱心样式[collapse status="false" title="鼠标点击特效-爱心样式"]效果图：//鼠标点击出现爱心特效 (function(window,document,undefined){ var hearts = []; window.requestAnimationFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback){ setTimeout(callback,1000/60); } })(); init(); function init(){ css(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: absolute;}.heart:after{top: -5px;}.heart:before{left: -5px;}"); attachEvent(); gameloop(); } function gameloop(){ for(var i=0;i<hearts.length;i++){ if(hearts[i].alpha <=0){ document.body.removeChild(hearts[i].el); hearts.splice(i,1); continue; } hearts[i].y--; hearts[i].scale += 0.004; hearts[i].alpha -= 0.013; hearts[i].el.style.cssText = "left:"+hearts[i].x+"px;top:"+hearts[i].y+"px;opacity:"+hearts[i].alpha+";transform:scale("+hearts[i].scale+","+hearts[i].scale+") rotate(45deg);background:"+hearts[i].color; } requestAnimationFrame(gameloop); } function attachEvent(){ var old = typeof window.onclick==="function" && window.onclick; window.onclick = function(event){ old && old(); createHeart(event); } } function createHeart(event){ var d = document.createElement("div"); d.className = "heart"; hearts.push({ el : d, x : event.clientX - 5, y : event.clientY - 5, scale : 1, alpha : 1, color : randomColor() }); document.body.appendChild(d); } function css(css){ var style = document.createElement("style"); style.type="text/css"; try{ style.appendChild(document.createTextNode(css)); }catch(ex){ style.styleSheet.cssText = css; } document.getElementsByTagName('head')[0].appendChild(style); } function randomColor(){ return "rgb("+(~~(Math.random()*255))+","+(~~(Math.random()*255))+","+(~~(Math.random()*255))+")"; } })(window,document);[/collapse]网站加载完成提示[collapse status="false" title="网站加载完成提示"]/* 网站加载完成提示开始 */ function kaygb_referrer(){ var kaygb_referrer = document.referrer; if (kaygb_referrer != ""){ return "感谢您的访问！ 您来自： " + document.referrer; }else{ return ""; }} $.message({ message: "为了网站的正常运行，请不要使用广告屏蔽插件，谢谢！ " + kaygb_referrer(), title: "网站加载完成", type: "success", autoHide: !1, time: "3000" }) /* 网站加载完成提示结束 */[/collapse]左上角网站FPS显示[collapse status="false" title="左上角网站FPS显示"]/* FPS显示 */ var console={}; console.log=function(){}; $('body').before(' '); var showFPS = (function(){ var requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000/60); }; var e,pe,pid,fps,last,offset,step,appendFps; fps = 0; last = Date.now(); step = function(){ offset = Date.now() - last; fps += 1; if( offset >= 1000 ){ last += offset; appendFps(fps); fps = 0; } requestAnimationFrame( step ); }; appendFps = function(fps){ console.log(fps+'FPS'); $('#fps').html(fps+'FPS'); }; step(); })();[/collapse]左侧图标颜色和彩色标签云[collapse status="false" title="左侧图标颜色和彩色标签云"]/* 左侧图标颜色and彩色标签云 */ let tags = document.querySelectorAll("#tag_cloud-2 a"); let infos = document.querySelectorAll(".badge"); let colorArr = ["#428BCA", "#AEDCAE", "#ECA9A7", "#DA99FF", "#FFB380", "#D9B999"]; tags.forEach(tag => { tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)]; tag.style.backgroundColor = tagsColor; }); infos.forEach(info => { infosColor = colorArr[Math.floor(Math.random() * colorArr.length)]; info.style.backgroundColor = infosColor; }); function addNumber(a) { var length = document.getElementById("comment").value.length; if(length> 0){ document.getElementById("comment").focus() document.getElementById("comment").value += '\n' + a + new Date }else{ document.getElementById("comment").focus() document.getElementById("comment").value += a + new Date } } let leftHeader = document.querySelectorAll("span.nav-icon>svg,span.nav-icon>i"); let leftHeaderColorArr = ["#FF69B4", "#58c7ea", "#E066FF", "#FF69B4", "#FFA54F", "#90EE90"]; leftHeader.forEach(tag => { tagsColor = leftHeaderColorArr[Math.floor(Math.random() * colorArr.length)]; tag.style.color = tagsColor; });1.如果你博客开启了PJAX，需要在PJAX回调函数里面添加以下代码2.Handsome主题后台-外观-设置外观-开发者设置-自定义 JavaScript处 添加以下代码// 彩色标签云 let tags = document.querySelectorAll("#tag_cloud-2 a"); let infos = document.querySelectorAll(".badge"); let colorArr = ["#428BCA", "#AEDCAE", "#ECA9A7", "#DA99FF", "#FFB380", "#D9B999"]; tags.forEach(tag => { tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)]; tag.style.backgroundColor = tagsColor; }); infos.forEach(info => { infosColor = colorArr[Math.floor(Math.random() * colorArr.length)]; info.style.backgroundColor = infosColor; }); function addNumber(a) { var length = document.getElementById("comment").value.length; if(length> 0){ document.getElementById("comment").focus() document.getElementById("comment").value += '\n' + a + new Date }else{ document.getElementById("comment").focus() document.getElementById("comment").value += a + new Date } }[/collapse]动态网站标题-第一种[collapse status="false" title="动态网站标题-第一种"]当你看其他网站的时候，网页标题会有可爱的变化\~另外代码里的两个链接可以按照自己的需求修改哦\~/* 动态网站标题 */ var OriginTitle = document.title; var titleTime; document.addEventListener('visibilitychange', function () { if (document.hidden) { $('[rel="icon"]').attr('href', "https://cdn.jsdelivr.net/gh/Catalpablog/handsome/img/warning.webp"); document.title = '网页崩溃了！！！'; clearTimeout(titleTime); } else { $('[rel="icon"]').attr('href', "https://cdn.jsdelivr.net/gh/Catalpablog/handsome/img/favicon.webp"); document.title = '咦，又好啦(✿◡‿◡)' ; titleTime = setTimeout(function () { document.title = OriginTitle; }, 2000); } });[/collapse]打字动画效果（代码实现）[collapse status="false" title="打字动画效果（代码实现）"]这里是通过代码修改的，下边会给大家分享个插件，开启插件即可实现这个项目是指在网页里打字时出现的一个动画效果，还是不懂得话可以尝试在本站打字/* 打字动效 */ (function webpackUniversalModuleDefinition(a,b){if(typeof exports==="object"&&typeof module==="object"){module.exports=b()}else{if(typeof define==="function"&&define.amd){define([],b)}else{if(typeof exports==="object"){exports["POWERMODE"]=b()}else{a["POWERMODE"]=b()}}}})(this,function(){return(function(a){var b={};function c(e){if(b[e]){return b[e].exports}var d=b[e]={exports:{},id:e,loaded:false};a[e].call(d.exports,d,d.exports,c);d.loaded=true;return d.exports}c.m=a;c.c=b;c.p="";return c(0)})([function(c,g,b){var d=document.createElement("canvas");d.width=window.innerWidth;d.height=window.innerHeight;d.style.cssText="position:fixed;top:0;left:0;pointer-events:none;z-index:999999";window.addEventListener("resize",function(){d.width=window.innerWidth;d.height=window.innerHeight});document.body.appendChild(d);var a=d.getContext("2d");var n=[];var j=0;var k=120;var f=k;var p=false;o.shake=true;function l(r,q){return Math.random()*(q-r)+r}function m(r){if(o.colorful){var q=l(0,360);return"hsla("+l(q-10,q+10)+", 100%, "+l(50,80)+"%, "+1+")"}else{return window.getComputedStyle(r).color}}function e(){var t=document.activeElement;var v;if(t.tagName==="TEXTAREA"||(t.tagName==="INPUT"&&t.getAttribute("type")==="text")){var u=b(1)(t,t.selectionStart);v=t.getBoundingClientRect();return{x:u.left+v.left,y:u.top+v.top,color:m(t)}}var s=window.getSelection();if(s.rangeCount){var q=s.getRangeAt(0);var r=q.startContainer;if(r.nodeType===document.TEXT_NODE){r=r.parentNode}v=q.getBoundingClientRect();return{x:v.left,y:v.top,color:m(r)}}return{x:0,y:0,color:"transparent"}}function h(q,s,r){return{x:q,y:s,alpha:1,color:r,velocity:{x:-1+Math.random()*2,y:-3.5+Math.random()*2}}}function o(){var t=e();var s=5+Math.round(Math.random()*10);while(s--){n[j]=h(t.x,t.y,t.color);j=(j+1)%500}f=k;if(!p){requestAnimationFrame(i)}if(o.shake){var r=1+2*Math.random();var q=r*(Math.random()>0.5?-1:1);var u=r*(Math.random()>0.5?-1:1);document.body.style.marginLeft=q+"px";document.body.style.marginTop=u+"px";setTimeout(function(){document.body.style.marginLeft="";document.body.style.marginTop=""},75)}}o.colorful=false;function i(){if(f>0){requestAnimationFrame(i);f--;p=true}else{p=false}a.clearRect(0,0,d.width,d.height);for(var q=0;q<n.length;++q){var r=n[q];if(r.alpha<=0.1){continue}r.velocity.y+=0.075;r.x+=r.velocity.x;r.y+=r.velocity.y;r.alpha*=0.96;a.globalAlpha=r.alpha;a.fillStyle=r.color;a.fillRect(Math.round(r.x-1.5),Math.round(r.y-1.5),3,3)}}requestAnimationFrame(i);c.exports=o},function(b,a){(function(){var d=["direction","boxSizing","width","height","overflowX","overflowY","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","borderStyle","paddingTop","paddingRight","paddingBottom","paddingLeft","fontStyle","fontVariant","fontWeight","fontStretch","fontSize","fontSizeAdjust","lineHeight","fontFamily","textAlign","textTransform","textIndent","textDecoration","letterSpacing","wordSpacing","tabSize","MozTabSize"];var e=window.mozInnerScreenX!=null;function c(k,l,o){var h=o&&o.debug||false;if(h){var i=document.querySelector("#input-textarea-caret-position-mirror-div");if(i){i.parentNode.removeChild(i)}}var f=document.createElement("div");f.id="input-textarea-caret-position-mirror-div";document.body.appendChild(f);var g=f.style;var j=window.getComputedStyle?getComputedStyle(k):k.currentStyle;g.whiteSpace="pre-wrap";if(k.nodeName!=="INPUT"){g.wordWrap="break-word"}g.position="absolute";if(!h){g.visibility="hidden"}d.forEach(function(p){g[p]=j[p]});if(e){if(k.scrollHeight>parseInt(j.height)){g.overflowY="scroll"}}else{g.overflow="hidden"}f.textContent=k.value.substring(0,l);if(k.nodeName==="INPUT"){f.textContent=f.textContent.replace(/\s/g,"\u00a0")}var n=document.createElement("span");n.textContent=k.value.substring(l)||".";f.appendChild(n);var m={top:n.offsetTop+parseInt(j["borderTopWidth"]),left:n.offsetLeft+parseInt(j["borderLeftWidth"])};if(h){n.style.backgroundColor="#aaa"}else{document.body.removeChild(f)}return m}if(typeof b!="undefined"&&typeof b.exports!="undefined"){b.exports=c}else{window.getCaretCoordinates=c}}())}])}); POWERMODE.colorful=true;POWERMODE.shake=false;document.body.addEventListener("input",POWERMODE);[/collapse]添加复制弹窗[collapse status="false" title="添加复制弹窗"]首先添加以下代码至自定义输出body尾部的HTML代码 然后将以下代码加到自定义JavaScripts，文字部分可以自行更改\~/* 复制效果 */ document.body.oncopy = function(){Swal.fire({allowOutsideClick:false,type:'success',title: '复制成功,如转载请注明出处！',showConfirmButton: false,timer: 2000});};[/collapse]自定义body[scode type="blue" size=""]该修改项位于Handsome主题后台-外观-设置外观-开发者设置-自定义输出body 尾部的HTML代码处[/scode]万能的控制台[collapse status="false" title="万能的控制台"]效果图： [/collapse]气泡背景[collapse status="false" title="气泡背景"]id: '', //容器ID num: 100, // 个数 start_probability: 0.1, // 如果数量小于num，有这些几率添加一个新的 radius_min: 1, // 初始半径最小值 radius_max: 2, // 初始半径最大值 radius_add_min: .3, // 半径增加最小值 radius_add_max: .5, // 半径增加最大值 opacity_min: 0.3, // 初始透明度最小值 opacity_max: 0.5, // 初始透明度最大值 opacity_prev_min: .003, // 透明度递减值最小值 opacity_prev_max: .005, // 透明度递减值最大值 light_min: 40, // 颜色亮度最小值 light_max: 70, // 颜色亮度最大值 is_same_color: false, //泡泡颜色是否相同 background:"#f1f3f4" //背景颜色在 开发者设置 自定义输出body 尾部的HTML代码中添加下面代码，需要修改可参考上方参数 [/collapse]动态网站标题-第二种[collapse status="false" title="动态网站标题-第二种"]复制下方代码添加至后台主题设置 自定义输出head 头部的HTML代码即可 [/collapse]动态网站标题-第三种复制下方代码添加至后台主题设置 自定义输出head 头部的HTML代码即可 自定义右键菜单美化[collapse status="false" title="自定义右键菜单美化"]注意：一定首先在主题后台-外观-设置外观-开发者设置-自定义输出head 头部的HTML代码位置添加以下代码。如果不添加将不会显示图标 HTML复制*加完之后再将下面的代码放到自定义输出body 尾部的HTML代码处另外，一定要把代码里的网址改成自己的！！\~ 首页 复制 搜索 前进 后退 重载网页 和我当邻居 给我留言吧 [/collapse]防止他人F12抓你代码[collapse status="false" title="防止他人F12抓你代码"]首先要说，这个功能防君子不防小人。所以真的会扒你网站代码的人总是会有办法的(就不告诉你)。提示内容可以自行修改哦\~ [/collapse]顶部导航栏添加网页动态滚动进度条|滚动指示器[collapse status="false" title="顶部导航栏添加网页动态滚动进度条|滚动指示器"]使用方法将以下代码加到后台设置->自定义输出head 头部的HTML代码 [/collapse]修改文件[scode type="yellow" size=""]这部分基本上全是通过修改文件来达到美化的目的，故一定要提前做好备份\~[/scode]首页新年倒计时[collapse status="false" title="首页新年倒计时"]将如下代码加到开发者设置-首页列表最前方广告位即可 2 0 2 3 年 - 新 年 倒 计 时 天 时 分 秒 [/collapse]博主介绍文字动态化[collapse status="false" title="博主介绍文字动态化"]将代码里的这是我的介绍这一部分修改称自己想要展示的内容即可，顺便那个❤也是可以改的，随你开心就是了将以下代码放到主题后台-外观-设置外观-初级设置-博主的介绍内即可放之前记得先清空博主的介绍栏内的所有内容 [/collapse]给正文添加结束标识[collapse status="false" title="给正文添加结束标识"]效果就是像本博客的每篇博文正文下面有一个好看的END标识。首先打开 网站根目录/usr/themes/handsome的post.php文件找到<?php if ($this->options->adContentPost != ""): ?>这行代码，在其上方(截图标出的位置)的空白位置添加以下代码 End 并在改好保存后，在自定义CSS处添加以下代码/*文章正文下的结束End分割线样式*/ .tt-fenge-end{border-top: 2px dotted #eee;height: 0px;margin: 35px 0px;text-align: center;width: 100%;line-height: 1.6em;} .tt-fenge-end span{background-color: #23b7e5;color: #fff;padding: 2px 8px;position: relative;top: -14px;border-radius: 12px;font-size: 12px;} /*深色模式下文章正文下的结束End分割线颜色*/ html.theme-dark .tt-fenge-end{border-top: 2px dotted #4f4f4f;}[/collapse]