Hexo添加各种小部件

前言

　　Shaun 目前还在使用对 Hexo 的主题 SPFK 自行魔改的那个主题（所谓的魔改也就是对照着 black-blue 主题修改了部分 CSS，然后又添加了一个站内搜索功能 (>^ω^<)），主题 SPFK 主体的东西其实都没改变。现在正逐渐将其完善中，遂有此文。

添加 QQ 邮箱联系

添加日期：2017-9-15

　　进入 QQ邮箱开放平台，点击“获取邮我按钮”，登录 QQ 之后继续点击该按钮，因为 Shaun 不需要其样式，只需要其链接即可，所以就默认样式，直接点击“获取代码”即可，Shaun 默认的“HTML代码”为：

<a target="_blank" href="http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=qNvAyd3G0d3JxujOx9DFycHEhsvHxQ" style="text-decoration:none;"><img src="http://rescdn.qqmail.com/zh_CN/htmledition/images/function/qm_open/ico_mailme_01.png"/></a>

提取其中的 href，即http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=qNvAyd3G0d3JxujOx9DFycHEhsvHxQ，将该链接添加到 主题配置文件 中，具体如下：

subnav:
  mail: "http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=qNvAyd3G0d3JxujOx9DFycHEhsvHxQ"

重新部署站点即可发现对应的邮箱图标，点击该图标可直接给 Shaun 发邮件。

添加 QQ 交谈链接

添加日期：2017-9-15

　　进入 QQ推广，点击上方的“推广工具”，若没登录 QQ 则先登录 QQ，组件样式同样默认即可，这里需要注意的是，需要点击左边的“设置”，下滚页面，找到“安全级别设置”，如下

安全级别设置
完全公开（推荐商家，客服等用户使用，代码中显示QQ号码，易于推广）
安全加密（推荐博主，论坛用户等使用，代码中不显示QQ号码）

选中“安全加密”，不然该选项默认的为完全公开，这样 QQ 号码就直接会显示在代码中，不利于隐私保护，选中之后，点击“保存”。保存之后，再次点击“推广工具”，即可发现下方的复制代码区域的 HTML 代码已看不到明码显示的 QQ 号，（若还是能看到 QQ 号，没有任何变化，可关闭该界面，重启浏览器重新进入该界面），Shaun 的“复制这段代码并将其粘贴到您的网页上”下方区域的默认的代码为：

<a target="_blank" href="http://sighttp.qq.com/authd?IDKEY=b1afd83745b30922bc98e020847b86a5148d2114e62e8422"><img border="0"  src="http://wpa.qq.com/imgd?IDKEY=b1afd83745b30922bc98e020847b86a5148d2114e62e8422&pic=52" alt="点击这里给我发消息" title="点击这里给我发消息"/></a>

提取其中的 href，即http://sighttp.qq.com/authd?IDKEY=b1afd83745b30922bc98e020847b86a5148d2114e62e8422，将该链接添加到 主题配置文件 中，具体如下：

subnav:
  QQ: "http://sighttp.qq.com/authd?IDKEY=4faf682653b3b7f5f47b9cb6d2bb8b81de8fa7a8fb8cee12"  

重新部署站点即可发现对应的 QQ 图标，点击该图标可直接给 Shaun 发临时 QQ 消息。

添加用户访问统计信息小工具 —— RevolverMaps

添加日期：2017-10-12

　　由于 Shaun 暂时不想搞 SEO，所以就没有搞站点地图，更没有将 Shaun 的站点提交到百度和 Google 的站长平台上。但 Shaun 又想查看用户访问信息（是不是很矛盾 o(╯□╰)o），而正好 Shaun 看到有个很酷炫的 3D地球能满足 Shaun 的需求（其实很酷炫才是主要原因 O(∩_∩)O~），所以 Shaun 决定将其加入 Shaun 的站点中（当做一部分装饰品 ๑乛◡乛๑）。该插件的名称为 RevolverMaps，具体样式可以去其官网看，Shaun 就不贴图了。设置完前三步之后，第四步让用户复制代码到自己的站点上，注意第四步会让你选“new map”还是“update”，由于 Shaun 是初次使用，当然是选择默认的“new map”，如果是以前使用过，就选择“update”，并将原来使用的 script 代码输入出现的文本框并提交，这样就只是更改 3D 地球样式而不会丢失用户访问信息数据。　　具体添加方法为：将复制的 script 代码放入想显示的某个 div 中。Shaun 得到的 script 代码为：

<script type="text/javascript" src="//rf.revolvermaps.com/0/0/8.js?i=50om5cdoa3h&m=7&c=ff0000&cr1=ffffff&f=arial&l=49" async="async"></script>

　　由于 Shaun 的博客是双栏的，Shaun 当然是把 RevolverMaps 放入左栏中，Shaun 刚开始是把得到的 script 代码放入主题文件夹下 \layout\_partial\left-col.ejs 文件末尾的

 </header>                
</div>

