1.彩色标签云设置
开发者设置->自定义JS
<!--彩色标签云-->
let tags = document.querySelectorAll("#tag_cloud-2 a");
let infos = document.querySelectorAll(".badge");
let colorArr = ["#428BCA", "#AEDCAE", "#ECA9A7", "#DA99FF", "#FFB380", "#D9B999"];
tags.forEach(tag => {
tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
tag.style.backgroundColor = tagsColor;
});
infos.forEach(info => {
infosColor = colorArr[Math.floor(Math.random() * colorArr.length)];
info.style.backgroundColor = infosColor;
});
2.复制提醒
(1)开发者设置->自定义JS
<!--转载提醒-->
document.body.oncopy=function(){layer.msg('复制成功,若要转载请务必保留原文链接!');};
(2)开发者设置->自定义输出head 头部的HTML代码
<!--转载提醒-->
<script src="//lib.baomitu.com/layer/3.1.1/layer.js"></script>
3.博客信息添加访客总数和响应耗时
(1)handsome主题的文件夹中的functions.php的最底下添加:
/*加载时间 @return bool*/
function timer_start() {
global $timestart;
$mtime = explode( ' ', microtime() );
$timestart = $mtime[1] + $mtime[0];
return true;
}
timer_start();
function timer_stop( $display = 0, $precision = 3 ) {
global $timestart, $timeend;
$mtime = explode( ' ', microtime() );
$timeend = $mtime[1] + $mtime[0];
$timetotal = number_format( $timeend - $timestart, $precision );
$r = $timetotal < 1 ? $timetotal * 1000 . " ms" : $timetotal . " s";
if ( $display ) {
echo $r;
}
return $r;
}
/*总访问量*/
function theAllViews(){
$db = Typecho_Db::get();
$row = $db->fetchAll('SELECT SUM(VIEWS) FROM `typecho_contents`');
echo number_format($row[0]['SUM(VIEWS)']);
}
(2)handsome主题的文件夹中的/component/sidebar.php中找到博客信息的代码并添加(约为第99行):
(约为第99行):
<li class="list-group-item text-second"><span class="blog-info-icons"> <i data-feather="eye"></i></span> <span class="badge pull-right"><?php echo theAllViews();?></span><?php _me("访客总数") ?></li>
<li class="list-group-item text-second"><span class="blog-info-icons"> <i data-feather="clock"></i></span> <span class="badge pull-right"><?php echo timer_stop();?></span><?php _me("响应耗时") ?></li>
4.头像呼吸光环和鼠标悬停旋转放大
自定义 CSS
/*头像呼吸光环和鼠标悬停旋转放大*/
.img-full {
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 #22ACD6;
}
50% {
box-shadow: 0 0 16px #22ACD6;
}
100% {
box-shadow: 0 0 4px #22ACD6;
}
}
5.首页文章标题居中
自定义 CSS
/*首页文章标题居中*/
.panel:not(article) h2{
text-align: center;
}
.panel-small:not(article) h2{
text-align: center;
}
.panel-picture:not(article) h3{
text-align: center;
}
.post-item-foot-icon:not(article){
text-align: center;
}
6.文章阴影及头图放大特效
自定义 CSS
/*文章阴影及头图放大特效,修正放大后头图的版权位置*/
.blog-post .panel {
transition: all 0.3s;
box-shadow: 0 2px 5px rgba(73, 90, 47, 0.47);
}
.blog-post .panel:hover {
transform: translateY(-8px);
box-shadow: 0 4px 10px rgba(73, 90, 47, 0.47);
}
.blog-post .panel-small {
transition: all 0.3s;
box-shadow: 0 2px 5px rgba(73, 90, 47, 0.47);
}
.blog-post .panel-small:hover {
transform: translateY(-8px);
box-shadow: 0 4px 10px rgba(73, 90, 47, 0.47);
}
.blog-post .panel-picture {
transition: all 0.3s;
box-shadow: 0 2px 5px rgba(73, 90, 47, 0.47);
}
.blog-post .panel-picture:hover {
transform: translateY(-8px);
box-shadow: 0 4px 10px rgba(73, 90, 47, 0.47);
}
.index-post-img {
overflow: hidden;
}
.index-post-img-small {
overflow: hidden;
}
.item-thumb {
transition: all 0.3s;
}
.item-thumb:hover {
transform: scale(1.1)
}
.item-thumb-small {
transition: all 0.3s;
}
.item-thumb-small:hover {
transform: scale(1.1)
}
.item-thumb .img_copyright{
transition: all 0.3s;
}
.item-thumb:hover .img_copyright{
transform: translateX(-24px);
}
.entry-thumbnail {
overflow: hidden;
}
.post-content img {
border-radius: 10px;
transition: 0.5s;
}
.post-content img:hover {
transform: scale(1.1);
}
7.盒子四周、上导航栏、文章小框、文章图片、引用文章及博客信息阴影调整
自定义 CSS
/*盒子四周、上导航栏、文章中的小框、文章图片及博客信息阴影调整*/
.app.container {
box-shadow: 0 0 30px rgba(73, 90, 47, 0.47);
}
.navbar{
box-shadow: 0 1px 10px rgba(73, 90, 47, 0.47);
}
.breadcrumb{
transition: all 0.3s;
box-shadow: 0 2px 4px rgba(73, 90, 47, 0.47);
}
.breadcrumb:hover {
transform: translateY(-6px);
box-shadow: 0 6px 8px rgba(73, 90, 47, 0.47);
}
.wrapper-lg img {
transition: all 0.3s;
box-shadow: 0 3px 5px rgba(73, 90, 47, 0.47);
}
.wrapper-lg img:hover {
transform: translateY(-8px);
box-shadow: 0 6px 10px rgba(73, 90, 47, 0.47);
}
.preview{
box-shadow: 0 2px 4px rgba(73, 90, 47, 0.47);
}
#blog_info .list-group{
transition: all 0.3s;
}
#blog_info .list-group:hover {
transform: translateY(-4px);
box-shadow: 0 4px 6px rgba(73, 90, 47, 0.47);
}
8.bilibili视频挂载
自定义 CSS
/*bilibili视频挂载*/
.bilibili{
position: relative;
width: 100%;
height: 0; /*高度设置这里无效,设置为0,用padding撑开div*/
padding-bottom: 75%; /*68%到80%都可以*/
}
.bilibili iframe {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
9.浏览人数统计
全局右侧边栏广告位
<a href="http://s01.flagcounter.com/more/yq3"><img src="https://s01.flagcounter.com/count2/yq3/bg_F9F9F9/txt_222222/border_F9F9F9/columns_2/maxflags_20/viewers_0/labels_1/pageviews_0/flags_0/percent_0/" alt="Flag Counter" border="0"></a>