diff --git a/docs/content/extras/builders.md b/docs/content/extras/builders.md index ce6854def..8d59a93aa 100644 --- a/docs/content/extras/builders.md +++ b/docs/content/extras/builders.md @@ -7,7 +7,7 @@ menu: next: /extras/comments prev: /extras/aliases title: Hugo Builders -weight: 12 +weight: 20 --- Hugo provides the functionality to quickly get a site, theme or page diff --git a/docs/content/extras/comments.md b/docs/content/extras/comments.md index c11c2eceb..241bf5dc4 100644 --- a/docs/content/extras/comments.md +++ b/docs/content/extras/comments.md @@ -4,10 +4,10 @@ linktitle: Comments menu: main: parent: extras -next: /extras/livereload +next: /extras/crossreferences prev: /extras/builders title: Comments in Hugo -weight: 14 +weight: 30 --- As Hugo is a static site generator, the content produced is static and diff --git a/docs/content/extras/crossreferences.md b/docs/content/extras/crossreferences.md new file mode 100644 index 000000000..19a3a9526 --- /dev/null +++ b/docs/content/extras/crossreferences.md @@ -0,0 +1,150 @@ +--- +date: 2014-11-25 +menu: + main: + parent: extras +next: /extras/livereload +prev: /extras/comments +title: Cross-References +weight: 40 +--- + +Hugo makes it easy to link documents together with the `ref` and `relref` shortcodes. These shortcodes are also used to safely provide links to headings inside of your content, whether across documents or within a document. The only difference between `ref` and `relref` is whether the resulting URL is absolute (`http://1.com/about/`) or relative (`/about/`). + +## Using `ref` and `relref` + + {{}} + {{}} + {{}} + {{}} + {{}} + {{}} + +The single parameter to `ref` is a string with a content _document name_ (`about.md`), an in-document _anchor_ (`#who`), or both (`about.md#who`). + +### Document Names + +The _document name_ is the name of a document including the format extension; this may be just the filename, or the relative path from the `content/` directory. With a document `content/blog/post.md`, either format will produce the same result. + + {{}} ⇒ `/blog/post/` + {{}} ⇒ `/blog/post/` + +If you have multiple sections with the same filename, you should only use the relative path format, because the behaviour is _undefined_. So, if I also have a document `link/post.md`, the output of `ref` is unknown for `post.md`. + + {{}} ⇒ `/blog/post/` + {{}} ⇒ `/blog/post/` (maybe) + {{}} ⇒ `/link/post/` (maybe) + {{}} ⇒ `/link/post/` + +A relative document name must *not* begin with a slash (`/`). + + {{}} ⇒ `""` + +### Anchors + +When an _anchor_ is provided by itself, the current page’s unique identifier will be appended; when an _anchor_ is provided with a document name, the found page's unique identifier will be appended. + + {{}} ⇒ `#who:9decaf7` + {{}} ⇒ `/blog/post/#who:badcafe` + +More information about document unique identifiers and headings can be found [below]({{< ref "#hugo-heading-anchors" >}}). + +### Examples + +* `{{}}` ⇒ `http://1.com/blog/post/` +* `{{}}` ⇒ `http://1.com/blog/post/#tldr:caffebad` +* `{{}}` ⇒ `/blog/post/` +* `{{}}` ⇒ `/blog/post/#tldr:caffebad` +* `{{}}` ⇒ `#tldr:badcaffe` +* `{{}}` ⇒ `#tldr:badcaffe` + +## Hugo Heading Anchors + +When using Markdown document types, Hugo generates heading anchors automatically. The generated anchor for this section is `hugo-heading-anchors`. Because the heading anchors are generated automatically, Hugo takes some effort to ensure that heading anchors are unique both inside a document and across the entire site. + +Ensuring heading uniqueness across the site is accomplished with a unique identifier for each document based on its path. Unless a document is renamed or moved between sections *in the filesystem*, the unique identifier for the document will not change: `blog/post.md` will always have a unique identifier of `81df004c333b392d34a49fd3a91ba720`. + +`ref` and `relref` were added so you can make these reference links without having to know the document’s unique identifier. (The links in document tables of contents are automatically up-to-date with this value.) + + {{}} + /extras/crossreferences/#hugo-heading-anchors:77cd9ea530577debf4ce0f28c8dca242 + +> What follows is a deeper discussion of *why* and *how* Hugo generates heading anchors. It is not necessary to know this to use `ref` and `relref`, but it may be useful in understanding how some anchors may not match your expectations. + +### How to Generate a Heading Anchor + +Convert the text of the heading to lowercase. + + Hugo: A Fast & Modern Static Web Engine + hugo: a fast & modern static web engine + +Replace anything that isn't an ASCII letter (`a-z`) or number (`0-9`) with a dash (`-`). + + hugo: a fast & modern static web engine + hugo--a-fast---modern-static-web-engine + +Get rid of extra dashes. + + hugo--a-fast---modern-static-web-engine + hugo-a-fast-modern-static-web-engine + +You have just converting the text of a heading to a suitable anchor. If your document has unique heading text, all of the anchors will be unique, too. + +#### Specifying Heading Anchors + +You can also tell Hugo to use a particular heading anchor. + + # Hugo: A Fast & Modern Static Web Engine {#hugo-main} + +Hugo will use `hugo-main` as the heading anchor. + +### What About Duplicate Heading Anchors? + +The technique outlined above works well enough, but some documents have headings with identical text, like the [shortcodes](/extras/shortcodes/) page—there are three headings with the text "Example". You can specify heading anchors manually: + + ### Example {#example-1} + ### Example {#example-2} + ### Example {#example-3} + +It’s easy to forget to do that all the time, and Hugo is smart enough to do it for you. It just adds `-x` to the end of each heading it has already seen. + +* `### Example` ⇒ `example` +* `### Example` ⇒ `example-1` +* `### Example` ⇒ `example-2` + +Sometimes it's a little harder, but Hugo can recover from those, too, by adding more suffixes: + +* `# Heading` ⇒ `heading` +* `# Heading 1` ⇒ `heading-1` +* `# Heading` ⇒ `heading-1-1` +* `# Heading` ⇒ `heading-1-2` +* `# Heading 1` ⇒ `heading-2` + +This can even affect specified heading anchors that come after a generated heading anchor. + +* `# My Heading` ⇒ `my-heading` +* `# My Heading {#my-heading}` ⇒ `my-heading-1` + +> This particular collision and override is unfortunate, but unavoidable because Hugo processes each heading for collision detection as it sees it during conversion. + +This technique works well for documents rendered on individual pages, like blog posts. What about on Hugo list pages? + +### Unique Heading Anchors in Lists + +Hugo converts each document from Markdown independently. it doesn’t know that `blog/post.md` has an "Example" heading that will collide with the "Example" heading in `blog/post2.md`. Even if it did know this, the addition of `blog/post3.md` should not cause the anchors for the headings in the other blog posts to change. + +Enter the document’s unique identifier. To prevent this sort of collision on +list pages, Hugo always appends the document's to a generated heading anchor. +So, the "Example" heading in `blog/post.md` actually turns into +`#example:81df004…`, and the "Example" heading in `blog/post2.md` actually +turns into `#example:8cf1599…`. All you have to know is the heading anchor that +was generated, not the document identifier; `ref` and `relref` take care of the +rest for you. + + Post Example + Post Example + + [Post Two Example]({{}}) + Post Two Example + +Now you know. diff --git a/docs/content/extras/highlighting.md b/docs/content/extras/highlighting.md index ac32abc7d..fbc6b2ef5 100644 --- a/docs/content/extras/highlighting.md +++ b/docs/content/extras/highlighting.md @@ -8,7 +8,7 @@ menu: next: /extras/toc prev: /extras/shortcodes title: Syntax Highlighting -weight: 50 +weight: 90 --- Hugo provides the ability for you to highlight source code in two different @@ -43,20 +43,20 @@ 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. Since this example is a code block, we use GitHub flavored Markdown's code fences, ```, to delimit the code. If you are using standard Markdown, instead of the code fence delimiters, each line must be preceeded by 4 spaces to identify each line as a line of code. Not doing either will result in the text being rendered as HTML. This will prevent Pygments highlighting from working. +Since this example is a code block, we use Github flavored Markdown's code fences, ```, to delimit the code. If you are using standard Markdown, instead of the code fence delimiters, each line must be preceeded by 4 spaces to identify each line as a line of code. Not doing either will result in the text being rendered as HTML. This will prevent Pygment highlighting from working. - ``` - {{ % highlight html %}} -
-
-