</header> 标签之前（即在 header 的最下端显示 RevolverMaps ），但实际用起来有点不好看；Shaun 又想干脆另外创造一个 div 放置地球，具体思路为：在 birdhouse 图标旁创建一个新的地球图标，再做一个像 birdhouse 图标一样的动画，鼠标移到地球图标时，出现一个 div，该 div 用来放置 RevolverMaps，这一步做到一半（即将一个新的地球图标并排放在 birdhouse 图标旁）发现这个效果感觉更不好看了，如果要改就需要大改了，有点麻烦 o(︶︿︶)o唉；于是 Shaun 看到鼠标放在 birdhouse 图标出现的菜单栏上，想到何不如将该菜单栏在添加一栏，创建一个 div 用来显示 RevolverMaps？事不宜迟，马上就动手添加该 div，具体添加步骤如下：

首先当然是添加一个“访问情况”的列表名称，在主题文件夹下 \layout\_partial\left-col.ejs 文件中 <ul class="tips-inner"> 下最后一个 <li> 后即 </ul> 前添加 <li>访问情况</li>；
接着像其它的列表一样（点击该列表 birdhouse 图标就会改变成相应的图标），点击“访问情况”会将 birdhouse 图标改变成一个地球小图标，经查阅相应的 css 文件，其它的列表对应的图标好像是利用 div 的边框属性画出来的（某业余前端的猜测+_+），Shaun 目前还没有这样的才能，就只有投机的采用 Font Awesome 中的 globe 图标了。在主题文件夹下 \layout\_partial\left-col.ejs 文件中 <div class="icon-ctn"> 下最末尾即其对应的 </div> 前添加：
1
2
3
<div class="icon-wrap icon-globe hide" data-idx="4">
<i class="fa fa-globe fa-spin fa-2x" aria-hidden="true"></i>
</div>
这样点击“访问情况”会将 birdhouse 图标变成一个旋转的地球小图标了；

接下来就需要创建“访问情况”对应的 div 了，在主题文件夹下 \layout\_partial\left-col.ejs 文件中 <div class="switch-wrap"> 下最末尾即其对应的 </div> 前添加：

<section class="switch-part switch-part5">
	<script type="text/javascript" src="//rf.revolvermaps.com/0/0/8.js?i=50om5cdoa3h&amp;m=7&amp;c=ff0000&amp;cr1=ffffff&amp;f=arial&amp;l=49" async="async"></script>
</section>

这样点击“访问情况”就能出现酷炫的 3D 地球了，才怪 :p。这样只能让 3D 地球出现在菜单界面，还需要添加修改相应的 css；

最后就是改 css 样式了，本以为这一步很简单，没想到这一步花费 Shaun 最多时间 ╮(╯_╰)╭，修改的样式位于主题文件夹下 \source\css_partial\main.styl 文件中，首先为 switch-part5 添加对应的样式，在 .switch-part4 样式后添加：
1
2
3
4
5
6
.switch-part5{
left: 400%;
width: 100%;
//height: 200px;
//margin-left: 47px;
}
做完这一步会发现 3D 地球显示不完全，下面会缺一点，所以还需要继续修改，修改过程如下：Shaun 曾将该 width 减小（如上面代码中的注释），这样确实能让 3D 地球显示完全，但有点小，不是很好看；后面想到没显示完全可能是上层 div（.switch-area）太小且设置了 overflow: hidden;，于是这里 Shaun 首先增加了 .switch-area 的高度，这样确实能解决问题，但会使左栏的滚动条显示出来；所以 Shaun 接着尝试将 .switch-area 的 overflow: hidden; 注释掉，谁想注释掉之后出现了横向滚动条，这样更不好了，于是 Shaun 又更改为 overflow-x: hidden; ，谁想 .switch-area 又出现了竖直滚动条（感觉像拆东墙补西墙 -_-|||），查阅相关资料（CSS-overflow特性及总结）得知若 overflow-x 为 hidden，overflow-y 不为 hidden，则 overflow-y 将会自动重置为 auto，所以这里不能这样改，但 overflow: hidden; 还是得注释掉，不然上层 div 撑不开，而且不增加高度的话，还是不能完全显示 3D 地球，因为超出就隐藏了嘛；因为注释掉之后会出现横向滚动条，而又不能修改 .switch-area 的 overflow-x，所以就只能改更上层的 div，这里 Shaun 突然想起上次给左栏添加滚动条时，在 .left-col 下添加了 overflow: auto;，这次不如还修改这里，毕竟 Shaun 只想要竖直滚动条（其实不要滚动条却能滚动最好，但 Shaun 目前还没找到好的解决方案 (╯﹏╰)b），不要横向滚动条，于是将其修改为：
1
2
overflow-y: auto;
overflow-x: hidden;
没想到这样也能解决问题，虽然还是会在左栏出现滚动条，但这样感觉比增加 .switch-area 的高度要好（嗯，应该要好吧 (～ o ～)Y）。看以后能不能改成点击“访问情况”时才出现滚动条，点击其它列表则不出现滚动条（其实把滚动条隐藏最好，但网上那个两个 div 嵌套的方法 Shaun 尝试过会出现一些奇怪的问题，等以后再试试吧 ↖((^ω^)↗）。