暄风吹斋响苍玉,竹石相看便有情。提胡卢来沽美酒,终日撩人不住声。

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

前言

相信在使用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

    1
    <a href="https://github.com/qq729556278" id="fork-me-custom" class="github-corner" aria-label="View source on Github">...</a>
  2. 主题根目录/source/js/src文件夹下新建一个javascript文件,我命名为change-share-status.js,并输入以下代码,并保存

    1
    2
    3
    4
    5
    $(document).ready(function () { //初始化加载
    if (/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
    $("#fork-me-custom").hide();
    }
    });

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

  3. 回到_layout.swig文件,并在</body>标签与</html>标签之间引入新建的js文件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <!DOCTYPE html>
    <html>
    <head>
    ...
    </head>
    <body>
    ...
    </body>
    <!-- 手机端隐藏github分享 -->
    <script type="text/javascript" src="/js/src/change-share-status.js"></script>
    </html>
  4. 保存发布后,手机端会自动隐藏fork me on github按钮

  5. 接下来我们做PC端窗口大小的适配,首先我们使用谷歌或者火狐浏览器打开小窗口,并右击三条横杠的菜单按钮,选择检查,检查其html代码,发现它有一个class属性,名为site-nav-toggle

  6. 通过调整窗口大小动态监测代码,发现在放大到一定程度的时候菜单元素会被隐藏,以此为突破口,我们修改change-share-status.js,新增一个showShare的函数

    1
    2
    3
    4
    5
    6
    7
    8
    //当菜单按钮隐藏时显示分享按钮,反之隐藏
    function showShare(){
    if ($(".site-nav-toggle").is(":hidden")) {
    $("#fork-me-custom").show();
    } else {
    $("#fork-me-custom").hide();
    }
    }
  7. 在初始化时调用该函数,并添加窗口大小变化的监听事件,调用该函数,全部完成后的代码如下所示

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    $(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();
    }
    }
  8. 编译运行一下,看看fork按钮自适应隐藏是否完成了呢!

参考

  1. jQuery判断元素是否显示与隐藏
  2. 用JS或者jQuery监听 浏览器窗口大小的变化事件
-------------本文结束感谢您的阅读-------------
坚持原创技术及精品文章分享,您的支持将鼓励我继续创作!
0%