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

本文于683天之前发表,文中内容可能已经过时。

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

1、效果展示

右上角截图
right
左上角截图
left

2、实现

2.1、样式挑选

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

2.2、next主题实现

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

1
2
<div class="{{ container_class }} {% block page_class %}{% endblock %} ">
<div class="headband"></div>

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

1
2
3
4
<div class="{{ container_class }} {% block page_class %}{% endblock %} ">
<div class="headband"></div>

<a target="_blank" href="https://github.com/wiliam2015"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"></a>

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

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

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

1
2
3
4
<html class="{{ html_class | lower }}">
<head>
{% include '_partials/head.swig' %}
<title>{% block title %}{% endblock %}</title>

添加如下代码,结果如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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就行了,如下

1
2
3
<div class="forkme">
<a target="_blank" href="https://github.com/wiliam2015"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"></a>
</div>

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

想了解更多技术文章信息,请继续关注wiliam.s Blog,谢谢,欢迎来访!

欣赏此文?求鼓励,求支持!
上一篇