Typecho-主题美化教程(持续更新) - 青玄博客

前言

　本文章只是个人无聊时的对Typecho主题美化记录集合，同时也是本人的备忘录。若您觉得可以的话就拿去贵站使用吧，我会不定期（主要是想不到好的美化了）更新一些美化教程、好玩的小工具、页面等等。

每个人的审美观念不一样，所以请先参考本站或测试在用。
主题美化、小工具可能会有一定程度使网站加载缓慢、CSS全局污染等等一系列的问题，请一定要测试后在进行美化。
主题美化可能会对主题文件进行修改，更新时请及时备份主题美化的文件，或者收藏本站，以免一些主题页面或美化效果丢失。
主题美化都是我自己鼓捣、测试后才分布的，完全免费，开放。
嗯…暂时想到这些，以后想到在加。
美化教程（集合）

说明：重要

一些老教程随机顺序，新教程排在最后，越往后越新。
↓↓↓↓↓不会添加代码的看下面↓↓↓↓↓
（最新版）CSS代码添加到后台主题设置—>全局设置—>自定义CSS样式
（最新版）JS即javascript代码添加到后台主题设置—>全局设置—>自定义javascript代码
（最新版）没有特殊说明的小工具，自定义HTML小工具添加HTML文件，选择放置的位置—>把代码复制进去，保存即可。
↑↑↑↑↑不会添加代码的看上面↑↑↑↑↑
其他添加方式的，我会在教程里告知，若只需添加CSS+JS的教程，我可能不重复告知了，请注意看上面的方法。
有些美化教程本站已经发布的，本文章将不再进行编写教程，直接跳转到文章页面。

{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}

前言

美化教程（集合）

Typecho批量替换文章内链接与图片链接

—— 评论区 ——