handsome主题美化最新-一一网络 handsome主题美化最新 – 一一网络

handsome主题美化最新

前言
handsome主题
在复杂中,保持简洁。 一款精心打磨后的typecho主题
美化
为了减少对源码的修改,本次美化大多数可以直接在后台开发者设置-自定义css中添加代码即可。
1. 头像呼吸光环和鼠标悬停旋转放大
.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;
}
}
2. 左侧文章图标和评论头像鼠标悬停旋转
.img-circle {
transition: all 0.3s;
}
.img-circle:hover {
transform: rotate(360deg);
}
3. 文章内打赏图标跳动
.btn-pay {
animation: star 0.5s ease-in-out infinite alternate;
}
@keyframes star {
from {
transform: scale(1);
}
to {
transform: scale(1.1);
}
}
4. 彩色标签云
js为标签随机添加上预先定义的颜色,每次刷新都会进行换色:
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;
});
如果主题中启用了pjax,还需要将上面代码添加到pjax回调函数中
5. 首页文章列表悬停上浮
.index-post-img {
overflow: hidden;
}
.item-thumb {
transition: all 0.3s;
}
.item-thumb:hover {
transform: scale(1.1)
}
6. 首页文章列表头图悬停放大并将超出范围隐藏
.index-post-img {
overflow: hidden;
}
.item-thumb {
transition: all 0.3s;
}
.item-thumb:hover {
transform: scale(1.1)
}
7. 文章内头图和文章图片悬停放大并将超出范围隐藏
.entry-thumbnail {
overflow: hidden;
}
#post-content img {
border-radius: 10px;
transition: 0.5s;
}
#post-content img:hover {
transform: scale(1.05);
}
8. 右侧列表导航栏图标颜色
.glyphicon-fire {
color: #ff0000;
}
.nav-tabs-alt .glyphicon-comment {
color: #495dc3;
}
.glyphicon-transfer {
color: #0e5458;
}
主题中原来是必须重新点击耳机图标才能将歌曲列表隐藏,感觉有点累,而且此时再点击闲言碎语会将两个元素重叠。设置之后可以点击空白区域将歌曲列表隐藏,由于本文主旨是尽量不修改源码,所以实现的方式较为繁琐。先添加css:
.musicPlayerHiden {
display: none;
}
然后添加js代码:
document.body.onclick = function () {
document.querySelector(“.skPlayer-list”).classList.add(“musicPlayerHiden”);
}
document.querySelector(“.skPlayer-list-switch”).onclick = function (e) {
document.querySelector(“.skPlayer-list”).classList.remove(“musicPlayerHiden”);
document.querySelector(“.skPlayer-list”).onclick = function (e) {
if (e && e.stopPropagation) {
e.stopPropagation();
} else {
window.event.cancalBubble = true;
}
}
if (e && e.stopPropagation) {
e.stopPropagation();
} else {
window.event.cancalBubble = true;
}
}
10.文章标题居中
.panel h2{
text-align: center;
}
.post-item-foot-icon{
text-align: center;
}
首页文章版式圆角化
/*首页文章版式圆角化*/
.panel{
border: none;
border-radius: 15px;
}
.panel-small{
border: none;
border-radius: 15px;
}
.item-thumb{
border-radius: 15px;
}
首页文章版式阴影化
/*panel阴影*/
.panel{
box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
-moz-box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
}
.panel:hover{
box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
-moz-box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
}
.panel-small{
box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
-moz-box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
}
.panel-small:hover{
box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
-moz-box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
}
图片抖动效果
img:hover {
-webkit-animation:sucaijiayuan 1s .1s ease both;
-moz-animation:tada 1s .1s ease both;
}
@-webkit-keyframes sucaijiayuan {
0% {
-webkit-transform:scale(1)
}
10%, 20% {
-webkit-transform:scale(0.8) rotate(-2deg)
}
30%, 50%, 70%, 90% {
-webkit-transform:scale(1.1) rotate(2deg)
}
40%, 60%, 80% {
-webkit-transform:scale(1.1) rotate(-2deg)
}
100% {
-webkit-transform:scale(1) rotate(0)
}
自定义滚动条滑块
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar{
width: 3px;
height: 16px;
background-color: rgba(255,255,255,0);
}
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: rgba(255,255,255,0);
}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #555;
文章标题居中
.panel h2{
text-align: center;
}
.post-item-foot-icon{
text-align: center;
}
自定义鼠标样式
body {
cursor:url(‘鼠标指针图片链接’), auto;
}
select, input, textarea, a, button {
cursor:url(‘鼠标指针图片链接’), auto;
}
input[disabled], select[disabled], textarea[disabled], input[readonly], select[readonly] {
cursor:url(‘鼠标指针图片链接’), auto;
}
一言随机句子API
添加至handsome主题后台 初级设置 首页一行文字介绍
PHP接口 随机句子 调用代码:

PHP接口 ——选自散文集《我在人间凑数的日子》 调用代码:

