Octopress添加回到顶部功能
在Octopress当阅读到文章底部的时候，或多或少都想回到顶部，而默认的Octopress没有提供回到顶部的功能，于是一不做二不休，自己找个控件加上。
现成的资源
Scroll To Top 这个网站提供了数十种回到顶部的样式。你可以根据自己的需要，添加所中意的widget。
如何添加
新建一个文件来存放widget代码
文件归属目录source/_includes/custom/,假设文件名为scroll_to_top.html
linenos:false source/_includes/custom/scroll_to_top.html
1 2 | <script type="text/javascript" src="http://arrow.scrolltotop.com/arrow37.js"></script> <noscript>Not seeing a <a href="http://www.scrolltotop.com/">Scroll to Top Button</a>? Go to our FAQ page for more info.</noscript> |
|---|
注意，默认Octopress引入了jquery.min.js，所以没有必要再次引入。
引入代码
回到顶部功能，不仅仅要在文章页生效，同时也需要对类似归档页面有效才完美。于是我们需要找一个公用的位置。这个位置就是source/_layouts/default.html
linenos:false source/_layouts/default.html
1 2 3 4 5 | <footer role="contentinfo">{% include footer.html %}</footer> {% include after_footer.html %} {% include custom/scroll_to_top.html %} </body> </html> |
|---|
更加完美
Octopress默认的为所有的div添加了一个背景，所以上述完成之后看到的图片是有一个灰色背景的，需要去除一下。修改以下文件即可。sass/base/_theme.scss
linenos:false sass/base/_theme.scss
1 2 3 4 5 6 7 8 9 10 | body { > div:not(#ds-wrapper):not(#topcontrol){ background: $sidebar-bg $noise-bg; border-bottom: 1px solid $page-border-bottom; > div { background: $main-bg $noise-bg; border-right: 1px solid $sidebar-border; } } } |
|---|
其中我们添加的div的id为topcontrol。当然前面的ds-wrapper是为了去除多说评论框登陆的背景问题，如不需要可以去掉。
到这里，你已经完成了一个可以秒杀新浪微博的回到顶部的功能啦，恭喜哈。