{{ .Title }}

- {{ range .Data.Pages }} - {{ .Render "summary"}} - {{ end }} -
-
- {{ % /highlight %}} - ``` +``` +{{%/* highlight html */%}} +
+
+

{{ .Title }}

+ {{ range .Data.Pages }} + {{ .Render "summary"}} + {{ end }} +
+
+{{%/* /highlight */%}} +``` ### Example Output diff --git a/docs/content/extras/livereload.md b/docs/content/extras/livereload.md index aded2d093..a32614f58 100644 --- a/docs/content/extras/livereload.md +++ b/docs/content/extras/livereload.md @@ -4,9 +4,9 @@ menu: main: parent: extras next: /extras/menus -prev: /extras/comments +prev: /extras/crossreferences title: Live Reload -weight: 15 +weight: 50 --- Hugo may not be the first static site generator to utilize live reload diff --git a/docs/content/extras/menus.md b/docs/content/extras/menus.md index 57d87c0c1..5362903a7 100644 --- a/docs/content/extras/menus.md +++ b/docs/content/extras/menus.md @@ -6,7 +6,7 @@ menu: next: /extras/permalinks prev: /extras/livereload title: Menus -weight: 20 +weight: 60 --- Hugo has a simple yet powerful menu system that permits content to be diff --git a/docs/content/extras/permalinks.md b/docs/content/extras/permalinks.md index ed95612e0..2bac230d5 100644 --- a/docs/content/extras/permalinks.md +++ b/docs/content/extras/permalinks.md @@ -9,7 +9,7 @@ next: /extras/shortcodes notoc: true prev: /extras/menus title: Permalinks -weight: 30 +weight: 70 --- By default, content is laid out into the target `publishdir` (public) diff --git a/docs/content/extras/shortcodes.md b/docs/content/extras/shortcodes.md index 5e2d2da87..44eadcc77 100644 --- a/docs/content/extras/shortcodes.md +++ b/docs/content/extras/shortcodes.md @@ -8,7 +8,7 @@ menu: next: /extras/highlighting prev: /extras/permalinks title: Shortcodes -weight: 40 +weight: 80 --- Hugo uses Markdown for its simple content format. However, there’s a lot @@ -129,6 +129,33 @@ closing shortcode. +### ref, relref + +These shortcodes will look up the pages by their relative path (e.g., +`blog/post.md`) or their logical name (`post.md`) and return the permalink +(`ref`) or relative permalink (`relref`) for the found page. + +`ref` and `relref` also make it possible to make fragmentary links that work +for the header links generated by Hugo. + +Read more on [cross-references]({{% ref "extras/crossreferences.md" %}}). + +#### Usage + +`ref` and `relref` take exactly one required parameter of _reference_. + +#### Example + + [Neat]({{}}) + [Who]({{}}) + +#### Example Output + +Assuming that standard Hugo pretty URLs are turned on. + + Neat + Who + ## Creating your own shortcodes To create a shortcode, place a template in the layouts/shortcodes directory. The diff --git a/docs/content/extras/toc.md b/docs/content/extras/toc.md index 68376e117..7cd0f30f7 100644 --- a/docs/content/extras/toc.md +++ b/docs/content/extras/toc.md @@ -6,7 +6,7 @@ menu: next: /extras/urls prev: /extras/highlighting title: Table of Contents -weight: 60 +weight: 100 --- Hugo will automatically parse the Markdown for your content and create diff --git a/docs/content/extras/urls.md b/docs/content/extras/urls.md index 7bfaf3325..a3505bf77 100644 --- a/docs/content/extras/urls.md +++ b/docs/content/extras/urls.md @@ -9,7 +9,7 @@ next: /community/mailing-list notoc: true prev: /extras/toc title: URLs -weight: 70 +weight: 110 --- ## Pretty URLs diff --git a/docs/content/templates/functions.md b/docs/content/templates/functions.md index 30b4c4f1e..c1a0eb64b 100644 --- a/docs/content/templates/functions.md +++ b/docs/content/templates/functions.md @@ -174,4 +174,10 @@ e.g. `{{title "BatMan"}}` → "Batman" ### highlight Take a string of code and a language, uses Pygments to return the syntax -highlighted code in HTML. Used in the [highlight shortcode](/extras/highlighting). +highlighted code in HTML. Used in the [highlight +shortcode](/extras/highlighting). + +### ref, relref +Looks up a content page by relative path or logical name to return the permalink (`ref`) or relative permalink (`relref`). Requires a Node or Page object (usually satisfied with `.`). Used in the [`ref` and `relref` shortcodes]({{% ref "extras/crossreferences.md" %}}). + +e.g. {{ ref . "about.md" }} diff --git a/docs/content/templates/variables.md b/docs/content/templates/variables.md index 0e8ad729b..054adfba3 100644 --- a/docs/content/templates/variables.md +++ b/docs/content/templates/variables.md @@ -29,23 +29,23 @@ matter, content or derived from file location. **.Keywords** The meta keywords for this content.
**.Date** The date the content is associated with.
**.PublishDate** The date the content is published on.
-**.Type** The content [type](/content/types/) (e.g. post)
-**.Section** The [section](/content/sections/) this content belongs to
+**.Type** The content [type](/content/types/) (e.g. post).
+**.Section** The [section](/content/sections/) this content belongs to.
**.Permalink** The Permanent link for this page.
**.RelPermalink** The Relative permanent link for this page.
-**.LinkTitle** Access when creating links to this content. Will use linktitle if set in front-matter, else title
-**.Taxonomies** These will use the field name of the plural form of the index (see tags and categories above)
-**.RSSLink** Link to the indexes' rss link
-**.TableOfContents** The rendered table of contents for this content
-**.Prev** Pointer to the previous content (based on pub date)
-**.Next** Pointer to the following content (based on pub date)
+**.LinkTitle** Access when creating links to this content. Will use linktitle if set in front-matter, else title.
+**.Taxonomies** These will use the field name of the plural form of the index (see tags and categories above).
+**.RSSLink** Link to the indexes' rss link.
+**.TableOfContents** The rendered table of contents for this content.
+**.Prev** Pointer to the previous content (based on pub date).
+**.Next** Pointer to the following content (based on pub date).
**.FuzzyWordCount** The approximate number of words in the content.
**.WordCount** The number of words in the content.
**.ReadingTime** The estimated time it takes to read the content in minutes.
**.Weight** Assigned weight (in the front matter) to this content, used in sorting.
**.IsNode** Always false for pages.
**.IsPage** Always true for page.
-**.Site** See site variables below
+**.Site** See site variables below.
## Page Params @@ -65,6 +65,8 @@ includes indexes, lists and the homepage. **.Date** The date the content is published on.
**.Permalink** The Permanent link for this node
**.Url** The relative url for this node.
+**.Ref(ref)** Returns the permalink for `ref`. See [cross-references]({{% ref "extras/crossreferences.md" %}}). Does not handle in-page fragments correctly.
+**.RelRef(ref)** Returns the relative permalink for `ref`. See [cross-references]({{% ref "extras/crossreferences.md" %}}). Does not handle in-page fragments correctly.
**.RSSLink** Link to the indexes' rss link
**.Data** The data specific to this type of node.
**.IsNode** Always true for nodes.
diff --git a/docs/content/tutorials/migrate-from-jekyll.md b/docs/content/tutorials/migrate-from-jekyll.md index 86c28fd1b..a893c4a3d 100644 --- a/docs/content/tutorials/migrate-from-jekyll.md +++ b/docs/content/tutorials/migrate-from-jekyll.md @@ -141,7 +141,7 @@ I simply changed: to this (this example uses a slightly extended version named `fig`, different than the built-in `figure`): - {{}} + {{%/* fig class="full" src="http://farm5.staticflickr.com/4136/4829260124_57712e570a_o_d.jpg" title="One of my favorite touristy-type photos. I secretly waited for the good light while we were having fun and took this. Only regret: a stupid pole in the top-left corner of the frame I had to clumsily get rid of at post-processing." link="http://www.flickr.com/photos/alexnormand/4829260124/in/set-72157624547713078/" */%}} As a bonus, the shortcode named parameters are, arguably, more readable.