Haowen LIU Reading time ~1 minute

这部小说分上下两部
互相分开
却不互相独立
互相平行 却不在同一个时间点
上部叫 《春分 ——》
下部叫 《—— 得意》
合起来是 完整的 《春分——得意》
小说主旋律 不是推理 不是科幻 不是爱情
也许又都是
我怎么知道
我只是在写小说
不是在讲故事
故事已经在心里
而小说还在路上

         ———— 2015年 10月30日  好文文

"cat street" _from flickr_by hugo poon
Haowen LIU Reading time ~1 minute

Here be a sample post with a custom background image.
To use this “feature” just add the following YAML to a post’s front matter.

image:
  background: filename.png

This little bit of YAML makes the assumption that your background image asset is in the /images folder. If you place it somewhere else or are hotlinking from the web, just include the full http(s):// URL. Either way you should have a background image that is tiled.

If you want to set a background image for the entire site just add background: filename.png to your _config.yml and BOOM — background images on every page!

Background images from Subtle Patterns (Subtle Patterns) / CC BY-SA 3.0
Haowen LIU Reading time ~1 minute

Sample Link Post

If you want make a link posts.
Check out the title of this post.

See that?
This one is different, begin with a little flag.

To use, just add link: http://url-you-want-linked to the post’s YAML front matter and you’re done.

Click this title, it will link to About me page.

Haowen LIU Reading time ~1 minute

This video updated is a TV ads of my favourate company
MicroSoft’s great product : Surface Studio
I hope you enjoy it ;)

But as an example here I only show you how to post a video in the post.

Video embeds are responsive and scale with the width of the main content block with the help of FitVids.

<iframe width="560" height="315" src="//www.youtube.com/embed/BzMLA8YIgG0" frameborder="0"></iframe>
Haowen LIU Reading time ~1 minute

Here are some examples of what a post with images might look like. If you want to display two or three images next to each other responsively use figure with the appropriate class. Each instance of figure is auto-numbered and displayed in the caption.

Figures (for images or video)

One Up

Morning Fog Emerging From Trees by A Guy Taking Pictures, on Flickr.

Two Up

Apply the half class like so to display two images side by side that share the same caption.

<figure class="half">
	<img src="/images/image-filename-1.jpg" alt="">
	<img src="/images/image-filename-2.jpg" alt="">
	<figcaption>Caption describing these two images.</figcaption>
</figure>

And you’ll get something that looks like this:

Caption describing these two images.

Three Up

Apply the third class like so to display three images side by side that share the same caption.

<figure class="third">
	<a href="http://placehold.it/1200x600.jpg"><img src="http://placehold.it/600x300.jpg" alt=""></a>
	<a href="http://placehold.it/1200x600.jpg"><img src="http://placehold.it/600x300.jpg" alt=""></a>
	<a href="http://placehold.it/1200x600.jpg"><img src="http://placehold.it/600x300.jpg" alt=""></a>
	<figcaption>Caption describing these three images.</figcaption>
</figure>

And you’ll get something that looks like this:

Three images.

Alternative way

Another way to achieve the same result is to include gallery Liquid template. In this case you don’t have to write any HTML tags – just copy a small block of code, adjust the parameters (see below) and fill the block with any number of links to images. You can mix relative and external links.

Here is the block you might want to use:

{% capture images %}
	/images/abstract-10.jpg
	/images/abstract-11.jpg
	http://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png
{% endcapture %}
{% include gallery images=images caption="Test images" cols=3 %}

Parameters:

  • caption: Sets the caption under the gallery (see figcaption HTML tag above);
  • cols: Sets the number of columns of the gallery. Available values: [1..3].

It will look something like this:

Test images