1、首页文章图片获取焦点放大

  • 将以下代码添加至后台主题设置自定义CSS，放大的时间和大小自行修改数值，本站用的是1哦
/*首页文章图片获取焦点放大1*/
.item-thumb{
    cursor: pointer;  
    transition: all 0.6s;  
}

.item-thumb:hover{
      transform: scale(1.05);  
}

.item-thumb-small{
    cursor: pointer;  
    transition: all 0.6s;
}

.item-thumb-small:hover{
    transform: scale(1.05);
}
/*首页文章图片获取焦点放大2*/
.index-post-img {
    overflow: hidden;
}

.item-thumb {
    transition: all 0.3s;
}

.item-thumb:hover {
    transform: scale(1.1)
}

2、鼠标经过头像转动并放大

  • 将以下代码添加至后台主题设置自定义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;
    }
}

3、Mac风格代码高亮

插件最新更新时间：2019/11/18
handsome.min.css更新时间：2019/12/06
插件下载：

  • 下载本插件，解压到usr/plugins/目录中
  • 进入网站后台-控制台-插件-激活插件（请勿与其它同类插件同时启用，以免互相影响）
  • 设置：选择主题风格，是否显示行号等，默认开启
  • 修改（替换）/usr/themes/handsome/assets/css/下的handsome.min.css文件
  • 由于Handsome主题最新加入授权，旧版本必须更新至最新版，所以这里就不提供旧版

Handsome 6.0.0 版本：

  • 如果你的网站有开启Pjax（Handsome主题默认开启），把以下代码添加到回调函数的地方，以Handsome为例，打开后台设置PJAX回调函数
if (typeof Prism !== 'undefined') {
var pres = document.getElementsByTagName('pre');
                for (var i = 0; i < pres.length; i++){
                    if (pres[i].getElementsByTagName('code').length > 0)
                        pres[i].className  = 'line-numbers';}
Prism.highlightAll(true,null);}
  • 用法（删除下方代码中的\）
