前言
相信在使用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();
}
});
其含义是:当页面加载时,判断设备是否是移动设备,是则隐藏元素。
- 回到
_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按钮自适应隐藏是否完成了呢!