魔改整体效果取自神代綺凜的网站
首先，在handsome的
后台设置 > 外观设置 > 外观设置开关中关闭盒子模型
1. 添加CSS（实现网站整体效果）
首先下载下面的css文件
将这个文件放到你网站的如下目录中：usr/themes/handsome/assets/css/。
然后打开usr/themes/handsome/component/header.php，在53行附近添加一行<link rel="stylesheet" href="<?php echo STATIC_PATH; ?>css/handsome.css" type="text/css">
然后打开usr/themes/handsome/component/headnav.php，在第一行后加一行 <div id="bg"></div>
最后全部保存
修改网站背景
打开usr/themes/handsome/assets/css/handsome.css，在96行附近改掉PC端背景图片。
163行附近修改移动端背景图片。
Tips: 如果发现出现了首页点击图片无法进入文章的bug，该网站记录了解决方法：
打开usr/themes/handsome/libs/Content.php，找到注释<!--text-muted-->。
在下方增加一行：<a href="{$parameterArray['linkUrl']}" class="ahover"></a>
2. 添加js（实现首页右边栏自动隐藏，网页标题自动变化等）
下载下面的js文件
将这个文件放到typecho的如下路径中：./usr/themes/handsome/assets/js/。
然后打开usr/themes/handsome/component/footer.php，在350行附近添加一行<script type="text/javascript" src="<?php echo STATIC_PATH; ?>js/handsome.js"></script>
最后保存。
3. 魔改代码块样式
效果：
出处：
插件地址：https://github.com/Xcnte/Code-Prettify-for-typecho
将此插件放到./usr/plugins/目录下，文件夹命名为CodePrettify，然后在后台插件管理处开启插件。
修改（替换）./usr/themes/handsome/assets/css/目录下的handsome.min.css，文件地址：
在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);}记得在handsome后台设置里关闭自带的代码高亮。
4. 可爱的返回顶部插件
5. 魔改网站底部
效果：
首先将以下代码添加至后台主题设置自定义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 LHD">
<span class="badge-subject">Copyright</span><span class="badge-value bg-blue">©2019 LHD</span>
</a>
</div>
|
<div class="github-badge">
<a href="./" title="陕ICP备 19001390号-1" style="cursor: url("/usr/plugins/HoerMouse/static/image/dew/link.cur"), pointer;">
<span class="badge-subject">陕ICP备</span><span class="badge-value bg-green">19001390号-1</span>
</a>
</div>将以下代码添加至后台主题设置博客底部右侧信息:
<div class="github-badge">
<a href="http://www.typecho.org" target="_blank" title="由 Typecho 强力驱动" style="cursor: url("/usr/plugins/HoerMouse/static/image/dew/link.cur"), pointer;">
<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" style="cursor: url("/usr/plugins/HoerMouse/static/image/dew/link.cur"), pointer;">
<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魔改" style="cursor: url("/usr/plugins/HoerMouse/static/image/dew/link.cur"), pointer;">
<span class="badge-subject">Modified</span><span class="badge-value bg-red">JindaiKirin</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 b-t 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>
<!--可以去除主题版权信息，最好保留版权信息或者添加主题信息到友链，谢谢你的理解-->6. Typecho炫彩鼠标插件:HoerMouse
首先下载下面的插件：
解压放到usr/plugins/目录中，文件夹名改为HoerMouse，登录管理后台，激活插件即可。
7. 评论附带设备信息
效果：
首先将下面这段css全部加入到handsome/assets/css/handsome.min.css末尾:
.ua-icon{display:inline-block;width:1pc;height:1pc;background-size:cover;background-repeat:no-repeat;vertical-align:text-top}.icon-360{background-image:url(https://cdn.zrahh.com/usr/uploads/2019/03/360.png)}.icon-android{background-image:url(https://cdn.zrahh.com/usr/uploads/2019/03/android.png);height:19px}.icon-apple{background-image:url(https://cdn.zrahh.com/usr/uploads/2019/03/apple.png)}.icon-baidu{background-image:url(https://cdn.zrahh.com/usr/uploads/2019/03/baidu.png)}.icon-chrome{background-image:url(https://cdn.zrahh.com/usr/uploads/2019/03/chrome.png)}.icon-edge{background-image:url(https://cdn.zrahh.com/usr/uploads/2019/03/edge.png)}.icon-firefox{background-image:url(https://cdn.zrahh.com/usr/uploads/2019/03/firefox.png)}.icon-google{background-image:url(https://cdn.zrahh.com/usr/uploads/2019/03/google.png)}.icon-ie{background-image:url(https://cdn.zrahh.com/usr/uploads/2019/03/ie.png)}.icon-liebao{background-image:url(https://cdn.zrahh.com/usr/uploads/2019/03/liebao.png)}.icon-linux{background-image:url(https://cdn.zrahh.com/usr/uploads/2019/03/linux.png)}.icon-mac{background-image:url(https://cdn.zrahh.com/usr/uploads/2019/03/mac.png)}.icon-opera{background-image:url(https://cdn.zrahh.com/usr/uploads/2019/03/opera.png)}.icon-qq{background-image:url(https://cdn.zrahh.com/usr/uploads/2019/03/qq.png)}.icon-quark{background-image:url(https://cdn.zrahh.com/usr/uploads/2019/03/quark.png)}.icon-safari{background-image:url(https://cdn.zrahh.com/usr/uploads/2019/03/safari.png)}.icon-ubuntu{background-image:url(https://cdn.zrahh.com/usr/uploads/2019/03/ubuntu.png)}.icon-uc{background-image:url(https://cdn.zrahh.com/usr/uploads/2019/03/uc.png)}.icon-win1{background-image:url(https://cdn.zrahh.com/usr/uploads/2019/03/win1.png)}.icon-win2{background-image:url(https://cdn.zrahh.com/usr/uploads/2019/03/win2.png)}也可后台加入自定义 css 或是直接在 header.php 中引入
然后找到 handsome/functions.php，将下面代码完整复制，加到 functions.php 文件的最末尾:
// 获取浏览器信息
function getBrowser($agent)
{
if (preg_match('/MSIE\s([^\s|;]+)/i', $agent, $regs)) {
$outputer = '<i class="ua-icon icon-ie"></i> Internet Explore';
} else if (preg_match('/FireFox\/([^\s]+)/i', $agent, $regs)) {
$str1 = explode('Firefox/', $regs[0]);
$FireFox_vern = explode('.', $str1[1]);
$outputer = '<i class="ua-icon icon-firefox"></i> FireFox';
} else if (preg_match('/Maxthon([\d]*)\/([^\s]+)/i', $agent, $regs)) {
$str1 = explode('Maxthon/', $agent);
$Maxthon_vern = explode('.', $str1[1]);
$outputer = '<i class="ua-icon icon-edge"></i> MicroSoft Edge';
} else if (preg_match('#360([a-zA-Z0-9.]+)#i', $agent, $regs)) {
$outputer = '<i class="ua-icon icon-360"></i> 360极速浏览器';
} else if (preg_match('/Edge([\d]*)\/([^\s]+)/i', $agent, $regs)) {
$str1 = explode('Edge/', $regs[0]);
$Edge_vern = explode('.', $str1[1]);
$outputer = '<i class="ua-icon icon-edge"></i> MicroSoft Edge';
} else if (preg_match('/UC/i', $agent)) {
$str1 = explode('rowser/', $agent);
$UCBrowser_vern = explode('.', $str1[1]);
$outputer = '<i class="ua-icon icon-uc"></i> UC浏览器';
} else if (preg_match('/QQ/i', $agent, $regs)||preg_match('/QQBrowser\/([^\s]+)/i', $agent, $regs)) {
$str1 = explode('rowser/', $agent);
$QQ_vern = explode('.', $str1[1]);
$outputer = '<i class= "ua-icon icon-qq"></i> QQ浏览器';
} else if (preg_match('/UBrowser/i', $agent, $regs)) {
$str1 = explode('rowser/', $agent);
$UCBrowser_vern = explode('.', $str1[1]);
$outputer = '<i class="ua-icon icon-uc"></i> UC浏览器';
} else if (preg_match('/Opera[\s|\/]([^\s]+)/i', $agent, $regs)) {
$outputer = '<i class= "ua-icon icon-opera"></i> Opera';
} else if (preg_match('/Chrome([\d]*)\/([^\s]+)/i', $agent, $regs)) {
$str1 = explode('Chrome/', $agent);
$chrome_vern = explode('.', $str1[1]);
$outputer = '<i class="ua-icon icon-chrome""></i> Google Chrome';
} else if (preg_match('/safari\/([^\s]+)/i', $agent, $regs)) {
$str1 = explode('Version/', $agent);
$safari_vern = explode('.', $str1[1]);
$outputer = '<i class="ua-icon icon-safari"></i> Safari';
} else{
$outputer = '<i class="ua-icon icon-chrome"></i> Google Chrome';
}
echo $outputer;
}
// 获取操作系统信息
function getOs($agent)
{
$os = false;
if (preg_match('/win/i', $agent)) {
if (preg_match('/nt 6.0/i', $agent)) {
$os = ' <i class= "ua-icon icon-win1"></i> Windows Vista / ';
} else if (preg_match('/nt 6.1/i', $agent)) {
$os = ' <i class= "ua-icon icon-win1"></i> Windows 7 / ';
} else if (preg_match('/nt 6.2/i', $agent)) {
$os = ' <i class="ua-icon icon-win2"></i> Windows 8 / ';
} else if(preg_match('/nt 6.3/i', $agent)) {
$os = ' <i class= "ua-icon icon-win2"></i> Windows 8.1 / ';
} else if(preg_match('/nt 5.1/i', $agent)) {
$os = ' <i class="ua-icon icon-win1"></i> Windows XP / ';
} else if (preg_match('/nt 10.0/i', $agent)) {
$os = ' <i class="ua-icon icon-win2"></i> Windows 10 / ';
} else{
$os = ' <i class="ua-icon icon-win2"></i> Windows X64 / ';
}
} else if (preg_match('/android/i', $agent)) {
if (preg_match('/android 9/i', $agent)) {
$os = ' <i class="ua-icon icon-android"></i> Android Pie / ';
}
else if (preg_match('/android 8/i', $agent)) {
$os = ' <i class="ua-icon icon-android"></i> Android Oreo / ';
}
else{
$os = ' <i class="ua-icon icon-android"></i> Android / ';
}
}
else if (preg_match('/ubuntu/i', $agent)) {
$os = ' <i class="ua-icon icon-ubuntu"></i> Ubuntu / ';
} else if (preg_match('/linux/i', $agent)) {
$os = ' <i class= "ua-icon icon-linux"></i> Linux / ';
} else if (preg_match('/iPhone/i', $agent)) {
$os = ' <i class="ua-icon icon-apple"></i> iPhone / ';
} else if (preg_match('/mac/i', $agent)) {
$os = ' <i class="ua-icon icon-mac"></i> MacOS / ';
}else if (preg_match('/fusion/i', $agent)) {
$os = ' <i class="ua-icon icon-android"></i> Android / ';
} else {
$os = ' <i class="ua-icon icon-linux"></i> Linux / ';
}
echo $os;
}最后在 handsome/component/comments.php 中找到合适位置添加以下代码：
<span class="comment-ua">
<?php getOs($comments->agent); ?>
<?php getBrowser($comments->agent); ?></span>
8. 响应耗时
效果：
将以下代码存放到主题的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;
}然后在右侧边栏加上响应耗时部分，具体就是修改component/sidebar.php这个文件，在合适的位置加上如下代码：
<li class="list-group-item text-second"><span class="blog-info-icons"> <i data-feather="refresh-ccw"></i></span> <span class="badge pull-right"><?php echo timer_stop();?></span><?php _me("响应耗时") ?></li>
9. 3D标签云
效果：
插件地址：
将插件下载后放到usr/themes/handsome/plugins中，目录命名为ColorfulTags。
后台开启该插件，进入插件配置页面，手动填写标签云容器的ID，正常情况下都是tag_cloud-2。
注意，可能会出现标签云显示不正常，鼠标停到某一标签上而该标签会自动上浮的bug
修改usr/themes/handsome/assets/css/handsome.css，在117行附近找到.standpage,aside,aside *，将aside *注释掉即可。
10. 文章底部版权提示
打开usr/themes/handsome/post.php，在94行附近加上如下代码：
<!--版权说明-->
<blockquote class="content-copyright" style="margin-top:50px;background-color:rgba(255,255,255,0.7);border-left:5px solid #f07a9b96!important;">
<p>
<b>版权声明</b>：若文中无特殊说明，则本文为原创文章，版权归 <a href="https://laihaodong.cn/" target="_blank">Syndicate</a> 所有。
</p>
<p>
<b>本文链接</b>：<a href="<?php $this->permalink() ?>"><?php $this->permalink() ?></a>
</p>
<p>
所有原创文章采用 <a href="https://creativecommons.org/licenses/by-nc/4.0/deed.zh" target="_blank">知识共享署名-非商业性使用 4.0 国际许可协议</a> 进行许可。
<br>
您可以自由的转载和修改，但请务必注明文章来源并且不可用于商业目的。
</p>
</blockquote>
11. 添加复制弹窗
首先在官网下载layer文件包，解压并将layer整个文件夹（不要拆分结构）存放到你项目的任意目录，然后在footer.php中引用layer文件夹下的layer.js。
然后在handsome后台设置的开发者设置 > 自定义Javascript中填入下面的代码：
document.body.oncopy = function() {layer.msg('复制成功，若要转载请保留本文链接！');};12. 仿Github的Markdown样式
首先下载CSS：
将其放在 usr/themes/handsome/assets/css/ 下。
然后打开 usr/themes/handsome/component/header.php，在第56行附近引用该css：
<link rel="stylesheet" href="<?php echo STATIC_PATH; ?>css/github-markdown-css-for-blog.css" type="text/css">
最后打开usr/themes/handsome/post.php，在91行附近为该div元素加上markdown-body属性：
警告，如果同时使用了Code Prettify的代码块美化插件，有可能css会产生冲突，如果发现代码块样式显示不正常，建议删除这个
github-markdown-css-for-blog.css中的code标记以及pre标记相关部分
13. 扩展更丰富的图标
首先下载整个项目：
将其解压放在网站目录下，然后打开usr/themes/handsome/component/header.php，引用其中的css/all.min.css。
<link rel="stylesheet" href="<?php echo STATIC_PATH; ?>fontawesome-free-5.11.2-web/css/all.min.css" type="text/css">
然后就可以愉快的使用官网上提供的图标了。
22 条评论
文笔细腻，描写生动，画面感跃然纸上。
大佬,functions.php无法编辑，被加密了~~~求支招~~~
加我QQ 913511635
大佬，我使用github-markdown-css-for-blog.css之后代码框变成了这个样子，请问如何解决？未安装Code Prettify插件。markdown编辑器使用的是EditorMD，未接管前台。不使用此css并使用EditorMD接管前台也会出现同样的问题。handsome版本是5.1.0。问题截图：https://sm.ms/image/w7ugLCea2hHoOFq
上面的图片好像被删了，重发
https://i.loli.net/2020/06/19/ymKBVFvOxXfoep2.png
你有试过我文章里说的删除 github-markdown-css-for-blog.css 里有关 code 标签和 pre 标签的内容吗？
https://www.sjl511.cn
function.php不能编辑怎么办
加我 QQ 913511635
版权提示可以用Handsome的文章底部广告做哟
13. 仿Github的Markdown样式
按要求修改后并没有出现应有样式
请问在文章中怎么办编写才会出现应有的样式
呃呃，我傻了，忘了引用这个css了，不好意思。博客更新了，你可以看一下。
好了噢，谢谢博主~
请问 2. 添加js（实现首页右边栏自动隐藏，网页标题自动变化等）这里我只想实现首页右边栏自动隐藏，不想弄网页标题自动变化··JS要删除那部分···对JS不熟
我大概知道删除哪部分 但是那些括号大括号看的我不知所措····
其实我也不怎么用js。大概看了下，你试试从30行的 var d 到 40行的小括号之间的代码都删掉。其实就是要删除掉31行那个document.addEventListener函数就行了。（不知道你之前有没有这样做，建议你把这些代码粘贴到编辑器里看，比如sublime text就很方便，会显示出配对的括号在哪）
博主！你的这个页面加载进度条好骚啊，教程来一波不
就是这个：http://uee.me/c34tT
这是handsome主题自带的呦，你是handsome主题吗？
不显示图标怎么回事
你应该是http打开的吧，貌似就会出现图标无法加载bug，你可以试下用https打开。我这两天闲下来了，明天搞一下把http重定向到https
老板，有没有神改
很不错的内容