Typecho简介

Typecho是一个基于PHP的开源博客程序。它使用多种数据库（MySQL、PostgreSQL、SQLite、MariaDB）储存数据，程序设计逻辑与WordPress相似，它通过插件与模板机制对程序进行扩展。
轻量-Typecho的程序本体不到500KB，而它的数据表在不包括扩展生成的数据表时仅7张
自适应-Typecho的默认模板和后台，全部采用了响应式设计。所以Typecho的大多数自制模板，都采用了自适应设计。

以下是本站使用的几个Typecho插件及Handsome主题魔改

Typecho插件

1.Handsome
handsomePro 主题配套插件
主题介绍
主题文档

2.Update
Typecho后台自动升级插件
百度网盘

3.CodePrettify
基于 prismjs 的代码语法高亮插件
插件下载

4.LoveKKComment
Typecho 评论通知、找回密码插件

5.HoerMouse
炫彩鼠标插件

6.UserAgent
显示评论人使用的操作系统和浏览器信息（Handsome主题专用）

7.Plyr HTML5 Video
Typecho HTML5 MP3/MP4 播放插件

8.DoubanBoard
在博客上展示你的豆瓣书单与豆瓣影单

9.GoTop
悬挂猫咪置顶插件
Github

10.Comment2Wechat
新评论微信通知插件
Github

handsome主题魔改

1.头像呼吸光环和鼠标悬停旋转放大
魔改路径：开发者设置-自定义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;
    }
}

2.左侧文章图标和评论头像鼠标悬停旋转
魔改路径：开发者设置-自定义CSS

/*左侧文章图标和评论头像鼠标悬停旋转*/
.img-square {
    transition: all 0.3s;
}

.img-square:hover {
    transform: rotate(360deg);
}

3.彩色标签云
魔改路径：开发者设置-自定义JavaScript

<!--彩色标签云-->
let tags = document.querySelectorAll("#tag_cloud-2 a");
let colorArr = ["#428BCA", "#AEDCAE", "#ECA9A7", "#DA99FF", "#FFB380", "#D9B999"];
tags.forEach(tag => {
    tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
    tag.style.backgroundColor = tagsColor;
});

4.复制弹窗
魔改路径：开发者设置-自定义JavaScript

<!--复制弹框-->
document.body.oncopy = function() {layer.msg('复制成功，若要转载请务必保留本文链接！');};

5.Chatra在线聊天
注册
https://app.chatra.io/
获取代码
https://app.chatra.io/settings/integrations/widget
魔改路径：开发者设置-自定义输出head 头部的HTML代码

版权属于：xinlon（除特别注明外）

本文链接：https://note.xinlon.cc/archives/15/

本站文章采用 知识共享署名4.0 国际许可协议 进行许可，请在转载时注明出处及本声明！