changed figure tag to image tag, added more docs

This commit is contained in:
Brandon Mathis 2011-07-23 00:25:48 -04:00
parent 39b31a0553
commit d90b0dc5de
7 changed files with 64 additions and 12 deletions

View File

@ -6,6 +6,9 @@ sidebar: false
footer: false
---
There are [other plugins](/docs/plugins) for octopress, but here's an overview of the ones you'll be likely to use while blogging.
This is mainly a description and demo, so be sure to follow the links beneath each section for examples and documentation.
## Block quote
{% blockquote @AustinTaylor https://twitter.com/austintaylor/status/73136957617750016 %}
@ -15,7 +18,7 @@ Give a man a fish, he'll have food for a day. Teach a man to fish, and he'll alw
[Examples & documentation »](/docs/plugins/blockquote/)
## Pull quote
Octopress offers a CSS3 only technique for pull quotes, based on the technique by [Maykel Loomans](http://miekd.com/articles/pull-quotes-with-html5-and-css/).
Octopress offers a CSS only technique for pull quotes, based on the technique by [Maykel Loomans](http://miekd.com/articles/pull-quotes-with-html5-and-css/).
{% pullquote %}
When writing longform posts, I find it helpful to include pull quotes to help readers easily identify the topics covered in each section. Some prefer to break things up with lots of headings, and while this seems to be a trend it doesn't work so well for long form prose.

View File

@ -13,12 +13,14 @@ the documentation and if you have trouble, [I'll be happy to help](http://convor
## Getting Started
If you're using bundler and rvm, this should be a breeze.
- [Initial setup](/docs/setup) - Get source and install dependencies
- [Basic Configuration](/docs/configuring) - Enable third party services and personalize your blog
- [Deploying Octopress](/docs/deploying) - Simple deploy instructions for Rsync and Github pages
## Using Octopress
Your blog should be awesome. This should help.
- [Blogging Basics](/docs/blogging) - How to create blog posts and pages
- [Sharing Code Snippets](/docs/blogging/code) - Share code snippets with ease
- [Syntax Highlighting Test](/docs/blogging/code/test) - Language highlighting tests

View File

@ -1,8 +0,0 @@
---
layout: page
title: "Figure Tag"
date: 2011-07-22 09:15
comments: true
sharing: true
footer: true
---

View File

@ -0,0 +1,30 @@
---
layout: page
title: "Image Tag"
date: 2011-07-22 09:15
sidebar: false
footer: false
---
If you like Markdown's simple syntax for images, you'll love the simplicity of the Octopress image tag.
#### Syntax
{{ "{% img [class names] /path/to/image" [title text] }} %}
## Examples
{{ "{% img http://placekitten.com/890/280 Place Kitten #1" }} %}
{{ "{% img left http://placekitten.com/320/250 Place Kitten #2" }} %}
{{ "{% img left http://placekitten.com/150/250 Place Kitten #3" }} %}
{% img http://placekitten.com/890/280 Place Kitten #1 %}
Bacon ipsum dolor sit amet exercitation ball tip consectetur tempor. Biltong exercitation aliqua, ribeye consequat veniam consectetur.
{% img left http://placekitten.com/320/250 Place Kitten #2 %}
{% img right http://placekitten.com/150/250 Place Kitten #3 %}
Aliquip nulla do tempor, ball tip dolore anim esse strip steak nisi nostrud. Tri-tip mollit deserunt ut duis, commodo brisket short loin est hamburger sunt consequat rump meatloaf. Exercitation enim aliqua tempor dolore. Non eu venison, officia boudin tri-tip enim beef ribs flank cupidatat in aute. Tail voluptate fugiat aute flank, venison sint.
Brisket quis velit bresaola. Pork loin pork chop beef duis. Short loin fugiat officia short ribs magna. Ullamco eu proident jerky, fugiat chuck nostrud ham rump meatloaf eiusmod adipisicing. Qui et reprehenderit, magna biltong consequat short ribs pancetta. Tail tenderloin sausage, hamburger corned beef drumstick ad. Eu labore enim velit.
Filler text courtesy of [Bacon Ipsum](http://baconipsum.com).

View File

@ -12,10 +12,10 @@ Octopress ships with the following plugins. Many have been written specially for
- [Code Block](/docs/plugins/codeblock) - For easy inline code sharing
- [Include Code](/docs/plugins/include-code) - Embed code from your filesystem
- [Gist Tag](/docs/plugins/gist-tag) - Automatically downloads and embeds Github gists
- [Render Partial](/docs/plugins/render-partial) - Insert any file into another post or page.
- [Figure Tag](/docs/plugins/figure-tag) - Easily post images with semantic <figure> & <figcaption> elements
- [Render Partial](/docs/plugins/render-partial) - Insert any file into another post or page
- [Image Tag](/docs/plugins/image-tag) - Easily post images with class names and titles
- [Blockquote](/docs/plugins/blockquote) - Generate beautiful, semantic block quotes
- [Pullquote](/docs/plugins/pullquote) - Generate CSS only pull quotes — no duplicate data, no javascript.
- [Pullquote](/docs/plugins/pullquote) - Generate CSS only pull quotes — no duplicate data, no javascript
- [Custom filters](/docs/plugins/octopress-filters) - Liquid filters built just for Octopress
- [Category Generator](/docs/plugins/category-generator) - Generates archive pages for each blog category
- Sitemap Generator - Generates an SEO friendly sitemap.xml

View File

@ -6,3 +6,21 @@ comments: true
sharing: true
footer: true
---
Octopress offers a CSS only technique for pull quotes, based on the technique by [Maykel Loomans](http://miekd.com/articles/pull-quotes-with-html5-and-css/).
#### Syntax
{{ "{% pullqote" }} %}
Surround your paragraph with the pull quote tags. Then when you come to
the text you want to pull, {" surround it like this "} and that's all there is to it.
{{ "{% endpullqote" }} %}
Here's a more realistic example of how you might use a pull quote.
{% pullquote %}
When writing longform posts, I find it helpful to include pull quotes to help readers easily identify the topics covered in each section. Some prefer to break things up with lots of headings, and while this seems to be a trend it doesn't work so well for long form prose.
It is important to note that {" pull quotes are merely visual in presentation and should not appear twice in the text. "} That is why it a CSS only technique for styling pull quotes is preferable. Octopress includes a handy pull quote plugin to make this easy for you.
{% endpullquote %}
Inspect the source and you'll see the pulled content appears in the data-pullquote attribute of the paragraph. The pull quote effect is created
entirely with CSS, and is supported by all modern browsers as well as IE8 and up.

View File

@ -0,0 +1,7 @@
---
layout: page
title: "Updating"
date: 2011-07-22 19:46
sidebar: false
footer: false
---