前言
无聊中网上冲浪，看到了神代綺凜的博客站，第一眼就觉得这个博客很优美。了解之后，发现了这款良心主题——Handsome。不过，虽然“折腾”是我的第一生产力，但终究敌不过一个懒字，虽有心更换，但却迟迟没有动手。恰逢我的一波神奇操作导致原站点数据全部丢失(论常备份的重要性)。借着这个机会，折腾就开始了。到现在定制化基本完成，所以觉得有必要写点东西来记录一下，以防自己日后需要重新来过。
主题定制篇
有些改动需要修改主题文件，请在修改前做好备份工作
1. 神代綺凜的魔改样式
- 下载神代綺凜写的css文件：
- 把handsome.css放入
/usr/themes/handsome/assets/css 引入handsome.css
向/usr/themes/handsome/component/header.php中添加<link rel="stylesheet" href="<?php echo STATIC_PATH; ?>css/handsome.css?v=1.6.4" type="text/css" /><!-- 本地css静态资源 --> <link rel="stylesheet" href="<?php echo STATIC_PATH; ?>css/function.min.css?v=<?php echo Handsome::$version.Handsome::$versionTag ?>" type="text/css" /> <link rel="stylesheet" href="<?php echo STATIC_PATH; ?>css/handsome.min.css?v=<?php echo Handsome::$version.Handsome::$versionTag ?>" type="text/css" /> <link rel="stylesheet" href="<?php echo STATIC_PATH; ?>css/handsome.css?v=1.6.4" type="text/css" />增加背景图嵌入点
在/usr/themes/handsome/component/headnav.php第一行后添加<div id="bg"></div><?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?> <div id="bg"></div> <header id="header" class="app-header navbar" role="menu">css中默认的背景图路径为/usr/img/bg/bg1.jpg和/usr/img/bg/bg2.jpg。其中，bg1为PC页面背景，bg2为手机页面背景。可以把自己想要的背景放到以上路径或者修改handsome.css设置为任意想要的背景图的路径。- 关闭主题的盒子模式
- 刷新即可看到修改效果
修复无法点击图片进入文章的问题
在/usr/themes/handsome/libs/Content.php中找到注释<!--text-muted-->，在其后添加一行代码<a href="{$parameterArray['linkUrl']}" class="ahover"></a></div><!--text-muted--> <a href="{$parameterArray['linkUrl']}" class="ahover"></a> </div><!--post-meta wrapper-lg--> </div><!--panel/panel-small-->2. 鼠标悬浮时头像转动并放大
本项修改的是头像，将鼠标放至头像后使其转动并放大。将以下代码添加至后台主题设置
自定义CSS。转动快慢和头像大小可以自行修改数值/*首页头像自动旋转*/ .thumb-lg{ width:130px; } .avatar{ -webkit-transition: 0.4s; -webkit-transition: -webkit-transform 0.4s ease-out; transition: transform 0.4s ease-out; -moz-transition: -moz-transform 0.4s ease-out; } .avatar:hover{ transform: rotateZ(360deg); -webkit-transform: rotateZ(360deg); -moz-transform: rotateZ(360deg); } #aside-user span.avatar{ animation-timing-function:cubic-bezier(0,0,.07,1)!important; border:0 solid } #aside-user span.avatar:hover{ transform:rotate(360deg) scale(1.2); border-width:5px; animation:avatar .5s }
3. 页脚改为github风格样式
向后台主题设置
自定义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="https://blog.littlegreenmouse.cn" title="©2019 LittleMouse"> <span class="badge-subject">Copyright</span><span class="badge-value bg-blue">©2019 LittleMouse</span></a> </div> | <div class="github-badge"> <a href="http://beian.miit.gov.cn/" target="_blank" title="陕ICP备 17016335号" style="cursor: url("/usr/plugins/HoerMouse/static/image/dew/link.cur"), pointer;"> <span class="badge-subject">陕ICP备</span><span class="badge-value bg-green">17016335号</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 魔改样式，作者：神代綺凜" style="cursor: url("/usr/plugins/HoerMouse/static/image/dew/link.cur"), pointer;"> <span class="badge-subject">Modified</span><span class="badge-value bg-orange">Jindai Kirin</span></a> </div>以上示例为本站正在使用的代码，按需取用并注意修改其中的信息
4. 贴吧泡泡表情包
- 下载表情素材并将其放到
handsome/usr/img/emotion/下 修改
handsome/usr/OwO.json引入新放入的表情包。"泡泡":{ "type": "image", "name": "paopao", "container":[ { "icon": "tieba_emotion_01", "text": "泡泡" }, { "icon": "tieba_emotion_02", "text": "泡泡" }, { "icon": "tieba_emotion_03", "text": "泡泡" }, { "icon": "tieba_emotion_04", "text": "泡泡" }, { "icon": "tieba_emotion_05", "text": "泡泡" }, { "icon": "tieba_emotion_06", "text": "泡泡" }, { "icon": "tieba_emotion_07", "text": "泡泡" },{ "icon": "tieba_emotion_08", "text": "泡泡" },{ "icon": "tieba_emotion_09", "text": "泡泡" }, { "icon": "tieba_emotion_10", "text": "泡泡" },{ "icon": "tieba_emotion_11", "text": "泡泡" },{ "icon": "tieba_emotion_12", "text": "泡泡" },{ "icon": "tieba_emotion_13", "text": "泡泡" },{ "icon": "tieba_emotion_14", "text": "泡泡" },{ "icon": "tieba_emotion_15", "text": "泡泡" },{ "icon": "tieba_emotion_16", "text": "泡泡" },{ "icon": "tieba_emotion_17", "text": "泡泡" },{ "icon": "tieba_emotion_18", "text": "泡泡" },{ "icon": "tieba_emotion_19", "text": "泡泡" },{ "icon": "tieba_emotion_20", "text": "泡泡" },{ "icon": "tieba_emotion_21", "text": "泡泡" },{ "icon": "tieba_emotion_22", "text": "泡泡" },{ "icon": "tieba_emotion_23", "text": "泡泡" },{ "icon": "tieba_emotion_24", "text": "泡泡" },{ "icon": "tieba_emotion_25", "text": "泡泡" },{ "icon": "tieba_emotion_26", "text": "泡泡" },{ "icon": "tieba_emotion_27", "text": "泡泡" },{ "icon": "tieba_emotion_28", "text": "泡泡" },{ "icon": "tieba_emotion_29", "text": "泡泡" },{ "icon": "tieba_emotion_30", "text": "泡泡" },{ "icon": "tieba_emotion_31", "text": "泡泡" },{ "icon": "tieba_emotion_32", "text": "泡泡" },{ "icon": "tieba_emotion_33", "text": "泡泡" },{ "icon": "tieba_emotion_34", "text": "泡泡" },{ "icon": "tieba_emotion_35", "text": "泡泡" },{ "icon": "tieba_emotion_36", "text": "泡泡" },{ "icon": "tieba_emotion_37", "text": "泡泡" },{ "icon": "tieba_emotion_38", "text": "泡泡" },{ "icon": "tieba_emotion_39", "text": "泡泡" },{ "icon": "tieba_emotion_40", "text": "泡泡" },{ "icon": "tieba_emotion_41", "text": "泡泡" },{ "icon": "tieba_emotion_42", "text": "泡泡" },{ "icon": "tieba_emotion_43", "text": "泡泡" },{ "icon": "tieba_emotion_44", "text": "泡泡" },{ "icon": "tieba_emotion_45", "text": "泡泡" },{ "icon": "tieba_emotion_46", "text": "泡泡" },{ "icon": "tieba_emotion_47", "text": "泡泡" },{ "icon": "tieba_emotion_48", "text": "泡泡" },{ "icon": "tieba_emotion_49", "text": "泡泡" },{ "icon": "tieba_emotion_50", "text": "泡泡" },{ "icon": "tieba_emotion_52", "text": "泡泡" },{ "icon": "tieba_emotion_53", "text": "泡泡" },{ "icon": "tieba_emotion_54", "text": "泡泡" },{ "icon": "tieba_emotion_55", "text": "泡泡" },{ "icon": "tieba_emotion_56", "text": "泡泡" },{ "icon": "tieba_emotion_57", "text": "泡泡" },{ "icon": "tieba_emotion_58", "text": "泡泡" },{ "icon": "tieba_emotion_59", "text": "泡泡" },{ "icon": "tieba_emotion_60", "text": "泡泡" },{ "icon": "tieba_emotion_61", "text": "泡泡" },{ "icon": "tieba_emotion_62", "text": "泡泡" },{ "icon": "tieba_emotion_71", "text": "泡泡" },{ "icon": "tieba_emotion_72", "text": "泡泡" },{ "icon": "tieba_emotion_73", "text": "泡泡" },{ "icon": "tieba_emotion_74", "text": "泡泡" },{ "icon": "tieba_emotion_75", "text": "泡泡" },{ "icon": "tieba_emotion_76", "text": "泡泡" },{ "icon": "tieba_emotion_77", "text": "泡泡" },{ "icon": "tieba_emotion_78", "text": "泡泡" },{ "icon": "tieba_emotion_79", "text": "泡泡" },{ "icon": "tieba_emotion_80", "text": "泡泡" },{ "icon": "tieba_emotion_81", "text": "泡泡" },{ "icon": "tieba_emotion_82", "text": "泡泡" },{ "icon": "tieba_emotion_83", "text": "泡泡" },{ "icon": "tieba_emotion_84", "text": "泡泡" },{ "icon": "tieba_emotion_85", "text": "泡泡" },{ "icon": "tieba_emotion_86", "text": "泡泡" },{ "icon": "tieba_emotion_87", "text": "泡泡" },{ "icon": "tieba_emotion_88", "text": "泡泡" },{ "icon": "tieba_emotion_89", "text": "泡泡" },{ "icon": "tieba_emotion_90", "text": "泡泡" },{ "icon": "tieba_emotion_91", "text": "泡泡" },{ "icon": "tieba_emotion_92", "text": "泡泡" },{ "icon": "tieba_emotion_93", "text": "泡泡" } ] }名字为表情包的名字。type为表情包素材的类型，name内容用于定位handsome/usr/img/emotion/中的文件夹，icon为表情的文件名，text为该表情的名字，为了偷懒，我这里并没有对其命名。- 或者直接下载我的
OwO.json替换掉原文件
5. 动态标题
后台主题设置
自定义输出head头部的HTML代码添加如下代码<!--动态标题--> <script>document.addEventListener('visibilitychange',function(){if(document.visibilityState=='hidden'){normal_title=document.title;document.title='(つェ⊂)你看不见我，你看不见我';}else{document.title=normal_title;}});</script>title内容可以随意修改
6. 复制弹出版权提醒
后台主题设置
自定义输出head头部的HTML代码添加如下代码<!--复制弹框JS--> <script src="https://blog.littlegreenmouse.cn/layer/layer.js"></script>后台主题设置
自定义JavaScript添加如下代码<!--复制弹框--> document.body.oncopy = function() {layer.msg('复制成功，若要转载请务必保留本文链接！');};
插件篇
1. 评论区信息插件——UserAgent
本插件只适用于Handsome主题
- 下载插件
- 放入
usr/plugins目录 修改
component/comments.php文件<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>开启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]; }- 后台激活插件即可使用
2. 标签自动生成插件——AutoTags
插件特性
- 新建及编辑文章时自动提取标签, 默认生成5个
- 当已存在标签或已手动设置标签时不再自动生成
- 优先匹配博客内现有标签
- 上传激活即可
3. MacOS风格代码高亮插件——CodePrettify
- 插件内置了三种不同颜色的MacOS风格的高亮
- 详情可以参看作者介绍Typecho代码高亮插件Code Prettify
- 本站下载
4. 悬挂喵返回顶部插件——GoTop
- 详情可以参看作者介绍[Typecho]悬挂猫咪置顶插件
- 本站下载
One comment
OωO