Merge commit 'ed8bf081fdbf336e026517b7e1b123c039014ab5'
This commit is contained in:
Bjørn Erik Pedersen
commit
558825cc20
|
|
@ -22,8 +22,7 @@ pygmentsCodeFences = true
|
|||
|
||||
pygmentsOptions = ""
|
||||
# Use the Chroma stylesheet
|
||||
# TODO(bep) build new CSS when we have picked a new style.
|
||||
pygmentsUseClasses = false
|
||||
pygmentsUseClasses = true
|
||||
pygmentsUseClassic = false
|
||||
|
||||
# See https://help.farbox.com/pygments.html
|
||||
|
|
|
|||
|
|
@ -103,6 +103,20 @@ But you can get it by `.Site.GetPage`. Here is an example:
|
|||
{{ end }}
|
||||
```
|
||||
|
||||
_In this example, we are assuming the `some-headless-bundle` to be a headless
|
||||
bundle containing one or more **page** resources whose `.Name` matches
|
||||
`"author*"`._
|
||||
|
||||
Explanation of the above example:
|
||||
|
||||
1. Get the `some-headless-bundle` Page "object".
|
||||
2. Collect a *slice* of resources in this *Page Bundle* that matches
|
||||
`"author*"` using `.Resources.Match`.
|
||||
3. Loop through that *slice* of nested pages, and output their `.Title` and
|
||||
`.Content`.
|
||||
|
||||
---
|
||||
|
||||
A leaf bundle can be made headless by adding below in the Front Matter
|
||||
(in the `index.md`):
|
||||
|
||||
|
|
|
|||
|
|
@ -62,7 +62,7 @@ func GetTitleFunc(style string) func(s string) string {
|
|||
{{< / highlight >}}
|
||||
|
||||
|
||||
## Configure Syntax Hightlighter
|
||||
## Configure Syntax Highlighter
|
||||
To make the transition from Pygments to Chroma seamless, they share a common set of configuration options:
|
||||
|
||||
pygmentsOptions
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ menu:
|
|||
docs:
|
||||
parent: "functions"
|
||||
keywords: [sections,lists,indexes]
|
||||
signature: [".GetPage TYPE PATH"]
|
||||
signature: [".GetPage KIND PATH"]
|
||||
workson: []
|
||||
hugoversion:
|
||||
relatedfuncs: []
|
||||
|
|
@ -18,29 +18,33 @@ deprecated: false
|
|||
aliases: []
|
||||
---
|
||||
|
||||
Every `Page` has a `Kind` attribute that shows what kind of page it is. While this attribute can be used to list pages of a certain `kind` using `where`, often it can be useful to fetch a single page by its path.
|
||||
Every `Page` has a [`Kind` attribute][page_kinds] that shows what kind of page it is. While this attribute can be used to list pages of a certain `kind` using `where`, often it can be useful to fetch a single page by its path.
|
||||
|
||||
`.GetPage` looks up a page of a given `Kind` and `path`.
|
||||
`.GetPage` returns a page of a given `Kind` and `path`.
|
||||
|
||||
{{% note %}}
|
||||
If the `path` is `"foo/bar.md"`, it can be written as exactly that, or broken up
|
||||
into multiple strings as `"foo" "bar.md"`.
|
||||
{{% /note %}}
|
||||
|
||||
```
|
||||
{{ with .Site.GetPage "section" "blog" }}{{ .Title }}{{ end }}
|
||||
```
|
||||
|
||||
This method wil return `nil` when no page could be found, so the above will not print anything if the blog section isn't found.
|
||||
This method wil return `nil` when no page could be found, so the above will not print anything if the blog section is not found.
|
||||
|
||||
For a regular page:
|
||||
|
||||
```
|
||||
{{ with .Site.GetPage "page" "blog" "my-post.md" }}{{ .Title }}{{ end }}
|
||||
```
|
||||
|
||||
Note that the path can also be supplied like this:
|
||||
For a regular page (whose `Kind` is `page`):
|
||||
|
||||
```
|
||||
{{ with .Site.GetPage "page" "blog/my-post.md" }}{{ .Title }}{{ end }}
|
||||
```
|
||||
|
||||
The valid page kinds are: *page, home, section, taxonomy and taxonomyTerm.*
|
||||
Note that the `path` can also be supplied like this, where the slash-separated
|
||||
path elements are added as separate strings:
|
||||
|
||||
```
|
||||
{{ with .Site.GetPage "page" "blog" "my-post.md" }}{{ .Title }}{{ end }}
|
||||
```
|
||||
|
||||
## `.GetPage` Example
|
||||
|
||||
|
|
@ -53,13 +57,26 @@ This code snippet---in the form of a [partial template][partials]---allows you t
|
|||
|
||||
{{< code file="grab-top-two-tags.html" >}}
|
||||
<ul class="most-popular-tags">
|
||||
{{ $t := $.Site.GetPage "taxonomyTerm" "tags" }}
|
||||
{{ $t := .Site.GetPage "taxonomyTerm" "tags" }}
|
||||
{{ range first 2 $t.Data.Terms.ByCount }}
|
||||
<li>{{.}}</li>
|
||||
<li>{{ . }}</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
{{< /code >}}
|
||||
|
||||
## `.GetPage` on Page Bundles
|
||||
|
||||
If the page retrieved by `.GetPage` is a [Leaf Bundle][leaf_bundle], and you
|
||||
need to get the nested _**page** resources_ in that, you will need to use the
|
||||
methods in `.Resources` as explained in the [Page Resources][page_resources]
|
||||
section.
|
||||
|
||||
See the [Headless Bundle][headless_bundle] documentation for an example.
|
||||
|
||||
|
||||
[partials]: /templates/partials/
|
||||
[taxonomy]: /content-management/taxonomies/
|
||||
[page_kinds]: /templates/section-templates/#page-kinds
|
||||
[leaf_bundle]: /content-management/page-bundles/#leaf-bundles
|
||||
[headless_bundle]: /content-management/page-bundles/#headless-bundle
|
||||
[page_resources]: /content-management/page-resources/
|
||||
|
|
|
|||
|
|
@ -0,0 +1,75 @@
|
|||
---
|
||||
title: Code Toggle
|
||||
description: Code Toggle tryout and showcase.
|
||||
date: 2018-03-16
|
||||
categories: [getting started,fundamentals]
|
||||
keywords: [configuration,toml,yaml,json]
|
||||
weight: 60
|
||||
sections_weight: 60
|
||||
draft: false
|
||||
toc: true
|
||||
---
|
||||
|
||||
## The Config Toggler!
|
||||
|
||||
This is an exemple for the Config Toggle shortcode.
|
||||
Its purpose is to let users choose a Config language by clicking on its corresponding tab. Upon doing so, every Code toggler on the page will be switched to the target language. Also, target language will be saved in user's `localStorage` so when they go to a different pages, Code Toggler display their last "toggled" config language.
|
||||
|
||||
## That Congig Toggler
|
||||
|
||||
{{< code-toggle file="config">}}
|
||||
|
||||
baseURL: "https://yoursite.example.com/"
|
||||
title: "My Hugo Site"
|
||||
footnoteReturnLinkContents: "↩"
|
||||
permalinks:
|
||||
post: /:year/:month/:title/
|
||||
params:
|
||||
Subtitle: "Hugo is Absurdly Fast!"
|
||||
AuthorName: "Jon Doe"
|
||||
GitHubUser: "spf13"
|
||||
ListOfFoo:
|
||||
- "foo1"
|
||||
- "foo2"
|
||||
SidebarRecentLimit: 5
|
||||
{{< /code-toggle >}}
|
||||
|
||||
## Another Config Toggler!
|
||||
|
||||
{{< code-toggle file="theme">}}
|
||||
|
||||
# theme.toml template for a Hugo theme
|
||||
|
||||
name = "Hugo Theme"
|
||||
license = "MIT"
|
||||
licenselink = "https://github.com/budparr/gohugo.io/blob/master/LICENSE.md"
|
||||
description = ""
|
||||
homepage = "https://github.com/budparr/gohugo.io"
|
||||
tags = ["website"]
|
||||
features = ["", ""]
|
||||
min_version = 0.18
|
||||
|
||||
[author]
|
||||
name = "Bud Parr"
|
||||
homepage = "https://github.com/budparr"
|
||||
|
||||
{{< /code-toggle >}}
|
||||
|
||||
## Two regular code blocks
|
||||
|
||||
{{< code file="bf-config.toml" >}}
|
||||
[blackfriday]
|
||||
angledQuotes = true
|
||||
fractions = false
|
||||
plainIDAnchors = true
|
||||
extensions = ["hardLineBreak"]
|
||||
{{< /code >}}
|
||||
|
||||
{{< code file="bf-config.yml" >}}
|
||||
blackfriday:
|
||||
angledQuotes: true
|
||||
fractions: false
|
||||
plainIDAnchors: true
|
||||
extensions:
|
||||
- hardLineBreak
|
||||
{{< /code >}}
|
||||
|
|
@ -202,7 +202,7 @@ summaryLength (70)
|
|||
: The length of text to show in a [`.Summary`](/content-management/summaries/#hugo-defined-automatic-summary-splitting).
|
||||
|
||||
taxonomies
|
||||
: See [Configure Taxonomies](content-management/taxonomies#configure-taxonomies).
|
||||
: See [Configure Taxonomies](/content-management/taxonomies#configure-taxonomies).
|
||||
|
||||
theme ("")
|
||||
: Theme to use (located by default in `/themes/THEMENAME/`).
|
||||
|
|
@ -214,7 +214,7 @@ title ("")
|
|||
: Site title.
|
||||
|
||||
uglyURLs (false)
|
||||
: When enabled, creates URL on the form `/filename.html` instead of `/filename/`.
|
||||
: When enabled, creates URL of the form `/filename.html` instead of `/filename/`.
|
||||
|
||||
verbose (false)
|
||||
: Enable verbose output.
|
||||
|
|
@ -249,8 +249,25 @@ Similar to the template [lookup order][], Hugo has a default set of rules for se
|
|||
|
||||
In your `config` file, you can direct Hugo as to how you want your website rendered, control your website's menus, and arbitrarily define site-wide parameters specific to your project.
|
||||
|
||||
|
||||
## YAML Configuration
|
||||
|
||||
{{< code file="config.yml">}}
|
||||
baseURL: "https://yoursite.example.com/"
|
||||
title: "My Hugo Site"
|
||||
footnoteReturnLinkContents: "↩"
|
||||
permalinks:
|
||||
post: /:year/:month/:title/
|
||||
params:
|
||||
Subtitle: "Hugo is Absurdly Fast!"
|
||||
AuthorName: "Jon Doe"
|
||||
GitHubUser: "spf13"
|
||||
ListOfFoo:
|
||||
- "foo1"
|
||||
- "foo2"
|
||||
SidebarRecentLimit: 5
|
||||
{{< /code >}}
|
||||
|
||||
The following is a typical example of a YAML configuration file. The values nested under `params:` will populate the [`.Site.Params`][] variable for use in [templates][]:
|
||||
|
||||
{{< code file="config.yml">}}
|
||||
|
|
|
|||
|
|
@ -20,14 +20,6 @@ wip: false
|
|||
aliases: [/tutorials/hosting-on-gitlab/]
|
||||
---
|
||||
|
||||
{{% warning %}}
|
||||
GitLab has temporarily turned off custom domains support because of a security issue. The plan is to re-enable it after the 20th of February.
|
||||
For more information:
|
||||
https://about.gitlab.com/2018/02/05/gitlab-pages-custom-domain-validation/
|
||||
{{% /warning %}}
|
||||
|
||||
{{< todo >}}Remove the above when fixed.{{< /todo >}}
|
||||
|
||||
[GitLab](https://gitlab.com/) makes it incredibly easy to build, deploy, and host your Hugo website via their free GitLab Pages service, which provides [native support for Hugo, as well as numerous other static site generators](https://gitlab.com/pages/hugo).
|
||||
|
||||
## Assumptions
|
||||
|
|
|
|||
|
|
@ -118,7 +118,7 @@ Note the use of the [`markdownify` template function][markdownify]. This will se
|
|||
|
||||
## Data-Driven Content
|
||||
|
||||
In addition to the [data files](/extras/datafiles/) feature, Hugo also a "data-driven content" feature, which lets you load any [JSON](http://www.json.org/) or [CSV](http://en.wikipedia.org/wiki/Comma-separated_values) file from nearly any resource.
|
||||
In addition to the [data files](/extras/datafiles/) feature, Hugo also has a "data-driven content" feature, which lets you load any [JSON](http://www.json.org/) or [CSV](http://en.wikipedia.org/wiki/Comma-separated_values) file from nearly any resource.
|
||||
|
||||
Data-driven content currently consists of two functions, `getJSON` and `getCSV`, which are available in all template files.
|
||||
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ toc: true
|
|||
---
|
||||
|
||||
{{% note %}}
|
||||
The example site used below is from https://github.com/gohugoio/hugo/examples/blog
|
||||
The example site used below is from https://github.com/gohugoio/hugo/tree/master/examples/blog
|
||||
{{% /note %}}
|
||||
|
||||
## Template Metrics
|
||||
|
|
|
|||
|
|
@ -0,0 +1,24 @@
|
|||
{{ $langs := (slice "yaml" "toml" "json") }}
|
||||
<div class="code relative" {{ with .Get "file" }}id="{{ . | urlize}}"{{ end }}>
|
||||
<div class="code-nav flex flex-nowrap items-stretch">
|
||||
{{- with .Get "file" -}}
|
||||
<div class="san-serif f6 dib lh-solid pl2 pv2 mr2">{{ . }}.</div>
|
||||
{{- end -}}
|
||||
{{ range $langs }}
|
||||
<button data-toggle-tab="{{ . }}" class="tab-button {{ cond (eq . "yaml") "active" ""}} ba san-serif f6 dib lh-solid ph2 pv2">{{ . }}</button>
|
||||
{{ end }}
|
||||
</div>
|
||||
<div class="tab-content">
|
||||
{{ range $langs }}
|
||||
<div data-pane="{{ . }}" class="code-copy-content nt3 tab-pane {{ cond (eq . "yaml") "active" ""}}">
|
||||
{{ highlight ($.Inner | transform.Remarshal . | safeHTML) . ""}}
|
||||
</div>
|
||||
{{ if ne ($.Get "copy") "false" }}
|
||||
<button class="needs-js copy copy-toggle bg-accent-color-dark f6 absolute top-0 right-0 lh-solid hover-bg-primary-color-dark bn white ph3 pv2" title="Copy this code to your clipboard." data-clipboard-action="copy" aria-label="copy button">
|
||||
</button>
|
||||
{{/* Functionality located within filesaver.js The copy here is located in the css with .copy class so it can be replaced with JS on success */}}
|
||||
{{end}}
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
@ -1,67 +1,65 @@
|
|||
/* Background */ .chroma { background-color: #f0f0f0 }
|
||||
/* Error */ .chroma .err { }
|
||||
/* LineTableTD */ .chroma .lntd { ; vertical-align: top; padding: 0; margin: 0; border: 0; }
|
||||
/* LineTable */ .chroma .lntable { ; border-spacing: 0; padding: 0; margin: 0; border: 0; width: 100%; overflow: auto; display: block; }
|
||||
/* LineHighlight */ .chroma .hl { background-color: #ffffcc; display: block; width: 100% }
|
||||
/* LineNumbersTable */ .chroma .lnt { ; margin-right: 0.4em; padding: 0 0.4em 0 0.4em; display: block; }
|
||||
/* LineNumbers */ .chroma .ln { ; margin-right: 0.4em; padding: 0 0.4em 0 0.4em; }
|
||||
/* Keyword */ .chroma .k { color: #007020; font-weight: bold }
|
||||
/* KeywordConstant */ .chroma .kc { color: #007020; font-weight: bold }
|
||||
/* KeywordDeclaration */ .chroma .kd { color: #007020; font-weight: bold }
|
||||
/* KeywordNamespace */ .chroma .kn { color: #007020; font-weight: bold }
|
||||
/* KeywordPseudo */ .chroma .kp { color: #007020 }
|
||||
/* KeywordReserved */ .chroma .kr { color: #007020; font-weight: bold }
|
||||
/* KeywordType */ .chroma .kt { color: #902000 }
|
||||
/* NameAttribute */ .chroma .na { color: #4070a0 }
|
||||
/* NameBuiltin */ .chroma .nb { color: #007020 }
|
||||
/* NameClass */ .chroma .nc { color: #0e84b5; font-weight: bold }
|
||||
/* NameConstant */ .chroma .no { color: #60add5 }
|
||||
/* NameDecorator */ .chroma .nd { color: #555555; font-weight: bold }
|
||||
/* NameEntity */ .chroma .ni { color: #d55537; font-weight: bold }
|
||||
/* NameException */ .chroma .ne { color: #007020 }
|
||||
/* NameFunction */ .chroma .nf { color: #06287e }
|
||||
/* NameLabel */ .chroma .nl { color: #002070; font-weight: bold }
|
||||
/* NameNamespace */ .chroma .nn { color: #0e84b5; font-weight: bold }
|
||||
/* NameTag */ .chroma .nt { color: #062873; font-weight: bold }
|
||||
/* NameVariable */ .chroma .nv { color: #bb60d5 }
|
||||
/* LiteralString */ .chroma .s { color: #4070a0 }
|
||||
/* LiteralStringAffix */ .chroma .sa { color: #4070a0 }
|
||||
/* LiteralStringBacktick */ .chroma .sb { color: #4070a0 }
|
||||
/* LiteralStringChar */ .chroma .sc { color: #4070a0 }
|
||||
/* LiteralStringDelimiter */ .chroma .dl { color: #4070a0 }
|
||||
/* LiteralStringDoc */ .chroma .sd { color: #4070a0; font-style: italic }
|
||||
/* LiteralStringDouble */ .chroma .s2 { color: #4070a0 }
|
||||
/* LiteralStringEscape */ .chroma .se { color: #4070a0; font-weight: bold }
|
||||
/* LiteralStringHeredoc */ .chroma .sh { color: #4070a0 }
|
||||
/* LiteralStringInterpol */ .chroma .si { color: #70a0d0; font-style: italic }
|
||||
/* LiteralStringOther */ .chroma .sx { color: #c65d09 }
|
||||
/* LiteralStringRegex */ .chroma .sr { color: #235388 }
|
||||
/* LiteralStringSingle */ .chroma .s1 { color: #4070a0 }
|
||||
/* LiteralStringSymbol */ .chroma .ss { color: #517918 }
|
||||
/* LiteralNumber */ .chroma .m { color: #40a070 }
|
||||
/* LiteralNumberBin */ .chroma .mb { color: #40a070 }
|
||||
/* LiteralNumberFloat */ .chroma .mf { color: #40a070 }
|
||||
/* LiteralNumberHex */ .chroma .mh { color: #40a070 }
|
||||
/* LiteralNumberInteger */ .chroma .mi { color: #40a070 }
|
||||
/* LiteralNumberIntegerLong */ .chroma .il { color: #40a070 }
|
||||
/* LiteralNumberOct */ .chroma .mo { color: #40a070 }
|
||||
/* Operator */ .chroma .o { color: #666666 }
|
||||
/* OperatorWord */ .chroma .ow { color: #007020; font-weight: bold }
|
||||
/* Comment */ .chroma .c { color: #60a0b0; font-style: italic }
|
||||
/* CommentHashbang */ .chroma .ch { color: #60a0b0; font-style: italic }
|
||||
/* CommentMultiline */ .chroma .cm { color: #60a0b0; font-style: italic }
|
||||
/* CommentSingle */ .chroma .c1 { color: #60a0b0; font-style: italic }
|
||||
/* CommentSpecial */ .chroma .cs { color: #60a0b0; background-color: #fff0f0 }
|
||||
/* CommentPreproc */ .chroma .cp { color: #007020 }
|
||||
/* CommentPreprocFile */ .chroma .cpf { color: #007020 }
|
||||
/* GenericDeleted */ .chroma .gd { color: #a00000 }
|
||||
/* Background */ .chroma { background-color: #ffffff }
|
||||
/* Error */ .chroma .err { color: #a61717; background-color: #e3d2d2 }
|
||||
/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
|
||||
/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; width: auto; overflow: auto; display: block; }
|
||||
/* LineHighlight */ .chroma .hl { display: block; width: 100%;background-color: #ffffcc }
|
||||
/* LineNumbersTable */ .chroma .lnt { margin-right: 0.4em; padding: 0 0.4em 0 0.4em; }
|
||||
/* LineNumbers */ .chroma .ln { margin-right: 0.4em; padding: 0 0.4em 0 0.4em; }
|
||||
/* Keyword */ .chroma .k { font-weight: bold }
|
||||
/* KeywordConstant */ .chroma .kc { font-weight: bold }
|
||||
/* KeywordDeclaration */ .chroma .kd { font-weight: bold }
|
||||
/* KeywordNamespace */ .chroma .kn { font-weight: bold }
|
||||
/* KeywordPseudo */ .chroma .kp { font-weight: bold }
|
||||
/* KeywordReserved */ .chroma .kr { font-weight: bold }
|
||||
/* KeywordType */ .chroma .kt { color: #445588; font-weight: bold }
|
||||
/* NameAttribute */ .chroma .na { color: #008080 }
|
||||
/* NameBuiltin */ .chroma .nb { color: #999999 }
|
||||
/* NameClass */ .chroma .nc { color: #445588; font-weight: bold }
|
||||
/* NameConstant */ .chroma .no { color: #008080 }
|
||||
/* NameEntity */ .chroma .ni { color: #800080 }
|
||||
/* NameException */ .chroma .ne { color: #990000; font-weight: bold }
|
||||
/* NameFunction */ .chroma .nf { color: #990000; font-weight: bold }
|
||||
/* NameNamespace */ .chroma .nn { color: #555555 }
|
||||
/* NameTag */ .chroma .nt { color: #000080 }
|
||||
/* NameVariable */ .chroma .nv { color: #008080 }
|
||||
/* LiteralString */ .chroma .s { color: #bb8844 }
|
||||
/* LiteralStringAffix */ .chroma .sa { color: #bb8844 }
|
||||
/* LiteralStringBacktick */ .chroma .sb { color: #bb8844 }
|
||||
/* LiteralStringChar */ .chroma .sc { color: #bb8844 }
|
||||
/* LiteralStringDelimiter */ .chroma .dl { color: #bb8844 }
|
||||
/* LiteralStringDoc */ .chroma .sd { color: #bb8844 }
|
||||
/* LiteralStringDouble */ .chroma .s2 { color: #bb8844 }
|
||||
/* LiteralStringEscape */ .chroma .se { color: #bb8844 }
|
||||
/* LiteralStringHeredoc */ .chroma .sh { color: #bb8844 }
|
||||
/* LiteralStringInterpol */ .chroma .si { color: #bb8844 }
|
||||
/* LiteralStringOther */ .chroma .sx { color: #bb8844 }
|
||||
/* LiteralStringRegex */ .chroma .sr { color: #808000 }
|
||||
/* LiteralStringSingle */ .chroma .s1 { color: #bb8844 }
|
||||
/* LiteralStringSymbol */ .chroma .ss { color: #bb8844 }
|
||||
/* LiteralNumber */ .chroma .m { color: #009999 }
|
||||
/* LiteralNumberBin */ .chroma .mb { color: #009999 }
|
||||
/* LiteralNumberFloat */ .chroma .mf { color: #009999 }
|
||||
/* LiteralNumberHex */ .chroma .mh { color: #009999 }
|
||||
/* LiteralNumberInteger */ .chroma .mi { color: #009999 }
|
||||
/* LiteralNumberIntegerLong */ .chroma .il { color: #009999 }
|
||||
/* LiteralNumberOct */ .chroma .mo { color: #009999 }
|
||||
/* Operator */ .chroma .o { font-weight: bold }
|
||||
/* OperatorWord */ .chroma .ow { font-weight: bold }
|
||||
/* Comment */ .chroma .c { color: #999988; font-style: italic }
|
||||
/* CommentHashbang */ .chroma .ch { color: #999988; font-style: italic }
|
||||
/* CommentMultiline */ .chroma .cm { color: #999988; font-style: italic }
|
||||
/* CommentSingle */ .chroma .c1 { color: #999988; font-style: italic }
|
||||
/* CommentSpecial */ .chroma .cs { color: #999999; font-weight: bold; font-style: italic }
|
||||
/* CommentPreproc */ .chroma .cp { color: #999999; font-weight: bold }
|
||||
/* CommentPreprocFile */ .chroma .cpf { color: #999999; font-weight: bold }
|
||||
/* GenericDeleted */ .chroma .gd { color: #000000; background-color: #ffdddd }
|
||||
/* GenericEmph */ .chroma .ge { font-style: italic }
|
||||
/* GenericError */ .chroma .gr { color: #ff0000 }
|
||||
/* GenericHeading */ .chroma .gh { color: #000080; font-weight: bold }
|
||||
/* GenericInserted */ .chroma .gi { color: #00a000 }
|
||||
/* GenericError */ .chroma .gr { color: #aa0000 }
|
||||
/* GenericHeading */ .chroma .gh { color: #999999 }
|
||||
/* GenericInserted */ .chroma .gi { color: #000000; background-color: #ddffdd }
|
||||
/* GenericOutput */ .chroma .go { color: #888888 }
|
||||
/* GenericPrompt */ .chroma .gp { color: #c65d09; font-weight: bold }
|
||||
/* GenericPrompt */ .chroma .gp { color: #555555 }
|
||||
/* GenericStrong */ .chroma .gs { font-weight: bold }
|
||||
/* GenericSubheading */ .chroma .gu { color: #800080; font-weight: bold }
|
||||
/* GenericTraceback */ .chroma .gt { color: #0044dd }
|
||||
/* GenericSubheading */ .chroma .gu { color: #aaaaaa }
|
||||
/* GenericTraceback */ .chroma .gt { color: #aa0000 }
|
||||
/* TextWhitespace */ .chroma .w { color: #bbbbbb }
|
||||
|
|
|
|||
|
|
@ -0,0 +1,30 @@
|
|||
.tab-button{
|
||||
margin-bottom:1px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
color:#333;
|
||||
border-color:#ccc;
|
||||
outline: none;
|
||||
background-color:white;
|
||||
}
|
||||
.tab-pane .chroma{
|
||||
background:none;
|
||||
padding:0;
|
||||
}
|
||||
.tab-button.active{
|
||||
border-bottom-color:#f3f4f4;
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
.tab-content .tab-pane{
|
||||
display: none;
|
||||
}
|
||||
.tab-content .tab-pane.active{
|
||||
display: block;
|
||||
}
|
||||
/* Treatment of copy buttons inside a tab module */
|
||||
.tab-content .copy, .tab-content .copied{
|
||||
display: none;
|
||||
}
|
||||
.tab-content .tab-pane.active + .copy, .tab-content .tab-pane.active + .copied{
|
||||
display: block;
|
||||
}
|
||||
|
|
@ -13,6 +13,7 @@
|
|||
@import '_algolia';
|
||||
@import '_carousel';
|
||||
@import '_code';
|
||||
@import '_tabs';
|
||||
@import '_color-scheme';
|
||||
@import '_columns';
|
||||
@import '_content';
|
||||
|
|
|
|||
|
|
@ -1,6 +1,9 @@
|
|||
var Clipboard = require('clipboard/dist/clipboard.js');
|
||||
new Clipboard('.copy', {
|
||||
target: function(trigger) {
|
||||
if(trigger.classList.contains('copy-toggle')){
|
||||
return trigger.previousElementSibling;
|
||||
}
|
||||
return trigger.nextElementSibling;
|
||||
}
|
||||
}).on('success', function(e) {
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ import './lazysizes.js'
|
|||
import './menutoggle.js'
|
||||
import './scrolldir.js'
|
||||
import './smoothscroll.js'
|
||||
|
||||
import './tabs.js'
|
||||
import './nojs.js'
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,43 @@
|
|||
/**
|
||||
* Scripts which manages Code Toggle tabs.
|
||||
*/
|
||||
var i;
|
||||
// store tabs variable
|
||||
var allTabs = document.querySelectorAll("[data-toggle-tab]");
|
||||
var allPanes = document.querySelectorAll("[data-pane]");
|
||||
|
||||
function toggleTabs(event) {
|
||||
|
||||
if(event.target){
|
||||
event.preventDefault();
|
||||
var clickedTab = event.currentTarget;
|
||||
var targetKey = clickedTab.getAttribute("data-toggle-tab")
|
||||
}else {
|
||||
var targetKey = event
|
||||
}
|
||||
// We store the config language selected in users' localStorage
|
||||
if(window.localStorage){
|
||||
window.localStorage.setItem("configLangPref", targetKey)
|
||||
}
|
||||
var selectedTabs = document.querySelectorAll("[data-toggle-tab='" + targetKey + "']");
|
||||
var selectedPanes = document.querySelectorAll("[data-pane='" + targetKey + "']");
|
||||
|
||||
for (var i = 0; i < allTabs.length; i++) {
|
||||
allTabs[i].classList.remove("active");
|
||||
allPanes[i].classList.remove("active");
|
||||
}
|
||||
|
||||
for (var i = 0; i < selectedTabs.length; i++) {
|
||||
selectedTabs[i].classList.add("active");
|
||||
selectedPanes[i].classList.add("active");
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
for (i = 0; i < allTabs.length; i++) {
|
||||
allTabs[i].addEventListener("click", toggleTabs)
|
||||
}
|
||||
// Upon page load, if user has a prefered language in its localStorage, tabs are set to it.
|
||||
if(window.localStorage.getItem('configLangPref')) {
|
||||
toggleTabs(window.localStorage.getItem('configLangPref'))
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue