Sanakey

本站handsome主题魔改折腾记录
暂无文字描述
扫描右侧二维码阅读全文
30
2019/10

本站handsome主题魔改折腾记录

本文主要记录了本博客的改造过程和过程中使用的插件,如果你和我一样喜欢折腾,并且觉得本博客或多或少有你喜欢的地方,不妨看看本文

本主题魔改需要替换文件,并且会修改原主题代码,请要魔改的小伙伴备份好自己的文件!

主题

Typecho

本博客基于typecho搭建,如果你只是一个萌新,连服务器都没有,可以看看下面这篇文章

handsome

本博客使用的主题是handsome


接下来的改造过程主要基于handsome,部分改造过程只要你使用的是typecho,理论上来说也能用。

改造

基于神代綺凜大佬的handsome改造

本博客主要视觉观感就是基于神代綺凜大佬的handsome改造文件,这里不再赘述了,具体请查看这篇文章

首页文章摘要添加翻转动画

随机播放音乐

在文件handsome/libs/Get.php的186行附近添加一行代码shuffle($info);即可

case 'collect':
    $datas = $api->format(true)->playlist($id);
    $datas = json_decode($datas,true);
    foreach ( $datas as $keys => $data){
        $cover = json_decode($api->format(true)->pic($data['pic_id']),true)['url'];
        $info[$keys] = array(
            'name' => $data['name'],
            'url' => '',
            'song_id' => $data['id'],
            'cover' => $cover,
            'author' => $data['artist'][0]
        );
    }
    shuffle($info); //添加这行
    break;

Pixiv每日排行榜Top50


handsome食用起来很简单,打开handsome的外观设置,找到开发者设置->全局右侧边栏广告位,填入以下代码就行了。

<p>Pixiv每日排行榜Top50</p>
<iframe src="https://cloud.mokeyjay.com/pixiv" frameborder="0"  style="width:240px; height:380px;"></iframe>

美中不足的是还会有烦人的广告二字,如果想要去掉,需要修改主题原文件。

所有涉及到主题原文件的修改,请记得备份原文件

打开handsome文件夹下的/component/sidebar.php,注释掉这行

<h3 class="widget-title m-t-none text-md"><?php _me("广告") ?></h3>

美化代码块

如果你觉得刚才的代码块好看或好用,不妨试试下面的插件

随机图片服务

如果你看惯了千篇一律的博客背景图,想要点新鲜感,可以试试下面的插件。
按文档说明配置好后,每次刷新都是一张随机的图片

文章的随机头图可以使用handsome自带的功能,如果你不喜欢handsome自带的头图,可以打开/handsome/usr/img/sj文件夹,使用自己的图片替换掉原图即可。记得严格按照数字命名。

文章末尾版权信息

如果你想要本文末尾同款版权信息声明,可以试试下面这款插件。

魔改网站底部

将以下代码添加至后台主题设置自定义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="©2016-2019&nbsp;">
        <span class="badge-subject">Copyright</span><span class="badge-value bg-blue">©2016-2019&nbsp;</span>
    </a>
</div>
&nbsp;|&nbsp;
<div class="github-badge">
    <a href="./" title="Sanakey">
    <span class="badge-subject">By</span><span class="badge-value bg-green">Sanakey</span>
    </a>
</div>

将以下代码添加至后台主题设置博客底部右侧信息:

<div class="github-badge">
    <a href="http://www.typecho.org" target="_blank" title="由 Typecho 强力驱动" >
        <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" >
        <span class="badge-subject">Theme</span><span class="badge-value bg-orange">Handsome</span>
    </a>
</div>
&nbsp;|&nbsp; 
<div class="github-badge">
    <a href="https://moe.best/" target="_blank" title="handsome主题由JindaiKirin魔改">
        <span class="badge-subject">Modified</span><span class="badge-value bg-red">JindaiKirin</span>
    </a>
</div>

添加完成后,需要去handsome/component/footer.php删除原有底部代码,需要删除的代码如下:

