Typecho-主题美化教程(持续更新) 前言　 本文章只是个人无聊时的对Typecho主题美化记录集合，同时也是本人的备忘录。若您觉得可以的话就拿去贵站使用吧，我会不定期（主要是想不到好的美化了）更新一些美化教程、好玩的小工具、页面等等。 {mtitle title=" 美化说明 "/}每个人的审美观念不一样，所以请先参考本站或测试在用。主题美化、小工具可能会有一定程度使网站加载缓慢、CSS全局污染等等一系列的问题，请一定要测试后在进行美化。主题美化可能会对主题文件进行修改，更新时请及时备份主题美化的文件，或者收藏本站，以免一些主题页面或美化效果丢失。主题美化都是我自己鼓捣、测试后才分布的，完全免费，开放。嗯…暂时想到这些，以后想到在加。美化教程（集合）说明：重要一些老教程随机顺序，新教程排在最后，越往后越新。↓↓↓↓↓不会添加代码的看下面↓↓↓↓↓（最新版）CSS代码添加到后台主题设置—>全局设置—>自定义CSS样式（最新版）JS即javascript代码添加到后台主题设置—>全局设置—>自定义javascript代码（最新版）没有特殊说明的小工具，自定义HTML小工具添加HTML文件，选择放置的位置—>把代码复制进去，保存即可。↑↑↑↑↑不会添加代码的看上面↑↑↑↑↑其他添加方式的，我会在教程里告知，若只需添加CSS+JS的教程，我可能不重复告知了，请注意看上面的方法。有些美化教程本站已经发布的，本文章将不再进行编写教程，直接跳转到文章页面。{collapse}{collapse-item label="网站右下角小猫" open} 主题设置 - 全局设置 - 自定义CSS添加以下代码/*躲猫猫*/ #maomao { position: fixed; bottom: 40px; right: -5px; width: 57px; height: 70px; background-image: url(//lib.hackeus.cn/static/svg/mao.svg); background-position: center; background-size: cover; background-repeat: no-repeat; transition: background .3s; } #maomao:hover { background-position: 60px 50%; }主题设置 - 全局设置 - 自定义body添加以下代码<!--躲猫猫--> <div id="maomao" onmouseout="duoMaomao()"> <input type="button" onclick="autoPlay()" hidden="true"> </div> <!--自动一声猫咪叫--> <audio id="myaudio" src="//lib.hackeus.cn/static/audio/music_miao.mp3" acontrols="controls" autoplay="autoplay" hidden="true"></audio> {/collapse-item}{collapse-item label="头像呼吸光环和鼠标悬停旋转放大"} 主题设置 - 全局设置 - 自定义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; } }如果只需要单色呼吸光环，例如红色，可以将关键帧动画改为：@keyframes light { from { box-shadow: 0 0 4px #f00; } to { box-shadow: 0 0 16px #f00; } }{/collapse-item}{collapse-item label="网站底部按钮美化代码"}自定义CSS/*CSS网站底部按钮美化*/ /*底部页脚*/ .linup-me { display: inline-block; border-radius: 4px; text-shadow: none; font-size: 12px; color: #fff; /*line-height: 15px;*/ background-color: #abbac3; margin-bottom: 5px; } .linup-me .badge-subject { display: inline-block; background-color: #f6b044; padding: 4px 4px 4px 6px; border-top-left-radius: 4px; border-bottom-left-radius: 4px; } .linup-me .badge-subject { display: inline-block; background-color: #f6b044; padding: 4px 4px 4px 6px; border-top-left-radius: 4px; border-bottom-left-radius: 4px; } .linup-me .badge-value { display: inline-block; padding: 4px 6px 4px 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; } .linup-me .bg-blue { background-image: -webkit-linear-gradient(0deg, #3ca5f6 0%, #a86af9 100%); } .linup-me .bg-orange { background-color: #05b1a4; } .linup-me .bg-red { background-color: #f55066; } .linup-me .bg-green { background-color: #e76dcb; } .linup-me .bg-blueness { background-color: #00FFEC; } /*CSS 代码网站底部按钮美化结束*/自定义底部栏右侧内容<!--网站底部美化 html 开始 --> <center> </p><div class="linup-me"> <span class="badge-subject">申请</span> <a style="color:#fff" href="/links.html" target="_blank"> <span class="badge-value bg-red">友情</span></a> </div> | <div class="linup-me"> <span class="badge-subject">订阅</span> <a style="color:#fff" href="/feed" target="_blank"> <span class="badge-value bg-green">本站</span></a> </div> | <div class="linup-me"> <span class="badge-subject">驱动</span> <a style="color:#fff" href="https://typecho.org/" target="_blank"> <span class="badge-value bg-orange">typecho</span></a> </div> | <div class="linup-me"> <span class="badge-subject">地图</span> <a style="color:#fff" href="/sitemap.xml" target="_blank"> <span class="badge-value bg-blueness">SiteMap</span> </a> </div> | <div class="linup-me"> <span class="badge-subject">鲁ICP备</span> <a style="color:#fff" href="https://beian.miit.gov.cn/"> <span class="badge-value bg-blue">2023002154号</span> </a> </div></center> <!--网站底部按钮美化 html 结束 -->{/collapse-item}{collapse-item label="typecho文章更换图片旧链接"} Typecho批量替换文章内链接与图片链接 {/collapse-item}{collapse-item label="WAP端侧边栏显示博主在线时间"}将以下代码放在主题文件 core/core.php 或 core/function.php 文件function get_last_login($user){ $user = '1'; $now = time(); $db = Typecho_Db::get(); $prefix = $db->getPrefix(); $row = $db->fetchRow($db->select('activated')->from('table.users')->where('uid = ?', $user)); echo Typecho_I18n::dateWord($row['activated'], $now); } 然后在想要显示的位置调用以下代码本站加在了he'a'der里面博主 <?php get_last_login(1); ?> 在线 {/collapse-item}{/collapse}