其他API调用地址:https://api.qqder.com/
使用CDN后获取用户真实IP
typecho博客放在config.inc.php文本内
//防止 CDN 造成无法获取客户真实 IP 地址
if(isset($_SERVER[‘HTTP_X_FORWARDED_FOR’]))
{
$list = explode(‘,’,$_SERVER[‘HTTP_X_FORWARDED_FOR’]);
$_SERVER[‘REMOTE_ADDR’] = $list[0];
}
强制博客加载HTTPS
typecho博客放在config.inc.php文本内
/** 开启HTTPS */
define(‘__TYPECHO_SECURE__’,true);
评论一键打卡赞踩
1.设置外观-开发者设置-自定义JavaScript
打卡赞踩JavaScript
2.PJAX回调函数也加入以上代码
3.然后在主题目录component/comments.php里面搜索

(目测134行)
评论一键打卡代码
4.设置外观-开发者设置-自定义CSS
/*私密评论按钮位置*/
.secret_comment {
top: 5px;
}
.OwO.OwO-open .OwO-body {
display:table
}
博客&浏览器标签栏装修
切换标签实现网页标题变化 看着挺装逼的
这里采用的typecho&handsome主题
放在footer.php文件的最后body标签外
4. 彩色标签云
之前看过一个彩色标签云的插件,这里用js为标签随机添加上预先定义的颜色,每次刷新都会进行换色:
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;
});
JavaScript 复制
如果主题中启用了pjax,还需要将上面代码添加到pjax回调函数中
5. 首页文章列表悬停上浮
.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);
}
CSS 复制
6. 首页文章列表头图悬停放大并将超出范围隐藏
.index-post-img {
overflow: hidden;
}
.item-thumb {
transition: all 0.3s;
}
.item-thumb:hover {
transform: scale(1.1)
}
CSS 复制
7. 文章内头图和文章图片悬停放大并将超出范围隐藏
.entry-thumbnail {
overflow: hidden;
}
#post-content img {
border-radius: 10px;
transition: 0.5s;
}
#post-content img:hover {
transform: scale(1.05);
}
CSS 复制
8. 右侧列表导航栏图标颜色
.glyphicon-fire {
color: #ff0000;
}
.nav-tabs-alt .glyphicon-comment {
color: #495dc3;
}
.glyphicon-transfer {
color: #0e5458;
}
CSS 复制
9. Mac代码高亮插件
\“`php(语言类型选填)

\“`
删除上边代码中的\
PHP 复制
本人所写的一款插件,希望大家多多支持
Typecho代码高亮插件Code Prettify
基于prismjs的代码语法高亮typecho插件,支持众多常见的代码语言高亮显示,共提供11种代码高亮风格自由切…
10. 悬挂猫咪置顶插件
食用方法
Download ZIP, 解压
重命名文件夹为GoTop
上传至usr/plugins目录
登录后台启用即可
如果主题模板已加载jquery,可以在插件设置内禁用加载jquery
更新信息:
1.0.0 项目完成
1.1.0 修复打开站点默认下拉的问题
1.2.0 增加动态效果
项目地址
https://github.com/MisakaTAT/GoTop

免责声明:务必仔细阅读

  • 本站为个人博客,博客所转载的一切破解、path、补丁、注册机和注册信息及软件等资源文章仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。

  • 本站为非盈利性站点,打赏作为用户喜欢本站捐赠打赏功能,本站不贩卖软件等资源,所有内容不作为商业行为。

  • 本博客的文章中涉及的任何解锁和解密分析脚本,仅用于测试和学习研究,禁止用于商业用途,不能保证其合法性,准确性,完整性和有效性,请根据情况自行判断.

  • 本博客的任何内容,未经许可禁止任何公众号、自媒体进行任何形式的转载、发布。

  • 博客对任何脚本资源教程问题概不负责,包括但不限于由任何脚本资源教程错误导致的任何损失或损害.

  • 间接使用相关资源或者参照文章的任何用户,包括但不限于建立VPS或在某些行为违反国家/地区法律或相关法规的情况下进行传播, 博客对于由此引起的任何隐私泄漏或其他后果概不负责.

  • 请勿将博客的任何内容用于商业或非法目的,否则后果自负.

  • 如果任何单位或个人认为该博客的任何内容可能涉嫌侵犯其权利,则应及时通知并提供身份证明,所有权证明至admin@proyy.com.我们将在收到认证文件后删除相关内容.

  • 任何以任何方式查看此博客的任何内容的人或直接或间接使用该博客的任何内容的使用者都应仔细阅读此声明。博客保留随时更改或补充此免责声明的权利。一旦使用并复制了博客的任何内容,则视为您已接受此免责声明.

您必须在下载后的24小时内从计算机或手机中完全删除以上内容.

您使用或者复制了本博客的任何内容,则视为已接受此声明,请仔细阅读


更多福利请关注一一网络微信公众号或者小程序

一一网络微信公众号
打个小广告,宝塔服务器面板,我用的也是,很方便,重点是免费的也能用,没钱太难了,穷鬼一个,一键全能部署及管理,送你3188元礼包,点我领取https://www.bt.cn/?invite_code=MV9kY3ZwbXo=


一一网络 » handsome主题美化最新

0 评论

发表评论

0 评论

发表评论

一一网络-提供最优质的文章集合

立即查看 了解详情