blogs/hugo
1
0
Fork 0
mirror of https://github.com/gohugoio/hugo.git synced 2026-08-25 07:48:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix order of built in shortcodes

Browse Source
This commit is contained in:
Ryan Watters
2017-02-17 19:59:28 -06:00
parent 605508d43d
commit e9c7e0549a
10 changed files with 131 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files
config.toml
+1 -1
View File
@@ -74,7 +74,7 @@ watch = true
## Setting this to true will add a "noindex" to *every* page on the site
removefromexternalsearch = true
## This is used when the BaseURL does not need to modified (eg, in share links)
siteaddress = "https://gohugo.io"
siteaddress = "https://hugodocsconcept.netlify.com"
## Gh repo for site footer (include trailing slash)
ghrepo = "https://github.com/spf13/hugo/"
## GitHub Docs Repository Base URL (include trailing slash)
content/content-management/shortcodes.md
+96 -82
View File
@@ -65,6 +65,60 @@ The `<` character indicates that the shortcode's inner content doesn't need any
Hugo ships with a set of predefined shortcodes.
### `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.
`figure` can use the following named parameters:
* src
* link
* title
* caption
* class
* attr (attribution)
* attrlink
* alt
#### Example `figure` Input
{{% input "figure-input-example.md" %}}
```markdown
{{</* figure src="/media/spf13.jpg" title="Steve Francia" */>}}
```
{{% /input %}}
#### Example `figure` Output
{{% output "figure-output-example.html" %}}
```html
<figure>
<img src="/media/spf13.jpg" />
<figcaption>
<h4>Steve Francia</h4>
</figcaption>
</figure>
```
{{% /output %}}
### `gist`
Including code snippets with GitHub gists while writing a tutorial is common situation bloggers face. With a given URL of the gist; e.g.:
* https://gist.github.com/spf13/7896402
pass the owner and the ID of the gist to the shortcode:
```
{{</* gist spf13 7896402 */>}}
```
If the gist contains several files and you want to quote just one of them, you can pass the filename (quoted) as an optional third argument:
```golang
{{</* gist spf13 7896402 "img.html" */>}}
```
### `highlight`
This shortcode will convert the source code provided into syntax highlighted
@@ -102,35 +156,25 @@ HTML. Read more on [highlighting](/extras/highlighting/). `highlight` takes exac
```
{{% /output %}}
### `figure`
### `instagram`
`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.
If you'd like to embed a photo from [Instagram][], all you need is photo ID from the URL:
`figure` can use the following named parameters:
* src
* link
* title
* caption
* class
* attr (attribution)
* attrlink
* alt
#### Example `figure` Input
```markdown
{{</* figure src="/media/spf13.jpg" title="Steve Francia" */>}}
```html
https://www.instagram.com/p/BMokmydjG-M/
```
#### Example `figure` Output
Pass it to the shortcode:
<figure>
<img src="/media/spf13.jpg" />
<figcaption>
<h4>Steve Francia</h4>
</figcaption>
</figure>
```golang
{{</* instagram BMokmydjG-M */>}}
```
You also have the option to hide the caption:
```golang
{{</* instagram BMokmydjG-M hidecaption */>}}
```
### `ref` and `relref`
@@ -160,6 +204,22 @@ Assuming that standard Hugo pretty URLs are turned on.
<a href="/about/#who:c28654c202e73453784cfd2c5ab356c0">Who</a>
```
### `speakerdeck`
To embed slides from [Speaker Deck][], click on "&lt;&#8239;/&gt;&nbsp;Embed" (under Share right next to the template on Speaker Deck) and copy the URL, e.g.:
```html
<script async class="speakerdeck-embed" data-id="4e8126e72d853c0060001f97" data-ratio="1.33333333333333" src="//speakerdeck.com/assets/embed.js"></script>
```
Extract the value from the field `data-id` and pass it to the shortcode:
{{% input "speakerdeck-example-input.md" %}}
```markdown
{{</* speakerdeck 4e8126e72d853c0060001f97 */>}}
```
{{% /input %}}
### `tweet`
You want to include a single tweet into your blog post? Everything you need is the URL of the tweet. For example, let's say you want to include the following tweet from `https://twitter.com/spf13/status/666616452582129664`. Pass the tweet's ID from the URL as parameter to the shortcode as shown below:
@@ -170,6 +230,18 @@ You want to include a single tweet into your blog post? Everything you need is t
{{</* tweet 666616452582129664 */>}}
```
### `vimeo`
Adding a video from [Vimeo][] is equivalent to the YouTube shortcode above. Extract the ID from the URL, e.g.:
* https://vimeo.com/channels/staffpicks/146022717
and pass it to the shortcode:
```golang
{{</* vimeo 146022717 */>}}
```
### `youtube`
This shortcode embeds a responsive video player for [YouTube videos][]. Only the ID of the video is required, e.g.:
@@ -188,64 +260,6 @@ Furthermore, you can autostart the embedded video by setting the `autostart` par
{{</* youtube id="w7Ft2ymGmfc" autoplay="true" */>}}
```
### `vimeo`
Adding a video from [Vimeo][] is equivalent to the YouTube shortcode above. Extract the ID from the URL, e.g.:
* https://vimeo.com/channels/staffpicks/146022717
and pass it to the shortcode:
```golang
{{</* vimeo 146022717 */>}}
```
### `gist`
Including code snippets with GitHub gists while writing a tutorial is common situation bloggers face. With a given URL of the gist, e.g.:
* https://gist.github.com/spf13/7896402
pass the owner and the ID of the gist to the shortcode:
```
{{</* gist spf13 7896402 */>}}
```
If the gist contains several files and you want to quote just one of them, you can pass the filename (quoted) as an optional third argument:
```golang
{{</* gist spf13 7896402 "img.html" */>}}
```
### `speakerdeck`
To embed slides from [Speaker Deck][], click on "&lt;&#8239;/&gt;&nbsp;Embed" (under Share right next to the template on Speaker Deck) and copy the URL, e.g.:
<script async class="speakerdeck-embed" data-id="4e8126e72d853c0060001f97" data-ratio="1.33333333333333" src="//speakerdeck.com/assets/embed.js"></script>
Extract the value from the field `data-id` and pass it to the shortcode:
{{</* speakerdeck 4e8126e72d853c0060001f97 */>}}
### `instagram`
If you'd like to embed a photo from [Instagram][], all you need is photo ID from the URL, e. g.:
* https://www.instagram.com/p/BMokmydjG-M/
Pass it to the shortcode:
```golang
{{</* instagram BMokmydjG-M */>}}
```
Optionally, hide caption:
```golang
{{</* instagram BMokmydjG-M hidecaption */>}}
```
## Creating your own shortcodes
To create a shortcode, place a template in the `layouts/shortcodes` directory of your [source organization][]. 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_, or _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. Allowing both types of parameters is useful for complex layouts where you want to set default values that can be overridden.
static/css/style.min.css
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
static/js/table-of-contents.js
-3
View File
@@ -50,9 +50,6 @@ $(document).ready(function() {
menuItems.parent().removeClass("active").end().filter("[href='#" + id + "']").parent().addClass("active");
history.replaceState({}, "", menuItems.filter("[href='#" + id + "']").attr("href"));
}
// if (isTop) {
// window.location.hash = "";
// }
if (isBottom) {
menuItems.parent().removeClass('active');
if (menuItems.last().parent().attr('class') !== 'active') {
themes/hugodocs/layouts/_default/section.html
+1 -1
View File
@@ -3,7 +3,7 @@
<main class="main">
<header class="content-header">
{{partial "breadcrumb.html" . }}
<h1 class="page-title"><img src="{{.Site.BaseURL}}images/{{.Section}}.svg" alt="Icon for the {{.Section}} section.">{{with .LinkTitle}}{{ . |markdownify}}{{else}}{{ .Title | markdownify }}{{end}}</h1>
<h1 class="page-title {{.Section}}" id="{{with .LinkTitle}}{{. | urlize}}{{else}}{{ .Title | urlize }}{{end}}">{{with .LinkTitle}}{{.}}{{else}}{{ .Title | markdownify }}{{end}}</h1>
{{partial "content-header-links.html" . }}
{{partial "tags.html" . }}
</header>
themes/hugodocs/layouts/_default/single.html
+1 -1
View File
@@ -4,7 +4,7 @@
<main class="main">
<header class="content-header">
{{partial "breadcrumb.html" . }}
<h1 class="page-title {{.Section}}">{{with .LinkTitle}}{{.}}{{else}}{{ .Title | markdownify }}{{end}}</h1>
<h1 class="page-title {{.Section}}" id="{{with .LinkTitle}}{{. | urlize}}{{else}}{{ .Title | urlize }}{{end}}">{{with .LinkTitle}}{{.}}{{else}}{{ .Title | markdownify }}{{end}}</h1>
{{partial "content-header-links.html" . }}
{{partial "tags.html" . }}
</header>
themes/hugodocs/layouts/partials/head/metadata-prefetch.html
+1 -1
View File
@@ -1,4 +1,4 @@
<link rel="dns-prefetch" href="{{ .Site.Params.siteaddress }}">
<link rel="dns-prefetch" href="{{ .Site.BaseURL }}">
<!-- Preconnect API. For browser compatibility, check http://caniuse.com/#feat=link-rel-preconnect -->
<link rel="preconnect" href="{{ .Site.BaseURL }}">
<link rel="canonical" href="{{ .Permalink }}">
themes/hugodocs/layouts/partials/table-of-contents.html
+2 -2
View File
@@ -1,7 +1,7 @@
{{if ne .Params.toc false}}
<aside id="toc">
<header>
<a href="#page-top">
<header class="toc-header">
<a href="#{{.Title | urlize}}">
<h3 class="{{.Section}}">{{.Title}}</h3>
</a>
</header>
themes/hugodocs/pipeline/scss/components/_table-of-contents.scss
+27 -16
View File
@@ -3,7 +3,10 @@ aside#toc {
max-width: 280px;
min-width: 200px;
overflow-y: scroll;
padding: .5em;
padding: {
left: .5em;
right: .5em;
}
bottom: 40px;
right: 20px;
height: auto;
@@ -14,18 +17,26 @@ aside#toc {
transform-origin: bottom right;
opacity: 0;
border-radius: 5px;
header.toc-header {
display: inline-block;
width:100%;
margin-top:24px;
> a {
h3 {
margin-top: 0px;
margin-bottom: 0px;
margin-left: 8px;
padding-bottom: 0px;
border-bottom: 1px solid $base-font-color;
color: $base-font-color;
font-size: 17px;
}
}
}
&.toc-open {
transform: scale(1);
opacity: 1;
}
h3 {
margin-bottom: 0px;
margin-left: 8px;
padding-bottom: 0px;
border-bottom: 1px solid $base-font-color;
color: $base-font-color;
font-size: 17px;
}
@include MQ(XL) {
box-shadow: none;
top: $site-header-height;
@@ -35,19 +46,19 @@ aside#toc {
min-height: calc(100vh - #{$site-header-height});
max-height: calc(100vh - #{$site-header-height});
transform: scale(1);
overflow-y:scroll;
border-left:1px solid $hugo-gray-light;
border-radius:0px;
overflow-y: scroll;
border-left: 1px solid $hugo-gray-light;
border-radius: 0px;
}
}
nav#TableOfContents {
position: relative;
margin-bottom: 20px;
height:auto;
height: auto;
li.active > a > code {
color:inherit;
font-weight:700;
color: inherit;
font-weight: 700;
}
> ul:first-child {
padding-left: 0px;
@@ -83,7 +94,7 @@ nav#TableOfContents {
left: -8px;
}
code {
color:inherit;
color: inherit;
}
}
}
themes/hugodocs/pipeline/scss/layout/_site-content.scss
+1 -1
View File
@@ -39,7 +39,7 @@ header.content-header {
clear: both;
width: 100%;
position: relative;
margin-top: 2em;
margin-top: 24px;
overflow-x: hidden;
margin-bottom:1em;
}