网站主题界面功能优化！

给大家介绍一些网站优化方法，可适用于mkBlog主题等WP主题，大家可以借鉴思路，耐心折腾。

一、代码高亮

mkBlog主题自带白色仿Mac的样式

个人还是喜欢黑色背景的

/*浏览器蓝色滚动条样式(不适用Firefox)*/
::-webkit-scrollbar {width: 8px;height: 8px;}
::-webkit-scrollbar-track {background-color: rgba(73,177,245,.2);border-radius: 2em;}
::-webkit-scrollbar-thumb {background-color: #49b1f5;background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.4) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.4) 75%,transparent 75%,transparent);border-radius: 2em;}
::-webkit-scrollbar-corner {background-color: transparent;}
::-moz-selection {color: #fff;background-color: #49b1f5;}

实现方式：关闭主题自带的代码高亮

安装一个插件Pure Highlightjs(2016年的，据说不支持行号)

原项目地址：https://github.com/icodechef/Pure-Highlightjs/

现分享网友的优化版：

选择Coy即可实现仿Mac暗色样式

缺点：受残留样式影响，部分字符显黑色，与背景重叠。

解决方法：添加样式

.entry-content code {color:#E6DB74;}

此外无主题自带的运行功能。

二、修改悬浮按钮

mkBlog原版只有三个按钮：后台，界面控制，回顶部

笔者这里添加了4个按钮：去评论，公众号，QQ群，小程序

这里讲解一下去评论和悬浮图片实现方法

1、去评论

<div class="corner-btn-group">这里是按钮区</div>

按钮区去评论按钮（非首页显示）

<? php if (!is_home()) : ?>
    <a id="theme-comt" title="留言" class="comt corner-btn">
        <i class="fa fa-commenting" aria-hidden="true"></i>
    </a>
<? php endif; ?>

添加移动到评论区的过渡动画

<script type="text/javascript">
  jQuery(document).ready(function($){
    $('#theme-comt').click(function(){$('html,body').animate({scrollTop:$('#comments').offset().top}, 800);});    
  });
</script>

2、悬浮显示图片

添加小程序按钮

<a id="theme-mnpg" title="小程序" class="mnpg corner-btn">
        <i class="fa fa-link" aria-hidden="true"></i>
</a>
<img class="pg_img" src="https://www.jishusongshu.com/images/pg_img.png" >

添加图片样式

.pg_img{position:absolute;bottom:80px;left:-183px;display:none;max-width: 300px;}

添加图片悬浮淡入（出）动画

<script type="text/javascript"> 
  var $mnpg = $('.corner-btn-group #theme-mnpg');
  var pgImg = $('.pg_img');  
  $mnpg.hover(function () {
    pgImg.fadeIn();
  }, function(){
     pgImg.fadeOut();
  });
</script>

3、修改图标颜色

.corner-btn{background-color:#0084FF;border-color:#0084FF;}
.corner-btn .fa{color:#fff;}

三、底部文章推荐条

原版概览(作者为张戈)

代码版本：https://zhang.ge/4628.html

插件版本：https://zhang.ge/4718.html

插件集成了友情提示和界面随音乐抖动功能

笔者一开始是使用插件版的，发现手机端登录弹窗不显示。

据说是重复调用JS导致冲突，且手机端不显示底部推荐条。

于是直接用代码版本，手机端也可以显示，顺便将字体缩小。

@media screen and (max-width:750px){
    .bulletin a{float:left;font-size: 10px;}
    .bulletin{height:20px;color:#fff;margin:0 0 0 5px;background:url(https://www.jishusongshu.com/images/bulletin.gif) no-repeat;min-height:20px;overflow:hidden}
    .bulletin li{height:23px;padding-left:25px}
}

四、其他优化

优化手机端显示效果

1、缩小字体和图标

主要是标题和概述的font-weight、font-size

@media screen and (max-width:750px){
    .corner-btn-group{right:0.5rem;bottom:1.8rem}
    #scroll-to-top.corner-btn{line-height:2.8em}
    .corner-btn{width:2.8em;height:2.8em;}
    .post-item-list .entry-title {
    line-height: 1.4;
    margin: 0;
    font-weight: 350;
    font-size: 1em;}
    .post-item-list .archive-content {
    font-size: .75em;
    height: 6em;
    margin: .8em 0;
    line-height: 2em;}
}

2、(置顶)字体标签背景(蓝)

span.inline-tag {
    display: inline;
    padding: .2em .6em .3em;
    font-size: 90%;
    font-weight: 400;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .1rem;
    border-radius: 6px;
    background-color: var(--Color);
}
p.blue,span.blue {
    --Color: rgb(0, 132, 255);
    --ColorA: rgba(3, 169, 244, 0.2);
}

使用方法：index.php特定位置替换

<span title="首页置顶" class="inline-tag blue">置顶</span>

附上其他颜色(红绿黄灰)

p.red,span.red {
--Color: rgb(233, 30, 100);
--ColorA: rgba(233, 30, 100, 0.2);
}
p.green,span.green {
--Color: rgb(139, 195, 74);
--ColorA: rgba(139, 195, 74, 0.2);
}
p.yellow,span.yellow {
    --Color: rgb(255, 193, 7);
    --ColorA: rgba(255, 193, 7, 0.2);
}
p.grey,span.grey {
    --Color: rgb(76, 76, 76);
    --ColorA: rgba(76, 76, 76, 0.2);
}