• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

tobiasahlin/infinite-jekyll: Infinite scroll for Jekyll based blogs

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称:

tobiasahlin/infinite-jekyll

开源软件地址:

https://github.com/tobiasahlin/infinite-jekyll

开源编程语言:

JavaScript 80.7%

开源软件介绍:

Infinite Jekyll

Infinite scroll for Jekyll based blogs. See it in action at tobiasahlin.com/blog/.

Getting Started

Add the js folder and all-posts.json to the root of your Jekyll site. If you're not already using jQuery, open _layouts/default.html and include it:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

In _layouts/default.html, include infinite-jekyll.js after jQuery:

<script src="/js/infinite-jekyll.js"></script>

Render posts, not links

How fun is it to only see links? Open up index.html. Find this line:

<li><span>{{ post.date | date_to_string }}</span> &raquo; <a href="{{ post.url }}">{{ post.title }}</a></li>

Remove everything within the li. Open up _layouts/post.html and copy the markup for single posts. Paste it within the li, and replace every instance of page. with post.. This is how it should look using the default markup:

<li>
	<h2>{{ post.title }}</h2>
	<p class="meta">{{ post.date | date_to_string }}</p>

	<div class="post">
	{{ post.content }}
	</div>
</li>

Limit the number of posts

Per default, Jekyll will render all posts in your entire archive. For lazy loading to make sense, we need to set a limit. Open up index.html and find this line:

{% for post in site.posts %}

Change it to:

{% for post in site.posts limit: 10 %}	

You can change 10 to whatever number you like. The same number will be used for lazy loading new posts, so 10 will render 10 static post, and then fetch another 10 posts every time you get near the bottom of the page.

Add the spinner

You should see your 10 latest posts on the front page, but no infinite scroll yet. Infinite Jekyll will only try to lazy load posts if there's a spinner present. At the very end of index.html, add the spinner:

<div class="infinite-spinner"></div>

spinner.css contains a simple CSS spinner that works in most modern browsers. Open up css/main.css, and at the very end, paste everything from spinner.css.

And you're done. Happy scrolling!




鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap