主题
Typecho
本博客基于typecho搭建,如果你只是一个萌新,连服务器都没有,可以看看下面这篇文章
handsome
本博客使用的主题是handsome
改造
基于神代綺凜大佬的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/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 ">
<span class="badge-subject">Copyright</span><span class="badge-value bg-blue">©2016-2019 </span>
</a>
</div>
|
<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>
|
<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>
|
<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> | Theme by <a target="blank" href="https://www.ihewro.com/archives/489/">handsome</a> 删除本行-->
</span>
<span class="text-ellipsis">
<!-- © <?php echo date("Y");?> Copyright 删除本行-->
<?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 国际许可协议进行许可。 您可以自由的转载和修改,但请务必注明文章来源并且不可用于商业目的。
标签云那个修改,我把它放进了回调函数了,但是刷新页面,效果就没有啦,好像回调函数没起作用?是这样嘛
博主,这个文章关闭盒子的时候怎么做到跟盒子一样的?
博主置顶文章横排如何设置的
我也想弄这样的
现在响应速度的那个li的class标签改了,应该改成“list-group-item text-second”,不然不会显示透明样式。
好文 爱你摸摸哒
p站每日50张貌似北墙了
大佬请问一下这篇文章的部分文字标为红色,这个是什么插件,还有就是一些图片,按钮的飞入效果
红色文字是markdown语法``,元素入场动画用的WowScroll插件,首页置顶文章就能看到。
大佬,右边点击回到博客顶部怎么做的呢?
我写了个插件的,本站首页就能看到。
大佬,左侧的头像旋转怎么做到的?(☆ω☆)
本文没涉及到的美化效果,一般都在置顶的魔改主题插件里。
谢谢大佬,我还想问下打赏背景图,怎么换的(/ω\)
不用那个插件可以改么?(/ω\)
可以,不过建议你最好学一下简单的css;实在不想学,可以按f12开启调试模式,把html元素对应的css扒下来。
博主你好,请问你的右键复制提示是怎么弄的呀
这个功能在置顶的魔改主题插件里,在js文件内可以看到,有注释。
我上面字都是白的咋搞,一个字也看不清
不知道你说的哪里的字,也许是被其他css覆盖了样式。
我觉得他是想问字体颜色怎么换
最新版的好像不行 我在functions底部添加然后网站打不开了
是的,最新版的functions混淆加密过,直接添加代码不行了。
那需要怎么弄
自己百度看看,有没有大佬解决了这个问题。或者等下个版本,看看作者会不会取消加密吧。
好吧
我也不清楚,这也是我现在还在用5.3老版本的原因。
给大佬点个赞(☆ω☆)