\```php(语言类型选填)
<?php echo 'Hello Alvin!'; ?>
\```

4、底部页脚标签样式

底部页脚标签样式

  • 将以下代码添加至后台主题设置自定义CSS
/*底部页脚*/
.github-badge {
  display: inline-block;
  border-radius: 4px;
  text-shadow: none;
  font-size: 12px;
  color: #fff;
  line-height: 15px;
  background-color: #abbac3;
  margin-bottom: 5px
}

.github-badge .badge-subject {
  display: inline-block;
  background-color: #4d4d4d;
  padding: 4px 4px 4px 6px;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px
}

.github-badge .badge-value {
  display: inline-block;
  padding: 4px 6px 4px 4px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px
}

.github-badge .bg-blue {
  background-color: #007ec6
}

.github-badge .bg-orange {
  background-color: #ffa500
}

.github-badge .bg-red {
  background-color: #f00
}

.github-badge .bg-green {
  background-color: #3bca6e
}

.github-badge .bg-purple {
  background-color: #ab34e9
}
  • 将以下代码添加至后台主题设置博客底部左侧信息，信息修改成自己的
<div class="github-badge">
<a href="./" title="©2019&nbsp;Alvin">
<span class="badge-subject">Copyright</span><span class="badge-value bg-blue">©2019&nbsp;Alvin</span>
</a>
</div>
&nbsp;|&nbsp;
<div class="github-badge">
<a href="http://www.miitbeian.gov.cn/" target="_blank" title="粤ICP备 18135867号" style="cursor: url(&quot;/usr/plugins/HoerMouse/static/image/dew/link.cur&quot;), pointer;">
<span class="badge-subject">粤ICP备</span><span class="badge-value bg-green">18135867号</span>
</a>
</div>
  • 将以下代码添加至后台主题设置博客底部右侧信息
<div class="github-badge">
<a href="http://www.typecho.org" target="_blank" title="由 Typecho 强力驱动" style="cursor: url(&quot;/usr/plugins/HoerMouse/static/image/dew/link.cur&quot;), pointer;">
<span class="badge-subject">Powered</span><span class="badge-value bg-blue">Typecho</span>
</a>
</div>
&nbsp;|&nbsp; 
<div class="github-badge">
<a href="https://www.ihewro.com/archives/489/" target="_blank" title="站点使用 handsome 主题，作者：友人C" style="cursor: url(&quot;/usr/plugins/HoerMouse/static/image/dew/link.cur&quot;), pointer;">
<span class="badge-subject">Theme</span><span class="badge-value bg-orange">Handsome</span>
</a>
</div>
  • 添加完成后，需要去handsome\component\footer.php删除原有声明代码，以下为删除完后的效果（大概1~12行）
<?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
<?php Content::outputCommentJS($this, $this->security); ?>
</div><!-- /content -->
  <footer id="footer" class="app-footer" role="footer">
    <div class="wrapper bg-light">
      <span class="pull-right hidden-xs text-ellipsis">
      <?php $this->options->BottomInfo(); ?>
      
      </span>
        <span class="text-ellipsis"><?php
            $this->options->BottomleftInfo(); ?></span>
    </div>
      <!--可以去除主题版权信息，最好保留版权信息或者添加主题信息到友链，谢谢你的理解-->

5、给网站添加crisp在线客服插件

crisp在线客服插件

  • 注册crisp账户并添加网站：https://app.crisp.chat/initiate/signup/
  • 注册完成后，点击设置-网站设置-显示整合-HTML，复制代码添加至后台主题设置自定义输出head 头部的HTML代码即可

6、贴吧滑稽表情包

贴吧表情滑稽表情包

  • 复制owo.json到handsome/usr/
  • 复制paopao文件夹到handsome/usr/img/emotion/
  • 清除一下游览器缓存，然后刷新即可

XcnteOWO表情包：

7、炫彩鼠标插件

炫彩鼠标插件

  • 下载本插件，解压放到usr/plugins/目录中
  • 登录管理后台，激活并设置插件

HoerMouse：

8、评论获取用户信息插件

评论获取用户信息插件

  • 下载本插件，解压到usr/plugins/目录中
  • 进入网站后台-控制台-插件-激活插件
  • 此插件只适用于Handsome主题，未对其它主题优化！！！
  • 修改component/comments.php文件，大概第60~80行处添加代码
<?php UserAgent_Plugin::get_useragent($comments->agent,$comments->ip); ?>

修改前

<span class="comment-author vcard">
    <b class="fn"><?php echo $author; ?></b><?php echo $Identity; ?>
</span>

修改后

<span class="comment-author vcard">
    <b class="fn"><?php echo $author; ?></b><?php echo $Identity; ?><?php UserAgent_Plugin::get_useragent($comments->agent,$comments->ip); ?>
</span>

Typecho开启CDN后，可能无法获取访客真实IP，只能取得CDN节点IP，为此可以在网站的根目录的config.inc.php插入下面的代码：

/** 防止CDN造成无法获取客户真实IP地址 */
if(isset($_SERVER['HTTP_X_FORWARDED_FOR'])) 
{
    $list = explode(',',$_SERVER['HTTP_X_FORWARDED_FOR']);
    $_SERVER['REMOTE_ADDR'] = $list[0];
}

UserAgent：

9、网站响应耗时

响应耗时

  • 将以下代码放到handsome/functions.php中，可以放在最后面
/**
 * 加载时间
 * 
 */
    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;
}
  • 然后在主题目录下打开component文件夹，编辑里面的sidebar.php文件，找到博客信息相关的代码，在合适的位置添加以下代码即可
<li class="list-group-item"> <i class="glyphicon glyphicon-flash text-muted"></i> <span class="badge
           pull-right"><?php echo timer_stop();?></span><?php _me("响应耗时") ?></li>

10、顶部导航天气

顶部天气

  • 将以下代码复制到component/headnav.php搜索提示下方即可，大概86行左右
<!--天气开始-->
    <div id="tp-weather-widget" class="navbar-form navbar-form-sm navbar-left shift"></div>
<script>(function(T,h,i,n,k,P,a,g,e){g=function(){P=h.createElement(i);a=h.getElementsByTagName(i)[0];P.src=k;P.charset="utf-8";P.async=1;a.parentNode.insertBefore(P,a)};T["ThinkPageWeatherWidgetObject"]=n;T[n]||(T[n]=function(){(T[n].q=T[n].q||[]).push(arguments)});T[n].l=+new Date();if(T.attachEvent){T.attachEvent("onload",g)}else{T.addEventListener("load",g,false)}}(window,document,"script","tpwidget","//widget.seniverse.com/widget/chameleon.js"))</script>
<script>tpwidget("init", {
    "flavor": "slim",
    "location": "WX4FBXXFKE4F",
    "geolocation": "enabled",
    "language": "auto",
    "unit": "c",
    "theme": "chameleon",
    "container": "tp-weather-widget",
    "bubble": "enabled",
    "alarmType": "badge",
    "color": "#ffffff",
    "uid": "xxxxxxxx",
    "hash": "xxxxxxxx"
});
tpwidget("show");</script>
<!--天气结束-->

11、魔性动态标题

魔性动态标题

  • 复制下方代码添加至后台主题设置自定义输出head 头部的HTML代码即可
<!--动态标题-->
<script>document.addEventListener('visibilitychange',function(){if(document.visibilityState=='hidden'){normal_title=document.title;document.title='(つェ⊂)我藏好了哦 - Alvin Blog';}else{document.title=normal_title;}});</script>

12、文本框打字机特效

打字机特效

  • 复制下方代码添加至后台主题设置自定义输出body 尾部的HTML代码即可
<!--文本框打字机特效-->
<script type="text/javascript" src="https://www.mgxfd.club/usr/themes/handsome/assets/js/commentTyping.js"></script>

13、博主介绍的闪字特效

博主介绍的闪字特效

  • 复制下方代码添加至后台主题设置博主的介绍即可
  • 介绍文字请在代码中修改
<!--博主介绍的闪字特效-->
<span class="text-muted text-xs block"><div id="chakhsu"></div> <script> var chakhsu = function (r) {function t() {return b[Math.floor(Math.random() * b.length)]} function e() {return String.fromCharCode(94 * Math.random() + 33)} function n(r) {for (var n = document.createDocumentFragment(), i = 0; r > i; i++) { var l = document.createElement("span"); l.textContent = e(), l.style.color = t(), n.appendChild(l) } return n}function i() {var t = o[c.skillI]; c.step ? c.step-- : (c.step = g, c.prefixP < l.length ? (c.prefixP >= 0 && (c.text += l[c.prefixP]), c.prefixP++) : "forward" === c.direction ? c.skillP < t.length ? (c.text += t[c.skillP], c.skillP++) : c.delay ? c.delay-- : (c.direction = "backward", c.delay = a) : c.skillP > 0 ? (c.text = c.text.slice(0, -1), c.skillP--) : (c.skillI = (c.skillI + 1) % o.length, c.direction = "forward")), r.textContent = c.text, r.appendChild(n(c.prefixP < l.length ? Math.min(s, s + c.prefixP) : Math.min(s, t.length - c.skillP))), setTimeout(i, d) } /*以下内容自定义修改*/ var l = "", o = ["Keep Fighting" ].map(function (r) {return r + ""}), a = 2, g = 1, s = 5, d = 75, b = ["rgb(110,64,170)", "rgb(150,61,179)", "rgb(191,60,175)", "rgb(228,65,157)", "rgb(254,75,131)", "rgb(255,94,99)", "rgb(255,120,71)", "rgb(251,150,51)", "rgb(226,183,47)", "rgb(198,214,60)", "rgb(175,240,91)", "rgb(127,246,88)", "rgb(82,246,103)", "rgb(48,239,130)", "rgb(29,223,163)", "rgb(26,199,194)", "rgb(35,171,216)", "rgb(54,140,225)", "rgb(76,110,219)", "rgb(96,84,200)"], c = {text: "", prefixP: -s, skillI: 0, skillP: 0, direction: "forward", delay: a, step: g}; i() }; chakhsu(document.getElementById('chakhsu')); </script> </span> </span>

14、复制弹框版权提醒

复制弹框版权提醒

  • 首先将下方代码复制添加至后台主题设置自定义输出head 头部的HTML代码
<!--复制弹框JS-->
<script src="https://www.mgxfd.club/layer/layer.js"></script>
  • 最后复制下方代码添加至后台主题设置自定义 JavaScript即可
<!--复制弹框-->
document.body.oncopy = function() {layer.msg('复制成功，若要转载请务必保留本文链接！');};

15、评论邮件提醒功能

评论邮件提醒

  • 下载本插件，解压到usr/plugins/目录中
  • 进入网站后台-控制台-插件-激活插件

Smtp服务器地址：smtp.qq.com
Smtp端口：465
Smtp用户：你的邮箱账户
Smtp密码：开启Smtp时获取的授权码

Comment2Mail：

16、文章底部赞赏图标跳动

  • 将以下代码添加至后台主题设置自定义CSS
/*赞赏图标跳动*/
.btn-pay {
    animation: star 0.5s ease-in-out infinite alternate;
}

@keyframes star {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.1);
    }
}

17、给文章顶部添加判断百度是否收录

  • 将以下代码添加至handsome/functions.php
/**
* 提示文章百度是否收录
*
*/
function baidu_record() {
$url='http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];

if(checkBaidu($url)==1)
{echo "百度已收录";
}
else
{echo "<a style=\"color:red;\" rel=\"external nofollow\" title=\"点击提交收录！\" target=\"_blank\" href=\"http://zhanzhang.baidu.com/sitesubmit/index?sitename=$url\">百度未收录</a>";}
}
function checkBaidu($url) {
$url = 'http://www.baidu.com/s?wd=' . urlencode($url);
$curl = curl_init();
curl_setopt($curl, CURLOPT_URL, $url);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
$rs = curl_exec($curl);
curl_close($curl);
if (!strpos($rs, '没有找到')) { //没有找到说明已被百度收录
return 1;
} else {
return -1;
}
}
  • 将以下代码添加至handsome/post.php大约80行左右分类下方即可
<!--百度收录-->
<li><i class="glyphicon glyphicon-globe"></i>&nbsp<?php echo baidu_record() ?></li>
Alvin Blog‘s’
Last modification：December 26th, 2019 at 01:01 pm
© 允许付费转载
如果觉得我的文章对你有用，请随意赞赏