博客使用教程

文档开头

---
layout: post
title: "博客使用教程"
subtitle: "博客使用教程"
header-img: "img/post-bg-default1.png"
author:     "晓晨DEV"
date: 2015-01-01
tags:
    - Blog
---

常规

引用

Lorem ipsum dolor sit amet, test link adipiscing elit. Nullam dignissim convallis est. Quisque aliquam.

有序列表

Item one
1. sub item one
2. sub item two
3. sub item three
Item two

无序列表

Item one
Item two
Item three

表格

Header1	Header2	Header3
cell1	cell2	cell3
cell4	cell5	cell6
cell1	cell2	cell3
cell4	cell5	cell6
Foot1	Foot2	Foot3

按钮

Make any link standout more when applying the .btn class.

<a href="#" class="btn btn-success">Success Button</a>

代码高亮

#container {
    float: left;
    margin: 0 -240px 0 0;
    width: 100%;
}

<nav class="pagination" role="navigation">
    {% if page.previous %}
        <a href="{{ site.url }}{{ page.previous.url }}" class="btn" title="{{ page.previous.title }}">Previous article</a>
    {% endif %}
    {% if page.next %}
        <a href="{{ site.url }}{{ page.next.url }}" class="btn" title="{{ page.next.title }}">Next article</a>
    {% endif %}
</nav><!-- /.pagination -->

module Jekyll
  class TagIndex < Page
    def initialize(site, base, dir, tag)
      @site = site
      @base = base
      @dir = dir
      @name = 'index.html'
      self.process(@name)
      self.read_yaml(File.join(base, '_layouts'), 'tag_index.html')
      self.data['tag'] = tag
      tag_title_prefix = site.config['tag_title_prefix'] || 'Tagged: '
      tag_title_suffix = site.config['tag_title_suffix'] || '&#8211;'
      self.data['title'] = "#{tag_title_prefix}#{tag}"
      self.data['description'] = "An archive of posts tagged #{tag}."
    end
  end
end

Link文章

---
layout: post
title: "Sample Link Post"
description: "Example and code for using link posts."
tags: [sample post, link post]
comments: true
link: http://mademistakes.com
categories: [intro]
---

添加**link**标签可以发布文章链接

具有标题图文章

---
layout: post
title: Sample Post with Feature Image
description: "Sample Post with Feature Image"
tags: [sample post]
image:
    feature: feature.jpg
    credit: dargadgetz
    creditlink: http://www.dargadgetz.com/ios-8-abstract-wallpaper-pack-for-iphone-5s-5c-and-ipod-touch-retina/
---

使用黑色主题

---
layout: dark-post
title: Dark Post
description: "Sample Dark post"
tags: [sample post]
---

添加视频

在文章中添加

{::nomarkdown}
<iframe width="560" height="315" src="//www.youtube.com/embed/SU3kYxJmWuQ" frameborder="0" allowfullscreen></iframe>
{:/nomarkdown}

图片高级用法

One Up

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

One Center

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:

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>