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

2018年08月31日 1.1k阅读 0评论 0点赞

首页
/
hexo
/
正文

前言

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

添加按钮

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

问题演示

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

解决方案

移动端适配

找到自己添加的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>

在主题根目录/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();
       }
   });

[scode color="lblue"]其含义是：当页面加载时，判断设备是否是移动设备，是则隐藏元素。[/scode]

回到_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>

保存发布后，手机端会自动隐藏fork me on github按钮

电脑端适配

首先我们使用谷歌或者火狐浏览器打开小窗口，并右击三条横杠的菜单按钮，选择检查，检查其html代码，发现它有一个class属性，名为site-nav-toggle
通过调整窗口大小动态监测代码，发现在放大到一定程度的时候菜单元素会被隐藏，以此为突破口，我们修改change-share-status.js，新增一个showShare的函数

//当菜单按钮隐藏时显示分享按钮，反之隐藏
   function showShare(){
       if ($(".site-nav-toggle").is(":hidden")) {
           $("#fork-me-custom").show();
       } else {
           $("#fork-me-custom").hide();
       }
   }

在初始化时调用该函数，并添加窗口大小变化的监听事件，调用该函数，全部完成后的代码如下所示

$(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();
     }
   }

编译运行一下，看看fork按钮自适应隐藏是否完成了呢！

参考

0赞

打赏

hexo next

发布作者：偷得浮生半日闲

百度收录：正在检测是否收录...

本文链接： https://www.yanjiayu.cn/hexo/hexoforkmeongithub.html

作品采用：《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 》许可协议授权

—— 评论区 ——

博主关闭了当前页面的评论

偷得浮生半日闲

16 文章数

29 标签数

10 评论量

人生倒计时

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

前言

添加按钮

问题演示

解决方案

移动端适配

电脑端适配

参考

—— 评论区 ——

Python自动化生成Java的Mapper和Model注解类

分享自建的Jrebel License Server激活Jrebel

搭建一个私人的ChatGPT

用户登录

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

前言

添加按钮

问题演示

解决方案

移动端适配

电脑端适配

参考

—— 评论区 ——

Python自动化生成Java的Mapper和Model注解类

分享自建的Jrebel License Server激活Jrebel

搭建一个私人的ChatGPT