Sanakey

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

本站handsome主题魔改折腾记录

  1.  Home
  2. Text  
    3. Share to：

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

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

主题

Typecho

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

30分钟搭建 Typecho 个人博客 - 简书

by 己粒

handsome

本博客使用的主题是handsome

handsome —— 一如少年般模样

by 友人C

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

改造

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

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

handsome神代綺凜式魔改主题插件

大家好，这次又是一篇关于handsome魔改主题的文章，不过这次咱不分享教程，直接上自己写的插件。前言使用魔改教程...

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

WowScroll动感元素插件

WowScroll动感元素插件用法插件本体首先前往github下载插件点击右上角绿色的Clone or downl...

随机播放音乐

在文件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

Pixiv每日排行榜Top50小部件

by 超能小紫
骚年，你是ACG或绘画爱好者吗？你希望在你的博客或网站中添加一个 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>

美化代码块

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

Typecho代码高亮插件Code Prettify

by Xcnte
基于prismjs的代码语法高亮typecho插件，支持众多常见的代码语言高亮显示...

随机图片服务

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

文章的随机头图可以使用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(不得不说这款主题真是棒棒哒！~)。
现在终于差不多折腾完了。看着折腾好的博客，感觉好爽啊！~

参考



版权属于：Sanakey(特殊声明除外)

本文链接：https://keymoe.com/archives/10/

所有原创文章采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可。 您可以自由的转载和修改，但请务必注明文章来源并且不可用于商业目的。

Last modification：April 13th, 2021 at 08:59 am
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏

47 comments

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

    博主，这个文章关闭盒子的时候怎么做到跟盒子一样的？
    Reply
  2. okok Firefox 87.0 Windows 10

    博主置顶文章横排如何设置的
    Reply
    1. 21 Google Chrome 89.0.4389.82 Windows 10
      @okok

      我也想弄这样的
      Reply
  3. ShiroKumo Google Chrome 87.0.4280.101 Android 9

    现在响应速度的那个li的class标签改了，应该改成“list-group-item text-second”，不然不会显示透明样式。
    Reply
  4. aaa Edge 87.0.664.66 Windows 10

    好文 爱你摸摸哒
    Reply
    1. Sanakey Google Chrome 87.0.4280.88 Windows 10
      @aaa

      Reply
  5. 若溪 小米 12.8.25 Android 10

    p站每日50张貌似北墙了
    Reply
  6. 可汐两百斤 Firefox 80.0 Windows 10

    大佬请问一下这篇文章的部分文字标为红色，这个是什么插件，还有就是一些图片，按钮的飞入效果
    Reply
    1. Sanakey Google Chrome 85.0.4183.102 Windows 10
      @可汐两百斤

      红色文字是markdown语法``，元素入场动画用的WowScroll插件，首页置顶文章就能看到。
      Reply
  7. mosign Google Chrome 84.0.4147.105 Windows 10

    大佬，右边点击回到博客顶部怎么做的呢？
    Reply
    1. Sanakey Google Chrome 84.0.4147.105 Windows 10
      @mosign

      我写了个插件的，本站首页就能看到。
      Reply
      1. mosign Google Chrome 84.0.4147.125 Windows 10
        @Sanakey

        大佬，左侧的头像旋转怎么做到的？(☆ω☆)
        Reply
        1. Sanakey Google Chrome 84.0.4147.105 Windows 10
          @mosign

          本文没涉及到的美化效果，一般都在置顶的魔改主题插件里。
          Reply
          1. mosign Google Chrome 84.0.4147.125 Windows 10
            @Sanakey

            谢谢大佬，我还想问下打赏背景图，怎么换的(/ω＼)
            Reply
            1. mosign Google Chrome 84.0.4147.125 Windows 10
              @mosign

              不用那个插件可以改么？(/ω＼)
              Reply
              1. Sanakey Google Chrome 84.0.4147.105 Windows 10
                @mosign

                可以，不过建议你最好学一下简单的css；实在不想学，可以按f12开启调试模式，把html元素对应的css扒下来。
                Reply
  8. ヽ 柒柒 Google Chrome 84.0.4147.89 Windows 7

    博主你好，请问你的右键复制提示是怎么弄的呀
    Reply
    1. Sanakey Google Chrome 84.0.4147.89 Windows 10
      @ヽ 柒柒

      这个功能在置顶的魔改主题插件里，在js文件内可以看到，有注释。
      Reply
  9. 粽子 Edge 83.0.478.61 Windows 10

    我上面字都是白的咋搞，一个字也看不清
    Reply
    1. Sanakey Google Chrome 83.0.4103.116 Windows 10
      @粽子

      不知道你说的哪里的字，也许是被其他css覆盖了样式。
      Reply
      1. mosign Google Chrome 84.0.4147.125 Windows 10
        @Sanakey

        我觉得他是想问字体颜色怎么换
        Reply
  10. 若曦 小米 12.3.20 Android 10

    最新版的好像不行 我在functions底部添加然后网站打不开了
    Reply
    1. Sanakey Google Chrome 83.0.4103.97 Windows 10
      @若曦

      是的，最新版的functions混淆加密过，直接添加代码不行了。
      Reply
      1. 若曦 邮箱客户端 5.7.6 Android 10
        @Sanakey

        那需要怎么弄
        Reply
        1. Sanakey Google Chrome 83.0.4103.97 Windows 10
          @若曦

          自己百度看看，有没有大佬解决了这个问题。或者等下个版本，看看作者会不会取消加密吧。
          Reply
          1. 若曦 邮箱客户端 5.7.6 Android 10
            @Sanakey

            好吧
            Reply
        2. Sanakey Google Chrome 83.0.4103.97 Windows 10
          @若曦

          我也不清楚，这也是我现在还在用5.3老版本的原因。
          Reply
  11. 缘浅不识 Edge 81.0.416.72 Windows 10

    给大佬点个赞(☆ω☆)

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

      谢谢支持
      Reply
  12. bingmiao Google Chrome 81.0.4044.92 Windows 10

    大佬,博客标题居中显示和阴影怎么实现啊
    Reply
    1. Sanakey Google Chrome 81.0.4044.92 Windows 10
      @bingmiao

      建议你自己查一下css的文档，text-align与text-shadow
      Reply
      1. bingmiao Google Chrome 81.0.4044.92 Windows 10
        @Sanakey

        我完全是小白,有代码吗?|´・ω・)ノ
        Reply
        1. Sanakey Google Chrome 81.0.4044.92 Windows 10
          @bingmiao

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

Leave a Comment

reimu.png