博客使用教程

博客使用教程

Posted by 晓晨DEV on January 1, 2015

文档开头

---
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.

有序列表

  1. Item one
    1. sub item one
    2. sub item two
    3. sub item three
  2. 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>
Primary Button
Success Button
Warning Button
Danger Button
Info Button

代码高亮

#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

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:

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.

分享