跳到主要内容

谈谈next主题如何添加"Fork me on Github"

· 阅读需 2 分钟

说说这个站点是如何添加"Fork me on Github",如果只是简单的添加只需要参考github的文档, 将类似下面的代码添加到主题文件夹下layout文件夹下的_layout.swig文件中

<a href="https://github.com/you"><img style="position: absolute; top: 0; left: 0; border: 0;" src="https://camo.githubusercontent.com/82b228a3648bf44fc1163ef44c62fcc60081495e/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f6c6566745f7265645f6161303030302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_left_red_aa0000.png"></a>

比如我的github地址为:https://github.com/dannyjiajia 所以上面的代码改为:

<a href="https://github.com/dannyjiajia"><img style="position: absolute; top: 0; left: 0; border: 0;" src="https://camo.githubusercontent.com/82b228a3648bf44fc1163ef44c62fcc60081495e/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f6c6566745f7265645f6161303030302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_left_red_aa0000.png"></a>

但是这样会有个问题:手机上的页面也会是这个效果,其他主题不知道,next主题会把页面的导航菜单给挡住。我这里采取的方式是只在桌面版的页面上添加。

修改/themes/next/source/js/src/schemes/pisces.js 其实可以统一修改这个文件:/themes/next/source/js/src/motion.js

$(document).ready函数内添加如下代码

NexT.utils.isDesktop() && $(document.body).append('这里粘贴你修改后的html代码');

over~ 这样就只会在桌面版的网页内显示"Fork me on Github"