基于handsome主题的一些美化修改
用了handsome主题有一段时间了,今天对主题进行了一些修改,修改完成后几乎看不出主题被修改了,因为只是添加了一些鼠标悬停样式,感觉白忙活了。
目前已对最新版本6.0进行修改,其他版本部分样式会失效
为了减少对源码的修改,本次美化大多数可以直接在后台开发者设置-自定义css中添加代码即可。
1. 头像呼吸光环和鼠标悬停旋转放大
.img-full {width: 100px;border-radius: 50%;animation: light 4s ease-in-out infinite;transition: 0.5s;
}.vertical-avatar img: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-square {transition: all 0.3s;border-radius: 50%;
}.img-square: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-pjax回调函数中。
5. 首页文章列表悬停上浮
.blog-post .panel-small:not(article),
.blog-post .panel:not(article) {transition: all 0.3s;
}.blog-post .panel-small:not(article):hover,
.blog-post .panel:not(article):hover {transform: translateY(-10px);box-shadow: 0 8px 10px rgba(73, 90, 47, 0.47);
}
/* 2019/11/20更新 兼容大/小头图模式和交错模式 */
6. 首页文章列表头图悬停放大并将超出范围隐藏
.index-post-img {overflow: hidden;
}.item-thumb,
.item-thumb-small {transition: all 0.3s;
}.item-thumb:hover,
.item-thumb-small:hover {transform: scale(1.1)
}
/* 2019/11/20更新 兼容大/小头图模式和交错模式 */
7. 文章内头图和文章图片悬停放大并将超出范围隐藏
.entry-thumbnail {overflow: hidden;
}#post-content img {border-radius: 10px;transition: 0.5s;
}#post-content img:hover {transform: scale(1.05);
}
8、首页文章版式阴影化
本项修改的是首页文章版式,包括图片使其四周加上一层绚丽的阴影。将以下代码添加至后台主题设置 自定义CSS。
#阴影颜色修改rgba后面的值(别复制该行)
/*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);
}#如果也想使盒子四周也有阴影,加上以下代码
.app.container {box-shadow: 0 0 30px rgba(255, 112, 173, 0.35);
}
9、Typecho代码高亮插件Code Prettify
基于prismjs的代码语法高亮typecho插件,支持众多常见的代码语言高亮显示,共提供11种代码高亮风格自由切换,支持显示代码语言类型、行号,以及支持复制代码到剪切板功能
10、一键评论打卡功能
1.首先在后台–>设置外观–>开发者设置–>自定义JavaScript加入以下代码: PJAX回调函数也加入这个代码
function a(a, b, c) {if (document.selection) a.focus(), sel = document.selection.createRange(), c ? sel.text = b + sel.text + c : sel.text = b, a.focus();else if (a.selectionStart || "0" == a.selectionStart) {var l = a.selectionStart,m = a.selectionEnd,n = m;c ? a.value = a.value.substring(0, l) + b + a.value.substring(l, m) + c + a.value.substring(m, a.value.length) : a.value = a.value.substring(0, l) + b + a.value.substring(m, a.value.length);c ? n += b.length + c.length : n += b.length - m + l;l == m && c && (n -= c.length);a.focus();a.selectionStart = n;a.selectionEnd = n} else a.value += b + c, a.focus()
}
var b = (new Date).toLocaleTimeString(),c = document.getElementById("comment") || 0;
window.SIMPALED = {};
window.SIMPALED.Editor = {daka: function() {a(c, "滴!学生卡!打卡时间:" + b, ",请上车的乘客系好安全带~")},zan: function() {a(c, " 写得好好哟,我要给你生猴子!")},cai: function() {a(c, "骚年,我怀疑你写了一篇假的文章! ")}
};
2.打开主题目录的component/comments.php里面的126行到144行附近,修改为以下代码:
<div class="comment-form-comment form-group"><label for="comment"><?php _me("评论") ?><span class="required text-danger">*</span></label><textarea id="comment" class="textarea form-control OwO-textarea" name="text" rows="5" placeholder="<?php _me("说点什么吧……") ?>" οnkeydοwn="if(event.ctrlKey&&event.keyCode==13){document.getElementById('submit').click();return false};"><?php $this->remember('text'); ?></textarea><div class="OwO" style="display: inline;"></div><div class="OwO" title="打卡" style="display: inline;" onclick="javascript:SIMPALED.Editor.daka();this.style.display='none'"><div class="OwO-logo"><i class="fontello-pencil"></i><span class="OwOlogotext">打卡</span></div></div><div class="OwO" title="赞" style="display: inline;" onclick="javascript:SIMPALED.Editor.zan();this.style.display='none'"><div class="OwO-logo"><i class="glyphicon glyphicon-thumbs-up"></i><span class="OwOlogotext"></span></div></div><div class="OwO" title="踩" style="display: inline;" onclick="javascript:SIMPALED.Editor.cai();this.style.display='none'"><div class="OwO-logo"><i class="glyphicon glyphicon-thumbs-down"></i><span class="OwOlogotext"></span></div></div><div class="secret_comment" id="secret_comment" data-toggle="tooltip"data-original-title="<?php _me("开启该功能,您的评论仅作者和评论双方可见") ?>"><label class="secret_comment_label control-label"><?php _me("私密评论") ?></label><div class="secret_comment_check"><label class="i-switch i-switch-sm bg-dark m-b-ss m-r"><input type="checkbox" id="secret_comment_checkbox"><i></i></label></div></div></div>
3.在后台–>设置外观–>开发者设置–>自定义CSS加入以下代码:
.secret_comment {top: 5px;
}
.OwO.OwO-open .OwO-body {display:table
}
11、文本框打字机特效
复制下方代码添加至后台主题设置 - 开发者设置 - 自定义输出body 尾部的HTML代码 即可
<!--文本框打字机特效-->
<script type="text/javascript" src="https://lioeo.cn/usr/commentTyping.js"></script>
12、自定义鼠标样式
在这里以handsome主题为例:外观——主题设置——开发设置——自定义css。
插入以下代码:
body {cursor:url('http://like.gmkh.top/css/光标/S1.cur'), auto;
}
select, input, textarea, a, button {cursor:url('http://like.gmkh.top/css/光标/S2.cur'), auto;
}
input[disabled], select[disabled], textarea[disabled], input[readonly], select[readonly] {cursor:url('http://like.gmkh.top/css/光标/S1.cur'), auto;
}
13、Typecho悬挂猫咪置顶插件
Github项目&&Download
使用方法
下载插件解压 GoTop-master.zip重命名文件夹为GoTop上传至usr/plugins目录登录后台启用即可
更新日志
1.0.0 项目完成1.1.0 修复打开站点默认下拉的问题1.2.0 增加动态效果
基于handsome主题的一些美化修改相关推荐
- handsome主题美化(二)- 底部页脚版权美化
原文链接 1.将以下添加至自定义CSS中 /*底部页脚*/ .github-badge {display: inline-block;border-radius: 4px;text-shadow: n ...
- 【网站 seo 排名优化】typecho Handsome 主题高排名权重优化方案
前言 前一篇优化文章主要是完成了对于 typecho 各个方面的美化与简单优化,如下: 构造你独一无二的博客美化:typecho joe主题优化日志 而现在博主采用的是 Handsome 主题,相比较 ...
- 【机器学习】基于LDA主题模型的人脸识别专利分析
作者 | Soren Gran 编译 | VK 来源 | Towards Data Science 介绍 作为一名数据科学家,文本数据提出了一个独特的挑战:虽然金融.年龄和温度数据可以立即被注入线性回 ...
- WordPress主题 Vieu主题V4.5无授权无限制版 基于Dux主题二次开发 完美运行
模板简介: WordPress主题vieu基于Dux主题二次开发!的一款专业打造轻量级个人企业风格博客主题!专注于前端开发,全站响应式布局自适应模板.适用范围:wordpress主题.WordPres ...
- lda主题模型python实现篇_基于LDA主题模型的短文本分类
VSM(向量空间模型)是信息检索领域最为经典的分析模型之一,采用VSM对短文本进行建模,即将每一篇短文本表示为向量的形式,用TF-TDF表示向量的值.给出一些符号定义:短文本集SD= {sd1,sd2 ...
- Handsome主题添加Sticker-Heo表情包
本文最早发布于我的个人博客, https://szraz.cn/214.html Sticker-Heo表情包 Sticker-Heo表情包是张洪Heo创作的通用基础表情 表情预览: 充满了滑稽的形象 ...
- 计算机三级数据库数据仓库与数据挖掘(二)、数据仓库、面向主题、不可直接修改、批量访问、数据的粒度级设计、决策支持、元数据、封锁粒度、维护策略、实时维护、延时维护、快照维护、
14.在具有数据仓库的企业数据环境中,数据仓库数据一般都具有许多特点,下列都属于其特点的是 A.面向主题.不可直接修改.批量访问 B.面向主题.可直接修改.性能要求较为宽松 C.集成的.可直接修改.批 ...
- RiPro主题高端美化设计素材软件下载站子主题
主题简介 此美化包无授权无暗链,无需修改原主题代码,使用本美化包前请先下载最新ripro主题,本子主题仅支持RiPro8.0以上版本,建议使用官方正版主题. 更新记录 美化网站整站主色调颜色,优化 ...
- open wrt 跟换主题_Openwrt编译进阶-修改密码、路由连接数、时区及主题
默认中文,添加并默认主题 修改feeds/luci/libs/web/root/etc/config 1 option lang auto 改为 1 option lang zh_cn 并添加 1 2 ...
- 小米4硬改教程_小米手环3美化/修改资源包教程(含加入二维码教程)
小米手环3美化/修改资源包教程(含加入二维码教程) 注意:本教程侧重于讲刷资源包res,不过多的进行刷固件的讲解(并且不建议刷固件,容易砖,一般修改res已经可以达到你预期的效果了). 1.2更新 温 ...
最新文章
- include与jsp:include区别【转载】
- 划分微型计算机的标志是,划分微型计算机的标志为
- 巧用FTP命令进行文件传输
- 进程间共享内存(信号量实现同步)
- htmlparser解析网站时服务器返回的文件编码和页面编码不一致问题
- 亚马逊:区块链模块化,造币流水线化
- hibernate mysql id 自增长 注解_hibernate Mysql 自增长 注解配置,表无关联的注解方式关联查询...
- JavaScript实现squareRoot平方根算法(附完整源码)
- layui外部引入_javascript 怎么去引用layui里面的方法
- 计算机网络考试卷2014B答案,计算机网络考试卷2014B
- Linux端BaiduPCS-Go使用方法
- python之MRO和垃圾回收机制
- js opener 的使用
- mybatis的mysql参数传递_Mybatis参数传递及返回类型
- Ubuntu小技巧13--grep命令详解
- brctl: command not found
- 人人开源需要的问题与解决方案(一)——公网访问、内网穿透
- 5wpa_supplicant程序 --详解
- MIC - 最大信息系数
- 编码:隐匿在计算机软硬件背后的语言(2)--二进制
热门文章
- Windows驱动的加载顺序
- java workbook.close_找不到符号Workbook.close()
- 儿童猜词游戏图片_趣味看图猜词
- TLF 使用详解!!
- 对话微软大中华区CEO梁念坚:WP7为云而生
- odi12配置mysql_Oracle Data Integrator 12c 安装(ODI安装)
- 如何关闭/屏蔽百度搜索结果的置顶广告?(无耻的百度关了又自己开启)
- C++实践课作业-----三国游戏开发
- 怎样用计算机制作思维导图,思维导图怎样画?分享电脑绘制思维导图方法
- 南邮 OJ 2029 节奏大师