Hexo博客next主题添加Fork me on GitHub

在网上浏览博客时经常看到页面的右上角或左上角有一个fork me on github的按钮,本文将介绍如何实现。

1、效果展示

右上角截图


right

左上角截图


left

2、实现

2.1、样式挑选

点我跳转 挑选你自己喜欢的样式。

2.2、next主题实现

打开文件:hexo博客根目录\themes\next\layout\_layout.swig 找到如下代码块

添加自己喜欢的样式后结果如下

 

访问你的本地服务测试看看修改的效果吧。

2.3、小屏幕不显示fork me on github

按照上面的步骤当屏幕缩小后还会显示fork me on github图标,但这不是我想要的,我希望在大屏下显示,小屏后就不显示了。方法如下:
修改文件hexo博客根目录\themes\next\layout\_layout.swig 找到如下代码块



  {% include '_partials/head.swig' %}
  {% block title %}{% endblock %}

添加如下代码,结果如下


  {% include '_partials/head.swig' %}
  {% block title %}{% endblock %}
  


最后在2.2节添加的代码块上套上div加上class就行了,如下



最后在试试效果达到自己的想要的了

你可能感兴趣的:(Hexo博客next主题添加Fork me on GitHub)