<?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 b-t bg-light">
      <span class="pull-right hidden-xs text-ellipsis">
      <?php $this->options->BottomInfo(); ?>
      <!-- Powered by <a target="blank" href="http://www.typecho.org">Typecho</a>&nbsp;|&nbsp;Theme by <a target="blank" href="https://www.ihewro.com/archives/489/">handsome</a> 删除本行-->
      </span>
        <span class="text-ellipsis">
        <!-- &copy;&nbsp;<?php echo date("Y");?> Copyright&nbsp; 删除本行-->
            <?php $this->options->BottomleftInfo(); ?></span>
    </div>

炫彩鼠标插件

彩色标签云

打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义JavaScript即可:

<!--彩色标签云-->
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回调函数中。

评论附带设备信息

新评论邮件通知


顺便在这里分享一个我在其他大佬基础上美化过的版本(见下图,头图是随机的),提供给有需求的人。下载后替换掉原版同名文件,并把里面的博客网址等个人信息改成自己的即可,记得备份。

美化版截图,头图是随机的

贴吧滑稽表情包

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

响应耗时与总访问量

将以下代码存放到主题的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)']);
}

然后修改component/sidebar.php这个文件,搜索最后活动,在下面加上如下代码:

           <li class="list-group-item"> <i class="glyphicon glyphicon-refresh text-muted"></i> <span class="badge
           pull-right"><?php echo Utils::getLatestTime($this); ?></span><?php _me("最后活动") ?></li>
            /*下面这几行是要添加的代码*/
           <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>
           <li class="list-group-item"> <i class="glyphicon glyphicon-user text-muted"></i> <span class="badge
           pull-right"><?php echo theAllViews();?></span><?php _me("访客总数") ?></li>
       </ul>

文本框打字特效

复制下方代码添加至后台主题设置自定义 JavaScript即可

//文本框打字机特效
(function webpackUniversalModuleDefinition(a,b){if(typeof exports==="object"&&typeof module==="object"){module.exports=b()}else{if(typeof define==="function"&&define.amd){define([],b)}else{if(typeof exports==="object"){exports["POWERMODE"]=b()}else{a["POWERMODE"]=b()}}}})(this,function(){return(function(a){var b={};function c(e){if(b[e]){return b[e].exports}var d=b[e]={exports:{},id:e,loaded:false};a[e].call(d.exports,d,d.exports,c);d.loaded=true;return d.exports}c.m=a;c.c=b;c.p="";return c(0)})([function(c,g,b){var d=document.createElement("canvas");d.width=window.innerWidth;d.height=window.innerHeight;d.style.cssText="position:fixed;top:0;left:0;pointer-events:none;z-index:999999";window.addEventListener("resize",function(){d.width=window.innerWidth;d.height=window.innerHeight});document.body.appendChild(d);var a=d.getContext("2d");var n=[];var j=0;var k=120;var f=k;var p=false;o.shake=true;function l(r,q){return Math.random()*(q-r)+r}function m(r){if(o.colorful){var q=l(0,360);return"hsla("+l(q-10,q+10)+", 100%, "+l(50,80)+"%, "+1+")"}else{return window.getComputedStyle(r).color}}function e(){var t=document.activeElement;var v;if(t.tagName==="TEXTAREA"||(t.tagName==="INPUT"&&t.getAttribute("type")==="text")){var u=b(1)(t,t.selectionStart);v=t.getBoundingClientRect();return{x:u.left+v.left,y:u.top+v.top,color:m(t)}}var s=window.getSelection();if(s.rangeCount){var q=s.getRangeAt(0);var r=q.startContainer;if(r.nodeType===document.TEXT_NODE){r=r.parentNode}v=q.getBoundingClientRect();return{x:v.left,y:v.top,color:m(r)}}return{x:0,y:0,color:"transparent"}}function h(q,s,r){return{x:q,y:s,alpha:1,color:r,velocity:{x:-1+Math.random()*2,y:-3.5+Math.random()*2}}}function o(){var t=e();var s=5+Math.round(Math.random()*10);while(s--){n[j]=h(t.x,t.y,t.color);j=(j+1)%500}f=k;if(!p){requestAnimationFrame(i)}if(o.shake){var r=1+2*Math.random();var q=r*(Math.random()>0.5?-1:1);var u=r*(Math.random()>0.5?-1:1);document.body.style.marginLeft=q+"px";document.body.style.marginTop=u+"px";setTimeout(function(){document.body.style.marginLeft="";document.body.style.marginTop=""},75)}}o.colorful=false;function i(){if(f>0){requestAnimationFrame(i);f--;p=true}else{p=false}a.clearRect(0,0,d.width,d.height);for(var q=0;q<n.length;++q){var r=n[q];if(r.alpha<=0.1){continue}r.velocity.y+=0.075;r.x+=r.velocity.x;r.y+=r.velocity.y;r.alpha*=0.96;a.globalAlpha=r.alpha;a.fillStyle=r.color;a.fillRect(Math.round(r.x-1.5),Math.round(r.y-1.5),3,3)}}requestAnimationFrame(i);c.exports=o},function(b,a){(function(){var d=["direction","boxSizing","width","height","overflowX","overflowY","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","borderStyle","paddingTop","paddingRight","paddingBottom","paddingLeft","fontStyle","fontVariant","fontWeight","fontStretch","fontSize","fontSizeAdjust","lineHeight","fontFamily","textAlign","textTransform","textIndent","textDecoration","letterSpacing","wordSpacing","tabSize","MozTabSize"];var e=window.mozInnerScreenX!=null;function c(k,l,o){var h=o&&o.debug||false;if(h){var i=document.querySelector("#input-textarea-caret-position-mirror-div");if(i){i.parentNode.removeChild(i)}}var f=document.createElement("div");f.id="input-textarea-caret-position-mirror-div";document.body.appendChild(f);var g=f.style;var j=window.getComputedStyle?getComputedStyle(k):k.currentStyle;g.whiteSpace="pre-wrap";if(k.nodeName!=="INPUT"){g.wordWrap="break-word"}g.position="absolute";if(!h){g.visibility="hidden"}d.forEach(function(p){g[p]=j[p]});if(e){if(k.scrollHeight>parseInt(j.height)){g.overflowY="scroll"}}else{g.overflow="hidden"}f.textContent=k.value.substring(0,l);if(k.nodeName==="INPUT"){f.textContent=f.textContent.replace(/\s/g,"\u00a0")}var n=document.createElement("span");n.textContent=k.value.substring(l)||".";f.appendChild(n);var m={top:n.offsetTop+parseInt(j["borderTopWidth"]),left:n.offsetLeft+parseInt(j["borderLeftWidth"])};if(h){n.style.backgroundColor="#aaa"}else{document.body.removeChild(f)}return m}if(typeof b!="undefined"&&typeof b.exports!="undefined"){b.exports=c}else{window.getCaretCoordinates=c}}())}])});
POWERMODE.colorful=true;POWERMODE.shake=false;document.body.addEventListener("input",POWERMODE);

