在网上浏览博客时经常看到页面的右上角或左上角有一个fork me on github的按钮，本文将介绍如何实现。
1、效果展示
右上角截图
right
左上角截图
left
2、实现
2.1、样式挑选
点我跳转 挑选你自己喜欢的样式。
2.2、next主题实现
打开文件：hexo博客根目录\themes\next\layout\_layout.swig 找到如下代码块
<div class="{{ container_class }} {% block page_class %}{% endblock %} ">
<div class="headband"></div>
添加自己喜欢的样式后结果如下
<div class="{{ container_class }} {% block page_class %}{% endblock %} ">
<div class="headband"></div>
<a target="_blank" href="https://github.com/wiliam2015"></a>
访问你的本地服务测试看看修改的效果吧。
2.3、小屏幕不显示fork me on github
按照上面的步骤当屏幕缩小后还会显示fork me on github图标，但这不是我想要的，我希望在大屏下显示，小屏后就不显示了。方法如下：
修改文件hexo博客根目录\themes\next\layout\_layout.swig 找到如下代码块
<html class="{{ html_class | lower }}">
<head>
{% include '_partials/head.swig' %}
<title>{% block title %}{% endblock %}</title>
添加如下代码，结果如下
<head>
{% include '_partials/head.swig' %}
<title>{% block title %}{% endblock %}</title>
<style>
.forkme{
display: none;
}
@media (min-width: 768px) {
.forkme{
display: inline;
}
}
</style>
</head>
最后在2.2节添加的代码块上套上div加上class就行了，如下
<div class="forkme">
<a target="_blank" href="https://github.com/wiliam2015"></a>
</div>
最后在试试效果达到自己的想要的了
网友评论