Init commit

10 files changed, 913 insertions, 0 deletions

diff --git a/content/extras/aliases.md b/content/extras/aliases.md
new file mode 100644
index 0000000..1822135
--- /dev/null
+++ b/content/extras/aliases.md
@@ -0,0 +1,40 @@
+---
+aliases:
+- /doc/redirects/
+- /doc/alias/
+- /doc/aliases/
+date: 2013-07-09
+menu:
+  main:
+    parent: extras
+next: /extras/builders
+prev: /taxonomies/ordering
+title: Aliases
+weight: 10
+---
+
+For people migrating existing published content to Hugo, there's a good chance
+you need a mechanism to handle redirecting old URLs.
+
+Luckily, this can be handled easily with aliases in Hugo.
+
+## Example
+**content/posts/my-awesome-blog-post.md**
+
+    ---
+    aliases:
+        - /posts/my-original-url/
+        - /2010/even-earlier-url.html
+    ---
+
+Now when you go to any of the aliases locations, they
+will redirect to the page.
+
+## Important Behaviors
+
+1. *Hugo makes no assumptions about aliases. They also don't change based
+on your UglyUrls setting. You need to provide absolute path to your webroot and the
+complete filename or directory.*
+
+2. *Aliases are rendered prior to any content and will be overwritten by
+any content with the same location.*
diff --git a/content/extras/builders.md b/content/extras/builders.md
new file mode 100644
index 0000000..ce6854d
--- /dev/null
+++ b/content/extras/builders.md
@@ -0,0 +1,60 @@
+---
+date: 2014-05-26
+linktitle: Builders
+menu:
+  main:
+    parent: extras
+next: /extras/comments
+prev: /extras/aliases
+title: Hugo Builders
+weight: 12
+---
+
+Hugo provides the functionality to quickly get a site, theme or page
+started.
+
+
+## New Site
+
+Want to get a site built quickly?
+
+    hugo new site /path/to/site
+
+Hugo will create all the needed directories and files to get started
+quickly.
+
+Hugo will only touch the files and create the directories (in the right
+places), [configuration](/overview/configuration) and content are up to
+you... but luckily we have builders for content (see below).
+
+## New Theme
+
+Want to design a new theme?
+
+    hugo new theme `THEME_NAME`
+
+Run from your working directory, this will create a new theme with all
+the needed files in your themes directory. Hugo will provide you with a
+license and theme.toml file with most of the work done for you.
+
+Follow the [Theme Creation Guide](/themes/creation) once the builder is
+done.
+
+## New Content
+
+You will use this builder the most of all. Every time you want to create
+a new piece of content, the content builder will get you started right.
+
+Leveraging [content archetypes](/content/archetypes) the content builder
+will not only insert the current date and appropriate metadata, but it
+will pre-populate values based on the content type.
+
+    hugo new relative/path/to/content
+
+This assumes it is being run from your working directory and the content
+path starts from your content directory.
+
+I typically keep two different terminals open, one to run `hugo server
+--watch`, and another to use the builders to create new content.
+
+
diff --git a/content/extras/comments.md b/content/extras/comments.md
new file mode 100644
index 0000000..c11c2ec
--- /dev/null
+++ b/content/extras/comments.md
@@ -0,0 +1,100 @@
+---
+date: 2014-05-26
+linktitle: Comments
+menu:
+  main:
+    parent: extras
+next: /extras/livereload
+prev: /extras/builders
+title: Comments in Hugo
+weight: 14
+---
+
+As Hugo is a static site generator, the content produced is static and
+doesn’t interact with the users. The most common interaction people ask
+for is comment capability.
+
+Hugo ships with support for [Disqus](http://disqus.com), a third-party
+service that provides comment and community capabilities to website via
+JavaScript.
+
+Your theme may already support Disqus, but even it if doesn’t, it is easy
+to add.
+
+# Disqus Support
+
+## Adding Disqus to a template
+
+Hugo comes with all the code you would need to include load Disqus.
+Simply include the following line where you want your comments to appear:
+
+    {{ template "_internal/disqus.html" . }}
+
+
+## Configuring Disqus
+
+That template requires you to set a single value in your site config file, e.g. config.yaml.
+
+    disqusShortname = "XYW"
+
+Additionally, you can optionally set the following in the front matter
+for a given piece of content:
+
+ * **disqus_identifier**
+ * **disqus_title**
+ * **disqus_url**
+
+
+## Conditional Loading of Disqus Comments
+
+Users have noticed that enabling Disqus comments when running the Hugo web server on localhost causes the creation of unwanted discussions on the associated Disqus account. In order to prevent this, a slightly tweaked partial template is required. So, rather than using the built-in `"_internal/disqus.html"` template referenced above, create a template in your `partials` folder that looks like this:
+
+```javascript
+<div id="disqus_thread"></div>
+<script type="text/javascript">
+
+(function() {
+    // Don't ever inject Disqus on localhost--it creates unwanted
+    // discussions from 'localhost:1313' on your Disqus account...
+    if (window.location.hostname == "localhost")
+        return;
+
+    var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
+    var disqus_shortname = '{{ .Site.Params.disqusShortname }}';
+    dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
+    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
+})();
+</script>
+<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
+<a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
+```
+
+Notice that there is a simple `if` statement that detects when you are running on localhost and skips the initialization of the Disqus comment injection.
+
+Now, reference the partial template from your page template:
+
+    {{ partial "disqus.html" . }}
+
+
+# Alternatives
+
+A few alternatives exist to [Disqus](http://disqus.com):
+
+* [Intense Debate](http://intensedebate.com/)
+* [LiveFyre](http://livefyre.com/)
+* [Moot](http://muut.com)
+* [多说](http://duoshuo.com/) ([Duoshuo](http://duoshuo.com/), popular in China)
+* [Kaiju](http://github.com/spf13/kaiju)
+
+
+[Kaiju](http://github.com/spf13/kaiju) is an open-source project started
+by [spf13](http://spf13.com) (Hugo’s author) to bring easy and fast real
+time discussions to the web.
+
+Written using Go, Socket.io and MongoDB, it is very fast and easy to
+deploy.
+
+It is in early development but shows promise. If you have interest,
+please help by contributing whether via a pull request, an issue or even
+just a tweet. Everything helps.
+
diff --git a/content/extras/highlighting.md b/content/extras/highlighting.md
new file mode 100644
index 0000000..a90a724
--- /dev/null
+++ b/content/extras/highlighting.md
@@ -0,0 +1,102 @@
+---
+aliases:
+- /extras/highlight/
+date: 2013-07-01
+menu:
+  main:
+    parent: extras
+next: /extras/toc
+prev: /extras/shortcodes
+title: Syntax Highlighting
+weight: 50
+---
+
+Hugo provides the ability for you to highlight source code in two different
+ways &mdash; either pre-processed server side from your content, or to defer
+the processing to the client side, using a JavaScript library. The advantage of
+server side is that it doesn’t depend on a JavaScript library and consequently
+works very well when read from an RSS feed. The advantage of client side is that
+it doesn’t cost anything when building your site and some of the highlighting 
+scripts available cover more languages than Pygments does.
+
+For the pre-processed approach, Highlighting is performed by an external
+Python-based program called [Pygments](http://pygments.org) and is triggered
+via an embedded shortcode. If Pygments is absent from the path, it will
+silently simply pass the content along unhighlighted.
+
+## Server-side
+
+### Disclaimers
+
+ * **Warning:** Pygments is relatively slow. Expect much longer build times when using server-side highlighting.
+ * Languages available depends on your Pygments installation.
+ * Styles are inline in order to be supported in syndicated content when references
+to style sheets are not carried over.
+ * We have sought to have the simplest interface possible, which consequently
+limits configuration. An ambitious user is encouraged to extend the current
+functionality to offer more customization.
+* You can change appearance with config options `pygmentsstyle`(default
+`"monokai"`) and `pygmentsuseclasses`(defaut `false`).
+
+### Usage
+Highlight takes exactly one required parameter of language and requires a
+closing shortcode.
+
+### Example
+The example has an extra space between the “{{” and “%” characters to prevent rendering here.
+
+    {{ % highlight html %}}
+    <section id="main">
+      <div>
+       <h1 id="title">{{ .Title }}</h1>
+        {{ range .Data.Pages }}
+            {{ .Render "summary"}}
+        {{ end }}
+      </div>
+    </section>
+    {{ % /highlight %}}
+
+
+### Example Output
+
+    <span style="color: #f92672">&lt;section</span> <span style="color: #a6e22e">id=</span><span style="color: #e6db74">&quot;main&quot;</span><span style="color: #f92672">&gt;</span>
+      <span style="color: #f92672">&lt;div&gt;</span>
+       <span style="color: #f92672">&lt;h1</span> <span style="color: #a6e22e">id=</span><span style="color: #e6db74">&quot;title&quot;</span><span style="color: #f92672">&gt;</span>{{ .Title }}<span style="color: #f92672">&lt;/h1&gt;</span>
+        {{ range .Data.Pages }}
+            {{ .Render &quot;summary&quot;}}
+        {{ end }}
+      <span style="color: #f92672">&lt;/div&gt;</span>
+    <span style="color: #f92672">&lt;/section&gt;</span>
+
+## Client-side
+
+Alternatively, code highlighting can be done in client-side JavaScript.
+
+Client-side syntax highlighting is very simple to add. You'll need to pick
+a library and a corresponding theme. Some popular libraries are:
+
+- [Highlight.js]
+- [Rainbow]
+- [Syntax Highlighter]
+- [Google Prettify]
+
+This example uses the popular [Highlight.js] library, hosted by [Yandex], a
+popular Russian search engine.
+
+In your `./layouts/partials/` (or `./layouts/chrome/`) folder, depending on your specific theme, there
+will be a snippet that will be included in every generated HTML page, such
+as `header.html` or `header.includes.html`. Simply add:
+
+    <link rel="stylesheet" href="https://yandex.st/highlightjs/8.0/styles/default.min.css">
+    <script src="https://yandex.st/highlightjs/8.0/highlight.min.js"></script>
+    <script>hljs.initHighlightingOnLoad();</script>
+
+You can of course use your own copy of these files, typically in `./static/`.
+
+[Highlight.js]: http://highlightjs.org/
+[Rainbow]: http://craig.is/making/rainbows
+[Syntax Highlighter]: http://alexgorbatchev.com/SyntaxHighlighter/
+[Google Prettify]: https://code.google.com/p/google-code-prettify/
+[Yandex]: http://yandex.ru/
+
+Please see individual libraries documentation for how to implement the JavaScript-based libraries.
diff --git a/content/extras/livereload.md b/content/extras/livereload.md
new file mode 100644
index 0000000..aded2d0
--- /dev/null
+++ b/content/extras/livereload.md
@@ -0,0 +1,61 @@
+---
+date: 2014-05-26
+menu:
+  main:
+    parent: extras
+next: /extras/menus
+prev: /extras/comments
+title: Live Reload
+weight: 15
+---
+
+Hugo may not be the first static site generator to utilize live reload
+technology, but it’s the first to do it right.
+
+The combination of Hugo’s insane build speed and live reload make
+crafting your content pure joy. Virtually instantly after you hit save
+your rebuilt content will appear in your browser.
+
+## Using livereload
+
+Hugo comes with livereload built in. There are no additional packages to
+install. A common way to use hugo while developing a site is to have
+hugo run a server and watch for changes.
+
+    hugo server --watch
+
+This will run a full functioning web server while simultaneously
+watching your file system for additions, deletions or changes within
+your:
+
+ * static files
+ * content
+ * layouts
+ * current theme
+
+Whenever anything changes Hugo will rebuild the site, continue to serve
+the content and as soon as the build is finished it will tell the
+browser and silently reload the page. Because most hugo builds are so
+fast they are barely noticeable, you merely need to glance at your open
+browser and you will see the change already there.
+
+This means that keeping the site open on a second monitor (or another
+half of your current monitor), allows you to see exactly what your
+content looks like without even leaving your text editor.
+
+## Disabling livereload
+
+Live reload accomplishes this by injecting javascript into the pages it
+creates that creates a web socket client to the hugo web socket server.
+
+Awesome for development, but not something you would want to do in
+production. Since many people use `hugo server --watch` in production to
+instantly display any updated content, we’ve made it easy to disable the
+live reload functionality.
+
+    hugo server --watch --disableLiveReload
+
+
+
+
+
diff --git a/content/extras/menus.md b/content/extras/menus.md
new file mode 100644
index 0000000..57d87c0
--- /dev/null
+++ b/content/extras/menus.md
@@ -0,0 +1,178 @@
+---
+date: 2014-05-14T02:36:37Z
+menu:
+  main:
+    parent: extras
+next: /extras/permalinks
+prev: /extras/livereload
+title: Menus
+weight: 20
+---
+
+Hugo has a simple yet powerful menu system that permits content to be
+placed in menus with a good degree of control without a lot of work. 
+
+Some of the features of Hugo Menus:
+
+* Place content in one or many menus
+* Handle nested menus with unlimited depth
+* Create menu entries without being attached to any content
+* Distinguish active element (and active branch)
+
+## What is a menu?
+
+A menu is a named array of menu entries accessible on the site under
+`.Site.Menus` by name. For example, if I have a menu called `main`, I would
+access it via `.Site.Menus.main`.
+
+A menu entry has the following properties:
+
+* **Url**        string
+* **Name**       string
+* **Menu**       string
+* **Identifier** string
+* **Pre**        template.HTML
+* **Post**       template.HTML
+* **Weight**     int
+* **Parent**     string
+* **Children**   Menu
+
+And the following functions:
+
+* **HasChildren** bool
+
+Additionally there are some relevant functions available on the page:
+
+* **IsMenuCurrent** (menu string, menuEntry *MenuEntry ) bool
+* **HasMenuCurrent** (menu string, menuEntry *MenuEntry) bool
+
+
+## Adding content to menus
+
+Hugo supports a couple of different methods of adding a piece of content
+to the front matter.
+
+### Simple
+
+If all you need to do is add an entry to a menu, the simple form works
+well.
+
+**A single menu:**
+
+    ---
+    menu: "main"
+    ---
+
+**Multiple menus:**
+
+    ---
+    menu: ["main", "footer"]
+    ---
+
+
+### Advanced
+
+If more control is required, then the advanced approach gives you the
+control you want. All of the menu entry properties listed above are
+available.
+
+    ---
+    menu:
+      main:
+        parent: 'extras'
+        weight: 20
+    ---
+
+
+## Adding (non-content) entries to a menu
+
+You can also add entries to menus that aren’t attached to a piece of
+content. This takes place in the sitewide [config file](/overview/configuration).
+
+Here’s an example (in TOML):
+
+    [[menu.main]]
+        name = "about hugo"
+        pre = "<i class='fa fa-heart'></i>"
+        weight = -110
+        identifier = "about"
+    [[menu.main]]
+        name = "getting started"
+        pre = "<i class='fa fa-road'></i>"
+        weight = -100
+
+Here’s an example (in YAML):
+
+    ---
+    menu:
+      main:
+          - Name: "about hugo"
+            Pre: "<i class='fa fa-heart'></i>"
+            Weight: -110
+            Identifier: "about"
+          - Name: "getting started"
+            Pre: "<i class='fa fa-road'></i>"
+            Weight: -100
+    ---            
+
+## Nesting
+
+All nesting of content is done via the `parent` field.
+
+The parent of an entry should be the identifier of another entry.
+Identifier should be unique (within a menu).
+
+The following order is used to determine identity Identifier > Name >
+LinkTitle > Title. This means that the title will be used unless
+linktitle is present, etc. In practice Name and Identifier are never
+displayed and only used to structure relationships.
+
+In this example, the top level of the menu is defined in the config file
+and all content entries are attached to one of these entries via the
+`parent` field.
+
+## Rendering menus
+
+Hugo makes no assumptions about how your rendered HTML will be
+structured. Instead, it provides all of the functions you will need to be
+able to build your menu however you want. 
+
+
+The following is an example:
+
+    <!--sidebar start-->
+    <aside>
+        <div id="sidebar"  class="nav-collapse ">
+            <!-- sidebar menu start-->
+            <ul class="sidebar-menu">
+              {{ $currentNode := . }}
+              {{ range .Site.Menus.main }}
+                  {{ if .HasChildren }}
+
+                <li class="sub-menu{{if $currentNode.HasMenuCurrent "main" . }} active{{end}}">
+                <a href="javascript:;" class="">
+                    {{ .Pre }}
+                    <span>{{ .Name }}</span>
+                    <span class="menu-arrow arrow_carrot-right"></span>
+                </a>
+                <ul class="sub">
+                    {{ range .Children }}
+                    <li{{if $currentNode.IsMenuCurrent "main" . }} class="active"{{end}}><a href="{{.Url}}"> {{ .Name }} </a> </li>
+                    {{ end }}
+                </ul>
+              {{else}}
+                <li>
+                <a class="" href="{{.Url}}">
+                    {{ .Pre }}
+                    <span>{{ .Name }}</span>
+                </a>
+              {{end}}
+              </li>
+              {{end}}
+                <li> <a href="https://github.com/spf13/hugo/issues" target="blank">Questions and Issues</a> </li>
+                <li> <a href="#" target="blank">Edit this Page</a> </li>
+            </ul>
+            <!-- sidebar menu end-->
+        </div>
+    </aside>
+    <!--sidebar end-->
diff --git a/content/extras/permalinks.md b/content/extras/permalinks.md
new file mode 100644
index 0000000..ed95612
--- /dev/null
+++ b/content/extras/permalinks.md
@@ -0,0 +1,53 @@
+---
+aliases:
+- /doc/permalinks/
+date: 2013-11-18
+menu:
+  main:
+    parent: extras
+next: /extras/shortcodes
+notoc: true
+prev: /extras/menus
+title: Permalinks
+weight: 30
+---
+
+By default, content is laid out into the target `publishdir` (public)
+namespace matching its layout within the `contentdir` hierarchy.
+The `permalinks` site configuration option allows you to adjust this on a
+per-section basis.
+This will change where the files are written to and will change the page's
+internal "canonical" location, such that template references to
+`.RelPermalink` will honour the adjustments made as a result of the mappings
+in this option.
+
+For instance, if one of your sections is called `post`, and you want to adjust
+the canonical path to be hierarchical based on the year and month, then you
+might use:
+
+```yaml
+permalinks:
+  post: /:year/:month/:title/
+```
+
+Only the content under `post/` will be so rewritten.
+A file named `content/post/sample-entry` which contains a line
+`date: 2013-11-18T19:20:00-05:00` might end up with the rendered page
+appearing at `public/2013/11/sample-entry/index.html` and be reachable via
+the URL <http://yoursite.example.com/2013/11/sample-entry/>.
+
+The following is a list of values that can be used in a permalink definition.
+All references to time are dependent on the content's date.
+
+  * **:year** the 4-digit year
+  * **:month** the 2-digit month
+  * **:monthname** the name of the month
+  * **:day** the 2-digit day
+  * **:weekday** the 1-digit day of the week (Sunday = 0)
+  * **:weekdayname** the name of the day of the week
+  * **:yearday** the 1- to 3-digit day of the year
+  * **:section** the content's section
+  * **:title** the content's title
+  * **:slug** the content's slug (or title if no slug)
+  * **:filename** the content's filename (without extension)
+
diff --git a/content/extras/shortcodes.md b/content/extras/shortcodes.md
new file mode 100644
index 0000000..e1b72d3
--- /dev/null
+++ b/content/extras/shortcodes.md
@@ -0,0 +1,237 @@
+---
+aliases:
+- /doc/shortcodes/
+date: 2013-07-01
+menu:
+  main:
+    parent: extras
+next: /extras/highlighting
+prev: /extras/permalinks
+title: Shortcodes
+weight: 40
+---
+
+Hugo uses Markdown for its simple content format. However, there’s a lot
+of things that Markdown doesn’t support well.
+
+We are unwilling to accept being constrained by our simple format. Also
+unacceptable is writing raw HTML in our Markdown every time we want to include
+unsupported content such as a video. To do so is in complete opposition to the
+intent of using a bare bones format for our content and utilizing templates to
+apply styling for display.
+
+To avoid both of these limitations, Hugo created shortcodes.
+
+A shortcode is a simple snippet inside a content file that Hugo will render
+using a predefined template. Note that shortcodes will not work in template
+files---if you need a functionality like that in a template, you most likely
+want a [partial template](/templates/partial) instead.
+
+## Using a shortcode
+
+In your content files, a shortcode can be called by using '`{{% name parameters
+%}}`' respectively. Shortcodes are space delimited (parameters with spaces
+can be quoted).
+
+The first word is always the name of the shortcode. Parameters follow the name.
+The format for named parameters models that of HTML with the format
+`name="value"`. The current implementation only supports this exact format. Extra
+spaces or different quotation marks will not parse properly.
+
+Some shortcodes use or require closing shortcodes. Like HTML, the opening and closing
+shortcodes match (name only), the closing being prepended with a slash.
+
+Example of a paired shortcode:
+
+    {{ % highlight go %}} A bunch of code here {{ % /highlight %}}
+
+
+## Hugo Shortcodes
+
+Hugo ships with a set of predefined shortcodes.
+
+### highlight
+
+This shortcode will convert the source code provided into syntax highlighted
+HTML. Read more on [highlighting](/extras/highlighting).
+
+#### Usage
+`highlight` takes exactly one required parameter of _language_ and requires a
+closing shortcode.
+
+#### Example
+The example has an extra space between the “`{{`” and “`%`” characters to prevent rendering here.
+
+    {{ % highlight html %}}
+    <section id="main">
+      <div>
+       <h1 id="title">{{ .Title }}</h1>
+        {{ range .Data.Pages }}
+            {{ .Render "summary"}}
+        {{ end }}
+      </div>
+    </section>
+    {{ % /highlight %}}
+
+
+#### Example Output
+
+    <span style="color: #f92672">&lt;section</span> <span style="color: #a6e22e">id=</span><span style="color: #e6db74">&quot;main&quot;</span><span style="color: #f92672">&gt;</span>
+      <span style="color: #f92672">&lt;div&gt;</span>
+       <span style="color: #f92672">&lt;h1</span> <span style="color: #a6e22e">id=</span><span style="color: #e6db74">&quot;title&quot;</span><span style="color: #f92672">&gt;</span>{{ .Title }}<span style="color: #f92672">&lt;/h1&gt;</span>
+        {{ range .Data.Pages }}
+            {{ .Render &quot;summary&quot;}}
+        {{ end }}
+      <span style="color: #f92672">&lt;/div&gt;</span>
+    <span style="color: #f92672">&lt;/section&gt;</span>
+
+### figure
+`figure` is simply an extension of the image capabilities present with Markdown.
+`figure` provides the ability to add captions, CSS classes, alt text, links etc.
+
+#### Usage
+
+`figure` can use the following parameters:
+
+ * src
+ * link
+ * title
+ * caption
+ * attr (attribution)
+ * attrlink
+ * alt
+
+#### Example
+*Example has an extra space so Hugo doesn’t actually render it*.
+
+    {{ % figure src="/media/spf13.jpg" title="Steve Francia" %}}
+
+#### Example output
+
+    <figure>
+        <img src="/media/spf13.jpg"  />
+        <figcaption>
+            <h4>Steve Francia</h4>
+        </figcaption>
+    </figure>
+
+## Creating your own shortcodes
+
+To create a shortcode, place a template in the layouts/shortcodes directory. The
+template name will be the name of the shortcode.
+
+In creating a shortcode, you can choose if the shortcode will use _positional
+parameters_ or _named parameters_ (but not both). A good rule of thumb is that if a
+shortcode has a single required value in the case of the `youtube` example below,
+then positional works very well. For more complex layouts with optional
+parameters, named parameters work best.
+
+**Inside the template**
+
+To access a parameter by position, the `.Get` method can be used:
+
+    {{ .Get 0 }}
+
+To access a parameter by name, the `.Get` method should be utilized:
+
+    {{ .Get "class" }}
+
+`with` is great when the output depends on a parameter being set:
+
+    {{ with .Get "class"}} class="{{.}}"{{ end }}
+
+`.Get` can also be used to check if a parameter has been provided. This is
+most helpful when the condition depends on either one value or another...
+or both:
+
+    {{ or .Get "title" | .Get "alt" | if }} alt="{{ with .Get "alt"}}{{.}}{{else}}{{.Get "title"}}{{end}}"{{ end }}
+
+If a closing shortcode is used, the variable `.Inner` will be populated with all
+of the content between the opening and closing shortcodes. If a closing
+shortcode is required, you can check the length of `.Inner` and provide a warning
+to the user.
+
+The variable `.Params` contains the list of parameters in case you need to do more complicated things than `.Get`.
+
+You can also use the variable `.Page` to access all the normal [Page Variables](/templates/variables/). 
+
+## Single Positional Example: youtube
+
+    {{% youtube 09jf3ow9jfw %}}
+
+Would load the template /layouts/shortcodes/youtube.html
+
+    <div class="embed video-player">
+    <iframe class="youtube-player" type="text/html" width="640" height="385" src="http://www.youtube.com/embed/{{ index .Params 0 }}" allowfullscreen frameborder="0">
+    </iframe>
+    </div>
+
+This would be rendered as:
+
+    <div class="embed video-player">
+    <iframe class="youtube-player" type="text/html"
+        width="640" height="385"
+        src="http://www.youtube.com/embed/09jf3ow9jfw"
+        allowfullscreen frameborder="0">
+    </iframe>
+    </div>
+
+## Single Named Example: image with caption
+*Example has an extra space so Hugo doesn’t actually render it*
+
+    {{ % img src="/media/spf13.jpg" title="Steve Francia" %}}
+
+Would load the template /layouts/shortcodes/img.html
+
+    <!-- image -->
+    <figure {{ with .Get "class" }}class="{{.}}"{{ end }}>
+        {{ with .Get "link"}}<a href="{{.}}">{{ end }}
+            <img src="{{ .Get "src" }}" {{ if or (.Get "alt") (.Get "caption") }}alt="{{ with .Get "alt"}}{{.}}{{else}}{{ .Get "caption" }}{{ end }}"{{ end }} />
+        {{ if .Get "link"}}</a>{{ end }}
+        {{ if or (or (.Get "title") (.Get "caption")) (.Get "attr")}}
+        <figcaption>{{ if isset .Params "title" }}
+            <h4>{{ .Get "title" }}</h4>{{ end }}
+            {{ if or (.Get "caption") (.Get "attr")}}<p>
+            {{ .Get "caption" }}
+            {{ with .Get "attrlink"}}<a href="{{.}}"> {{ end }}
+                {{ .Get "attr" }}
+            {{ if .Get "attrlink"}}</a> {{ end }}
+            </p> {{ end }}
+        </figcaption>
+        {{ end }}
+    </figure>
+    <!-- image -->
+
+Would be rendered as:
+
+    <figure >
+        <img src="/media/spf13.jpg"  />
+        <figcaption>
+            <h4>Steve Francia</h4>
+        </figcaption>
+    </figure>
+
+## Paired Example: Highlight
+*Hugo already ships with the `highlight` shortcode*
+
+*Example has an extra space so Hugo doesn’t actually render it*.
+
+    <html>
+        <body> This HTML </body>
+    </html>
+
+The template for this utilizes the following code (already include in Hugo)
+
+    {{ .Get 0 | highlight .Inner  }}
+
+And will be rendered as:
+
+    <div class="highlight" style="background: #272822"><pre style="line-height: 125%"><span style="color: #f92672">&lt;html&gt;</span>
+        <span style="color: #f92672">&lt;body&gt;</span> This HTML <span style="color: #f92672">&lt;/body&gt;</span>
+    <span style="color: #f92672">&lt;/html&gt;</span>
+    </pre></div>
+
+Please notice that this template makes use of a Hugo-specific template function
+called `highlight` which uses Pygments to add the highlighting code.
+
+More shortcode examples can be found at [spf13.com](https://github.com/spf13/spf13.com/tree/master/layouts/shortcodes).
diff --git a/content/extras/toc.md b/content/extras/toc.md
new file mode 100644
index 0000000..68376e1
--- /dev/null
+++ b/content/extras/toc.md
@@ -0,0 +1,37 @@
+---
+date: 2013-07-09
+menu:
+  main:
+    parent: extras
+next: /extras/urls
+prev: /extras/highlighting
+title: Table of Contents
+weight: 60
+---
+
+Hugo will automatically parse the Markdown for your content and create
+a Table of Contents you can use to guide readers to the sections within
+your content.
+
+## Usage
+
+Simply create content like you normally would with the appropriate
+headers.
+
+Hugo will take this Markdown and create a table of contents stored in the
+[content variable](/layout/variables) `.TableOfContents`
+
+
+## Template Example
+
+This is example code of a [single.html template](/layout/content).
+
+    {{ partial "header.html" . }}
+        <div id="toc" class="well col-md-4 col-sm-6">
+        {{ .TableOfContents }}
+        </div>
+        <h1>{{ .Title }}</h1>
+        {{ .Content }}
+    {{ partial "footer.html" . }}
+
+
diff --git a/content/extras/urls.md b/content/extras/urls.md
new file mode 100644
index 0000000..7bfaf33
--- /dev/null
+++ b/content/extras/urls.md
@@ -0,0 +1,45 @@
+---
+aliases:
+- /doc/urls/
+date: 2014-01-03
+menu:
+  main:
+    parent: extras
+next: /community/mailing-list
+notoc: true
+prev: /extras/toc
+title: URLs
+weight: 70
+---
+
+## Pretty URLs
+
+By default Hugo will create content with 'pretty' URLs. For example
+content created at /content/extras/urls.md will be rendered at
+/content/extras/urls/index.html and accessible at /content/extras/urls. No
+no standard server side configuration is required for these pretty urls to
+work.
+
+If you would like to have ugly URLs, you are in luck. Hugo supports the
+ability to create your entire site with ugly URLs. Simply use the
+`--uglyUrls=true` flag on the command line.
+
+If you want a specific piece of content to have an exact URL, you can
+specify this in the front matter under the url key. See [Content
+Organization](/content/organization/) for more details. 
+
+## Canonicalization
+
+By default, all relative URLs encountered in the input will be canonicalized
+using `baseurl`, so that a link `/css/foo.css` becomes
+`http://yoursite.example.com/css/foo.css`.
+
+Setting `canonifyurls` to `false` will prevent this canonicalization.
+
+Benefits of canonicalization include fixing all URLs to be absolute, which may
+aid with some parsing tasks.  Note though that all real browsers handle this
+client-side without issues.
+
+Benefits of non-canonicalization include being able to have resource inclusion
+be scheme-relative, so that http vs https can be decided based on how this
+page was retrieved.