博主介绍的闪字特效

  • 复制下方代码添加至后台主题设置博主的介绍即可
  • 介绍文字请在代码中修改
<!--博主介绍的闪字特效-->
<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 = ["这里是自定义修改的文本" ].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>

文章底部赞赏图标跳动

将以下代码添加至后台主题设置自定义CSS

/*赞赏图标跳动*/
.btn-pay {
    animation: star 0.5s ease-in-out infinite alternate;
}
@keyframes star {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.1);
    }
}

感言

个人博客换了很多,大学时学生价买服务器后用过WordPress,毕业后因为没有学生优惠就没续费了。后来发现了可以白嫖的Hexo + Github Pages,也折腾了许久。最近因为阿里云服务器优惠,又换成了Typecho + handsome(不得不说这款主题真是棒棒哒!~)。
现在终于差不多折腾完了。看着折腾好的博客,感觉好爽啊!~

参考



Last modification:April 13th, 2021 at 08:59 am
如果觉得我的文章对你有用,请随意赞赏

47 comments

  1. 小白 搜狗浏览器 2.X Windows 7

    博主,这个文章关闭盒子的时候怎么做到跟盒子一样的?

  2. okok Firefox 87.0 Windows 10

    博主置顶文章横排如何设置的

    1. 21 Google Chrome 89.0.4389.82 Windows 10
      @okok

      我也想弄这样的

  3. ShiroKumo Google Chrome 87.0.4280.101 Android 9

    现在响应速度的那个li的class标签改了,应该改成“list-group-item text-second”,不然不会显示透明样式。

  4. aaa Edge 87.0.664.66 Windows 10

    好文 爱你摸摸哒

    1. Sanakey Google Chrome 87.0.4280.88 Windows 10
  5. 若溪 小米 12.8.25 Android 10

    p站每日50张貌似北墙了

  6. 可汐两百斤 Firefox 80.0 Windows 10

    大佬请问一下这篇文章的部分文字标为红色,这个是什么插件,还有就是一些图片,按钮的飞入效果

    1. Sanakey Google Chrome 85.0.4183.102 Windows 10
      @可汐两百斤

      红色文字是markdown语法``,元素入场动画用的WowScroll插件,首页置顶文章就能看到。

  7. mosign Google Chrome 84.0.4147.105 Windows 10

    大佬,右边点击回到博客顶部怎么做的呢?

    1. Sanakey Google Chrome 84.0.4147.105 Windows 10
      @mosign

      我写了个插件的,本站首页就能看到。

      1. mosign Google Chrome 84.0.4147.125 Windows 10
        @Sanakey

        大佬,左侧的头像旋转怎么做到的?(☆ω☆)

        1. Sanakey Google Chrome 84.0.4147.105 Windows 10
          @mosign

          本文没涉及到的美化效果,一般都在置顶的魔改主题插件里。

          1. mosign Google Chrome 84.0.4147.125 Windows 10
            @Sanakey

            谢谢大佬,我还想问下打赏背景图,怎么换的(/ω\)

            1. mosign Google Chrome 84.0.4147.125 Windows 10
              @mosign

              不用那个插件可以改么?(/ω\)

              1. Sanakey Google Chrome 84.0.4147.105 Windows 10
                @mosign

                可以,不过建议你最好学一下简单的css;实在不想学,可以按f12开启调试模式,把html元素对应的css扒下来。

  8. ヽ 柒柒 Google Chrome 84.0.4147.89 Windows 7

    博主你好,请问你的右键复制提示是怎么弄的呀

    1. Sanakey Google Chrome 84.0.4147.89 Windows 10
      @ヽ 柒柒

      这个功能在置顶的魔改主题插件里,在js文件内可以看到,有注释。

  9. 粽子 Edge 83.0.478.61 Windows 10

    我上面字都是白的咋搞,一个字也看不清

    1. Sanakey Google Chrome 83.0.4103.116 Windows 10
      @粽子

      不知道你说的哪里的字,也许是被其他css覆盖了样式。

      1. mosign Google Chrome 84.0.4147.125 Windows 10
        @Sanakey

        我觉得他是想问字体颜色怎么换

  10. 若曦 小米 12.3.20 Android 10

    最新版的好像不行 我在functions底部添加然后网站打不开了

    1. Sanakey Google Chrome 83.0.4103.97 Windows 10
      @若曦

      是的,最新版的functions混淆加密过,直接添加代码不行了。

      1. 若曦 邮箱客户端 5.7.6 Android 10
        @Sanakey

        那需要怎么弄

        1. Sanakey Google Chrome 83.0.4103.97 Windows 10
          @若曦

          自己百度看看,有没有大佬解决了这个问题。或者等下个版本,看看作者会不会取消加密吧。

          1. 若曦 邮箱客户端 5.7.6 Android 10
            @Sanakey

            好吧

        2. Sanakey Google Chrome 83.0.4103.97 Windows 10
          @若曦

          我也不清楚,这也是我现在还在用5.3老版本的原因。

  11. 缘浅不识 Edge 81.0.416.72 Windows 10

    给大佬点个赞(☆ω☆)

    1. Sanakey Google Chrome 81.0.4044.92 Windows 10
      @缘浅不识

      谢谢支持

  12. bingmiao Google Chrome 81.0.4044.92 Windows 10

    大佬,博客标题居中显示和阴影怎么实现啊

    1. Sanakey Google Chrome 81.0.4044.92 Windows 10
      @bingmiao

      建议你自己查一下css的文档,text-align与text-shadow

      1. bingmiao Google Chrome 81.0.4044.92 Windows 10
        @Sanakey

        我完全是小白,有代码吗?|´・ω・)ノ

        1. Sanakey Google Chrome 81.0.4044.92 Windows 10
          @bingmiao

          搜一下我说的关键词,文档有代码示例。

Leave a Comment

reimu.png