Jekyll snippets from building Bicrement
After a few hours work, a static bicrement site is up now :D.
These are some tips and snippets on Jekyll, which I spent some time figured out in the process.
Display previous/next post
You can use page.next
and page.previous
to access the previous and next posts (it does not work for pages).
{% assign previous = page.previous %}
{% if previous.url %}
<a href="{{previous.url}}" title="Previous Post: {{previous.title}}">« {{previous.title}}</a>
{% endif %}
{% assign next = page.next %}
{% if next.url %}
<a href="{{next.url}}" title="Next Post: {{next.title}}">{{next.title}} »</a>
{% endif %}
Display year/month in archive page
If you want to display year
and month
in archive page like
my blog page, here is the code:
{% capture year %}{% endcapture %}
{% capture month %}{% endcapture %}
{% for post in site.posts %}
{% capture post_year %}{{ post.date | date: "%Y" }}{% endcapture %}
{% capture post_month %}{{ post.date | date: "%B" }}{% endcapture %}
{% if year != post_year %}
{% assign year = post_year %}
{% endif %}
{% if month != post_month %}
{% assign month = post_month %}
<div class="post-seperator">
<span class="post-year-header">{{ year }}</span>
<span class="post-month-header">{{ month }}</span>
</div>
{% endif %}
{% include post.html %}
{% endfor %}
Add content menu
On the left sidebar, a sweet content menu of this post is displayed. This is created using JavaScript, take a look at my headings.js script.
Download it, include it with jQuery
, and add a <div id="content-menu"></div>
to
your layout to use it.
Create project pages
This is an annoying part. At first, I create pages for each project.
It turns out that pages cannot be sorted (by filenames’ order, or using sort
liquid markup) on Github Page.
In the end, I have to put them as posts and generate them under /project/
using
permalink
, with a lot more changes in order not to mix project posts with normal posts.
Refer to my site’s source code ;).
Embed iframe elements
Empty tag will cause the page not fully rendered. To embed an iframe element, add some text inside the tag to solve this:
<!-- change this iframe element to work -->
<iframe src="..."></iframe>
<!-- by adding random text inside tag -->
<iframe src="...">work now</iframe>
Fork
You can fork my site.
Remove the posts in /_posts/
and get started.
Please keep the credit in the footer, thanks.