戴绿帽的耗子

Handsome主题定制记录
前言无聊中网上冲浪,看到了神代綺凜的博客站,第一眼就觉得这个博客很优美。了解之后,发现了这款良心主题——Hands...
扫描右侧二维码阅读全文
10
2019/09

Handsome主题定制记录

前言

无聊中网上冲浪,看到了神代綺凜的博客站,第一眼就觉得这个博客很优美。了解之后,发现了这款良心主题——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风格样式

show footer

  • 向后台主题设置自定义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&nbsp;LittleMouse">
<span class="badge-subject">Copyright</span><span class="badge-value bg-blue">©2019&nbsp;LittleMouse</span></a>
</div>
&nbsp;|&nbsp;
<div class="github-badge">
<a href="http://beian.miit.gov.cn/" target="_blank" title="陕ICP备 17016335号" style="cursor: url(&quot;/usr/plugins/HoerMouse/static/image/dew/link.cur&quot;), 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(&quot;/usr/plugins/HoerMouse/static/image/dew/link.cur&quot;), pointer;">
<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" style="cursor: url(&quot;/usr/plugins/HoerMouse/static/image/dew/link.cur&quot;), pointer;">
<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 魔改样式,作者:神代綺凜" style="cursor: url(&quot;/usr/plugins/HoerMouse/static/image/dew/link.cur&quot;), pointer;">
<span class="badge-subject">Modified</span><span class="badge-value bg-orange">Jindai Kirin</span></a>
</div>

以上示例为本站正在使用的代码,按需取用并注意修改其中的信息

4. 贴吧泡泡表情包

show paopao

  • 下载表情素材并将其放到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. 动态标题

show title

  • 后台主题设置自定义输出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. 复制弹出版权提醒

show copy info

  • 后台主题设置自定义输出head头部的HTML代码添加如下代码
<!--复制弹框JS-->
<script src="https://blog.littlegreenmouse.cn/layer/layer.js"></script>
  • 后台主题设置自定义JavaScript添加如下代码
<!--复制弹框-->
document.body.oncopy = function() {layer.msg('复制成功,若要转载请务必保留本文链接!');};

插件篇

1. 评论区信息插件——UserAgent

show user info

本插件只适用于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

4. 悬挂喵返回顶部插件——GoTop

参考文献





Last modification:February 1st, 2020 at 12:39 am
如果觉得我的文章对你有用,请随意赞赏

Leave a Comment