前言

相信在使用Hexo博客的所有人中,用Next主题的小伙伴占了一大半,包括本人[害羞]。而作为一名技术宅,让每个进入博客的人去关注我的Github是一件非常重要的事,所以我在博客的右上角添加了fork me on github的按钮。但是在实际的使用中,发现这个按钮的无法自适应,会影响的小窗口及手机用户的使用,本文就来教大家如何让这个按钮做到全平台的自适应。


添加按钮

关于如何添加fork me on github的按钮,在此不再赘述,大家可以看这篇文章Hexo主题Next美化中的3.17小节详细介绍了方法。


问题演示

  1. 正常PC页面:没有问题
  2. 小窗口PC页面:fork图标被菜单按钮遮挡
  3. 移动端页面:fork图标被菜单按钮遮挡

解决方案

移动端适配

  1. 找到自己添加的fork标签,应该是在主题根目录/layout/_layout.swig文件内,为其最外部的a标签加上一个id属性,我这里将id设置为fork-me-custom
<a href="https://github.com/qq729556278" id="fork-me-custom" class="github-corner" aria-label="View source on Github">...</a>
  1. 主题根目录/source/js/src文件夹下新建一个javascript文件,我命名为change-share-status.js,并输入以下代码,并保存
$(document).ready(function () { //初始化加载
       if (/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
           $("#fork-me-custom").hide();
       }
   });

其含义是:当页面加载时,判断设备是否是移动设备,是则隐藏元素。

  1. 回到_layout.swig文件,并在</body>标签与</html>标签之间引入新建的js文件
<!DOCTYPE html>
   <html>
       <head>
           ...
       </head>
       <body>
           ...
       </body>
   <!-- 手机端隐藏github分享 -->
   <script type="text/javascript" src="/js/src/change-share-status.js"></script>
   </html>
  1. 保存发布后,手机端会自动隐藏fork me on github按钮

电脑端适配

  1. 首先我们使用谷歌或者火狐浏览器打开小窗口,并右击三条横杠的菜单按钮,选择检查,检查其html代码,发现它有一个class属性,名为site-nav-toggle
  2. 通过调整窗口大小动态监测代码,发现在放大到一定程度的时候菜单元素会被隐藏,以此为突破口,我们修改change-share-status.js,新增一个showShare的函数
//当菜单按钮隐藏时显示分享按钮,反之隐藏
   function showShare(){
       if ($(".site-nav-toggle").is(":hidden")) {
           $("#fork-me-custom").show();
       } else {
           $("#fork-me-custom").hide();
       }
   }
  1. 在初始化时调用该函数,并添加窗口大小变化的监听事件,调用该函数,全部完成后的代码如下所示
$(document).ready(function () {
     if (/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
       $("#fork-me-custom").hide();
     }
     showShare();
   });

   $(window).resize(function () { //当浏览器大小变化时
     showShare();
   });

   function showShare() {
     if ($(".site-nav-toggle").is(":hidden")) {
       $("#fork-me-custom").show();
     } else {
       $("#fork-me-custom").hide();
     }
   }
  1. 编译运行一下,看看fork按钮自适应隐藏是否完成了呢!

参考

  1. jQuery判断元素是否显示与隐藏
  2. 用JS或者jQuery监听 浏览器窗口大小的变化事件
正文结束
本文作者:

文章标题:Hexo博客Next主题fork-me-on-github按钮自适应

本文地址:https://www.yanjiayu.cn/hexo/hexoforkmeongithub.html

版权说明:本作品采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可。您可以自由的转载和修改,但请务必注明文章来源并且不可用于商业目的。
知识共享许可协议
最后修改:2020 年 11 月 26 日 02 : 57 PM
如果觉得我的文章对你有用,请随意赞赏