Initial commit
This commit is contained in:
Spencer Pincott
120
themes/keepit/content/about/index.en.md
Normal file
120
themes/keepit/content/about/index.en.md
Normal file
@@ -0,0 +1,120 @@
|
||||
---
|
||||
title: "About KeepIt"
|
||||
date: 2019-08-02T11:04:49+08:00
|
||||
draft: false
|
||||
description: "About KeepIt"
|
||||
images: ["/Apple-Devices-Preview.png"]
|
||||
|
||||
lightgallery: true
|
||||
|
||||
math:
|
||||
enable: true
|
||||
---
|
||||
|
||||
{{< style "img { height: 1.25rem; }" >}}
|
||||
[](https://github.com/Fastbyte01/KeepIt/releases)
|
||||
[](https://gohugo.io/)
|
||||
[](https://github.com/Fastbyte01/KeepIt/blob/master/LICENSE)
|
||||
[](https://github.com/Fastbyte01/KeepIt)
|
||||
[](https://github.com/Fastbyte01/KeepIt/fork)
|
||||
{{< /style >}}
|
||||
|
||||
> [:(far fa-kiss-wink-heart fa-fw): KeepIt](https://github.com/Fastbyte01/KeepIt) is a **clean**, **elegant** but **advanced** blog theme for [Hugo](https://gohugo.io/) developed by [Dillon](https://dillonzq.com).
|
||||
>
|
||||
> It is based on the original [LeaveIt Theme](https://github.com/liuzc/LeaveIt) and [KeepIt Theme](https://github.com/Fastbyte01/KeepIt).
|
||||
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
#### Performance and SEO
|
||||
|
||||
* :(fas fa-rocket fa-fw): Optimized for **performance**: [99]/[100] on mobile and [100]/[100] on desktop in [Google PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights)
|
||||
* :(fab fa-searchengin fa-fw): Optimized SEO performance with a correct **SEO SCHEMA** based on JSON-LD
|
||||
* :(fab fa-google fa-fw): **[Google Analytics](https://analytics.google.com/analytics)** supported
|
||||
* :(far fa-chart-bar fa-fw): **[Fathom Analytics](https://usefathom.com/)** supported
|
||||
* :(fas fa-sitemap fa-fw): Search engine **verification** supported (Google, Bind, Yandex and Baidu)
|
||||
* :(fas fa-tachometer-alt fa-fw): **CDN** for third-party libraries supported
|
||||
* :(fas fa-cloud-download-alt fa-fw): Automatically converted images with **Lazy Load** by [lazysizes](https://github.com/aFarkas/lazysizes)
|
||||
|
||||
#### Appearance and Layout
|
||||
|
||||
* :(fas fa-mobile-screen fa-fw): **[Desktop]/[Mobile] responsive** layout
|
||||
* :(fas fa-circle-half-stroke fa-rotate-180 fa-fw): **[Light]/[Dark]** mode
|
||||
* :(fas fa-layer-group fa-fw): Globally consistent **design language**
|
||||
* :(fas fa-ellipsis-h fa-fw): **Pagination** supported
|
||||
* :(far fa-list-alt fa-fw): Easy-to-use and self-expanding **table of contents**
|
||||
* :(fas fa-language fa-fw): **Multilanguage** supported and i18n ready
|
||||
* :(fab fa-css3-alt fa-fw): Beautiful **CSS animation**
|
||||
|
||||
#### Social and Comment Systems
|
||||
|
||||
* :(far fa-user fa-fw): **Gravatar** supported by [Gravatar](https://gravatar.com)
|
||||
* :(fas fa-user-circle fa-fw): Local **Avatar** supported
|
||||
* :(far fa-id-card fa-fw): Up to **64** social links supported
|
||||
* :(fas fa-share-square fa-fw): Up to **24** share sites supported
|
||||
* :(far fa-comment fa-fw): **Disqus** comment system supported by [Disqus](https://disqus.com)
|
||||
* :(far fa-comment-dots fa-fw): **Gitalk** comment system supported by [Gitalk](https://github.com/gitalk/gitalk)
|
||||
* :(far fa-comment-alt fa-fw): **Valine** comment system supported by [Valine](https://valine.js.org/)
|
||||
* :(far fa-comments fa-fw): **Facebook comments** system supported by [Facebook](https://developers.facebook.com/docs/plugins/comments/)
|
||||
* :(fas fa-comment fa-fw): **Telegram comments** system supported by [Comments](https://comments.app/)
|
||||
* :(fas fa-comment-dots fa-fw): **Commento** comment system supported by [Commento](https://commento.io/)
|
||||
* :(fas fa-comment-alt fa-fw): **Utterances** comment system supported by [Utterances](https://utteranc.es/)
|
||||
|
||||
#### Extended Features
|
||||
|
||||
* :(fas fa-search fa-fw): **Search** supported by [Lunr.js](https://lunrjs.com/) or [algolia](https://www.algolia.com/)
|
||||
* :(far fa-grin-tongue-wink fa-fw): **Twemoji** supported
|
||||
* :(fas fa-code fa-fw): Automatically **highlighting** code
|
||||
* :(far fa-copy fa-fw): **Copy code** to clipboard with one click
|
||||
* :(far fa-images fa-fw): **Images gallery** supported by [lightGallery](https://github.com/sachinchoolur/lightgallery)
|
||||
* :(fab fa-font-awesome fa-fw): Extended Markdown syntax for **[Font Awesome](https://fontawesome.com/) icons**
|
||||
* :(fas fa-superscript fa-fw): Extended Markdown syntax for **ruby annotation**
|
||||
* :(fas fa-percentage fa-fw): Extended Markdown syntax for **fraction**
|
||||
* :(fas fa-square-root-alt fa-fw): **Mathematical formula** supported by [$\KaTeX$](https://katex.org/)
|
||||
* :(fas fa-project-diagram fa-fw): **Diagrams** shortcode supported by [mermaid](https://github.com/mermaid-js/mermaid)
|
||||
* :(fas fa-chart-pie fa-fw): **Interactive data visualization** shortcode supported by [ECharts](https://echarts.apache.org/)
|
||||
* :(fas fa-map-marked-alt fa-fw): **Mapbox** shortcode supported by [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js)
|
||||
* :(fas fa-music fa-fw): **Music player** shortcode supported by [APlayer](https://github.com/MoePlayer/APlayer) and [MetingJS](https://github.com/metowolf/MetingJS)
|
||||
* :(fab fa-bilibili fa-fw): **Bilibili player** shortcode
|
||||
* :(fas fa-note-sticky fa-fw): Kinds of **admonitions** shortcode
|
||||
* :(fab fa-css3 fa-fw): **Custom style** shortcode
|
||||
* :(fab fa-js-square fa-fw): **Custom script** shortcode
|
||||
* :(fas fa-i-cursor fa-fw): **Animated typing** supported by [TypeIt](https://typeitjs.com/)
|
||||
* :(fas fa-cookie-bite fa-fw): **Cookie consent banner** supported by [cookieconsent](https://github.com/osano/cookieconsent)
|
||||
* ...
|
||||
|
||||
### License
|
||||
|
||||
KeepIt is licensed under the **MIT** license.
|
||||
|
||||
Check the [LICENSE file](https://github.com/Fastbyte01/KeepIt/blob/master/LICENSE) for details.
|
||||
|
||||
### Special Thanks
|
||||
|
||||
Thanks to the authors of following resources included in the theme:
|
||||
|
||||
* [normalize.css](https://github.com/necolas/normalize.css)
|
||||
* [Font Awesome](https://fontawesome.com/)
|
||||
* [Simple Icons](https://github.com/simple-icons/simple-icons)
|
||||
* [Animate.css](https://daneden.github.io/animate.css/)
|
||||
* [autocomplete](https://github.com/algolia/autocomplete)
|
||||
* [Lunr.js](https://lunrjs.com/)
|
||||
* [algoliasearch](https://github.com/algolia/algoliasearch-client-javascript)
|
||||
* [lazysizes](https://github.com/aFarkas/lazysizes)
|
||||
* [object-fit-images](https://github.com/fregante/object-fit-images)
|
||||
* [Twemoji](https://github.com/twitter/twemoji)
|
||||
* [emoji-data](https://github.com/iamcal/emoji-data)
|
||||
* [lightGallery](https://github.com/sachinchoolur/lightgallery)
|
||||
* [clipboard.js](https://github.com/zenorocha/clipboard.js)
|
||||
* [Sharer.js](https://github.com/ellisonleao/sharer.js)
|
||||
* [TypeIt](https://typeitjs.com/)
|
||||
* [$\KaTeX$](https://katex.org/)
|
||||
* [mermaid](https://github.com/mermaid-js/mermaid)
|
||||
* [ECharts](https://echarts.apache.org/)
|
||||
* [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js)
|
||||
* [APlayer](https://github.com/MoePlayer/APlayer)
|
||||
* [MetingJS](https://github.com/metowolf/MetingJS)
|
||||
* [Gitalk](https://github.com/gitalk/gitalk)
|
||||
* [Valine](https://valine.js.org/)
|
||||
* [cookieconsent](https://github.com/osano/cookieconsent)
|
||||
@@ -0,0 +1,3 @@
|
||||
---
|
||||
title: "Documentation"
|
||||
---
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 168 KiB |
764
themes/keepit/content/posts/basic-markdown-syntax/index.en.md
Normal file
764
themes/keepit/content/posts/basic-markdown-syntax/index.en.md
Normal file
@@ -0,0 +1,764 @@
|
||||
---
|
||||
weight: 4
|
||||
title: "Basic Markdown Syntax"
|
||||
date: 2019-12-01T21:57:40+08:00
|
||||
lastmod: 2020-01-01T16:45:40+08:00
|
||||
draft: true
|
||||
author: "Dillon"
|
||||
authorLink: "https://dillonzq.com"
|
||||
description: "This article shows the basic Markdown syntax and format."
|
||||
images: []
|
||||
resources:
|
||||
- name: "featured-image"
|
||||
src: "featured-image.png"
|
||||
|
||||
tags: ["Markdown", "HTML"]
|
||||
categories: ["Markdown"]
|
||||
|
||||
lightgallery: true
|
||||
---
|
||||
|
||||
This article offers a sample of basic Markdown syntax that can be used in Hugo content files.
|
||||
|
||||
<!--more-->
|
||||
|
||||
{{< admonition >}}
|
||||
This article is a shameful copy of the great [Grav original page](http://learn.getgrav.org/content/markdown).
|
||||
|
||||
If you want to know about the extended Markdown syntax of **KeepIt** theme, please read [extended Markdown syntax page](../theme-documentation-content#extended-markdown-syntax).
|
||||
{{< /admonition >}}
|
||||
|
||||
Let's face it: Writing content for the Web is tiresome. WYSIWYG editors help alleviate this task, but they generally result in horrible code, or worse yet, ugly web pages.
|
||||
|
||||
**Markdown** is a better way to write **HTML**, without all the complexities and ugliness that usually accompanies it.
|
||||
|
||||
Some of the key benefits are:
|
||||
|
||||
1. Markdown is simple to learn, with minimal extra characters, so it's also quicker to write content.
|
||||
2. Less chance of errors when writing in Markdown.
|
||||
3. Produces valid XHTML output.
|
||||
4. Keeps the content and the visual display separate, so you cannot mess up the look of your site.
|
||||
5. Write in any text editor or Markdown application you like.
|
||||
6. Markdown is a joy to use!
|
||||
|
||||
John Gruber, the author of Markdown, puts it like this:
|
||||
|
||||
> The overriding design goal for Markdown’s formatting syntax is to make it as readable as possible.
|
||||
> The idea is that a Markdown-formatted document should be publishable as-is, as plain text,
|
||||
> without looking like it’s been marked up with tags or formatting instructions.
|
||||
> While Markdown’s syntax has been influenced by several existing text-to-HTML filters,
|
||||
> the single biggest source of inspiration for Markdown’s syntax is the format of plain text email.
|
||||
>
|
||||
> {{< style "text-align: right;" >}}-- _John Gruber_{{< /style >}}
|
||||
|
||||
Without further delay, let us go over the main elements of Markdown and what the resulting HTML looks like!
|
||||
|
||||
{{< admonition tip >}}
|
||||
:(far fa-bookmark fa-fw): Bookmark this page for easy future reference!
|
||||
{{< /admonition >}}
|
||||
|
||||
## 1 Headings
|
||||
|
||||
Headings from `h2` through `h6` are constructed with a `#` for each level:
|
||||
|
||||
```markdown
|
||||
## h2 Heading
|
||||
### h3 Heading
|
||||
#### h4 Heading
|
||||
##### h5 Heading
|
||||
###### h6 Heading
|
||||
```
|
||||
|
||||
The HTML looks like this:
|
||||
|
||||
```html
|
||||
<h2>h2 Heading</h2>
|
||||
<h3>h3 Heading</h3>
|
||||
<h4>h4 Heading</h4>
|
||||
<h5>h5 Heading</h5>
|
||||
<h6>h6 Heading</h6>
|
||||
```
|
||||
|
||||
{{< admonition note "Heading IDs" >}}
|
||||
To add a custom heading ID, enclose the custom ID in curly braces on the same line as the heading:
|
||||
|
||||
```markdown
|
||||
### A Great Heading {#custom-id}
|
||||
```
|
||||
|
||||
The HTML looks like this:
|
||||
|
||||
```html
|
||||
<h3 id="custom-id">A Great Heading</h3>
|
||||
```
|
||||
{{< /admonition >}}
|
||||
|
||||
## 2 Comments
|
||||
|
||||
Comments should be HTML compatible.
|
||||
|
||||
```html
|
||||
<!--
|
||||
This is a comment
|
||||
-->
|
||||
```
|
||||
|
||||
Comment below should **NOT** be seen:
|
||||
|
||||
<!--
|
||||
This is a comment
|
||||
-->
|
||||
|
||||
## 3 Horizontal Rules
|
||||
|
||||
The HTML `<hr>` element is for creating a "thematic break" between paragraph-level elements.
|
||||
In Markdown, you can create a `<hr>` with any of the following:
|
||||
|
||||
* `___`: three consecutive underscores
|
||||
* `---`: three consecutive dashes
|
||||
* `***`: three consecutive asterisks
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
___
|
||||
---
|
||||
***
|
||||
|
||||
## 4 Body Copy
|
||||
|
||||
Body copy written as normal, plain text will be wrapped with `<p></p>` tags in the rendered HTML.
|
||||
|
||||
So this body copy:
|
||||
|
||||
```markdown
|
||||
Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus. Et legere ocurreret pri,
|
||||
animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex,
|
||||
soluta officiis concludaturque ei qui, vide sensibus vim ad.
|
||||
```
|
||||
|
||||
The HTML looks like this:
|
||||
|
||||
```html
|
||||
<p>Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus. Et legere ocurreret pri, animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex, soluta officiis concludaturque ei qui, vide sensibus vim ad.</p>
|
||||
```
|
||||
|
||||
A **line break** can be done with one blank line.
|
||||
|
||||
## 5 Inline HTML
|
||||
|
||||
If you need a certain HTML tag (with a class) you can simply use HTML:
|
||||
|
||||
```html
|
||||
Paragraph in Markdown.
|
||||
|
||||
<div class="class">
|
||||
This is <b>HTML</b>
|
||||
</div>
|
||||
|
||||
Paragraph in Markdown.
|
||||
```
|
||||
|
||||
## 6 Emphasis
|
||||
|
||||
### Bold
|
||||
|
||||
For emphasizing a snippet of text with a heavier font-weight.
|
||||
|
||||
The following snippet of text is **rendered as bold text**.
|
||||
|
||||
```markdown
|
||||
**rendered as bold text**
|
||||
__rendered as bold text__
|
||||
```
|
||||
|
||||
The HTML looks like this:
|
||||
|
||||
```html
|
||||
<strong>rendered as bold text</strong>
|
||||
```
|
||||
|
||||
### Italics
|
||||
|
||||
For emphasizing a snippet of text with italics.
|
||||
|
||||
The following snippet of text is _rendered as italicized text_.
|
||||
|
||||
```markdown
|
||||
*rendered as italicized text*
|
||||
_rendered as italicized text_
|
||||
```
|
||||
|
||||
The HTML looks like this:
|
||||
|
||||
```html
|
||||
<em>rendered as italicized text</em>
|
||||
```
|
||||
|
||||
### Strikethrough
|
||||
|
||||
In [[GFM]^(GitHub flavored Markdown)](https://github.github.com/gfm/) you can do strikethroughs.
|
||||
|
||||
```markdown
|
||||
~~Strike through this text.~~
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
~~Strike through this text.~~
|
||||
|
||||
The HTML looks like this:
|
||||
|
||||
```html
|
||||
<del>Strike through this text.</del>
|
||||
```
|
||||
|
||||
### Combination
|
||||
|
||||
Bold, italics, and strikethrough can be used in combination.
|
||||
|
||||
```markdown
|
||||
***bold and italics***
|
||||
~~**strikethrough and bold**~~
|
||||
~~*strikethrough and italics*~~
|
||||
~~***bold, italics and strikethrough***~~
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
***bold and italics***
|
||||
|
||||
~~**strikethrough and bold**~~
|
||||
|
||||
~~*strikethrough and italics*~~
|
||||
|
||||
~~***bold, italics and strikethrough***~~
|
||||
|
||||
The HTML looks like this:
|
||||
|
||||
```html
|
||||
<em><strong>bold and italics</strong></em>
|
||||
<del><strong>strikethrough and bold</strong></del>
|
||||
<del><em>strikethrough and italics</em></del>
|
||||
<del><em><strong>bold, italics and strikethrough</strong></em></del>
|
||||
```
|
||||
|
||||
## 7 Blockquotes
|
||||
|
||||
For quoting blocks of content from another source within your document.
|
||||
|
||||
Add `>` before any text you want to quote:
|
||||
|
||||
```markdown
|
||||
> **Fusion Drive** combines a hard drive with a flash storage (solid-state drive) and presents it as a single logical volume with the space of both drives combined.
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
> **Fusion Drive** combines a hard drive with a flash storage (solid-state drive) and presents it as a single logical volume with the space of both drives combined.
|
||||
|
||||
The HTML looks like this:
|
||||
|
||||
```html
|
||||
<blockquote>
|
||||
<p>
|
||||
<strong>Fusion Drive</strong> combines a hard drive with a flash storage (solid-state drive) and presents it as a single logical volume with the space of both drives combined.
|
||||
</p>
|
||||
</blockquote>
|
||||
```
|
||||
|
||||
Blockquotes can also be nested:
|
||||
|
||||
```markdown
|
||||
> Donec massa lacus, ultricies a ullamcorper in, fermentum sed augue.
|
||||
Nunc augue augue, aliquam non hendrerit ac, commodo vel nisi.
|
||||
>> Sed adipiscing elit vitae augue consectetur a gravida nunc vehicula. Donec auctor
|
||||
odio non est accumsan facilisis. Aliquam id turpis in dolor tincidunt mollis ac eu diam.
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
> Donec massa lacus, ultricies a ullamcorper in, fermentum sed augue.
|
||||
Nunc augue augue, aliquam non hendrerit ac, commodo vel nisi.
|
||||
>> Sed adipiscing elit vitae augue consectetur a gravida nunc vehicula. Donec auctor
|
||||
odio non est accumsan facilisis. Aliquam id turpis in dolor tincidunt mollis ac eu diam.
|
||||
|
||||
## 8 Lists
|
||||
|
||||
### Unordered
|
||||
|
||||
A list of items in which the order of the items does not explicitly matter.
|
||||
|
||||
You may use any of the following symbols to denote bullets for each list item:
|
||||
|
||||
```markdown
|
||||
* valid bullet
|
||||
- valid bullet
|
||||
+ valid bullet
|
||||
```
|
||||
|
||||
For example:
|
||||
|
||||
```markdown
|
||||
* Lorem ipsum dolor sit amet
|
||||
* Consectetur adipiscing elit
|
||||
* Integer molestie lorem at massa
|
||||
* Facilisis in pretium nisl aliquet
|
||||
* Nulla volutpat aliquam velit
|
||||
* Phasellus iaculis neque
|
||||
* Purus sodales ultricies
|
||||
* Vestibulum laoreet porttitor sem
|
||||
* Ac tristique libero volutpat at
|
||||
* Faucibus porta lacus fringilla vel
|
||||
* Aenean sit amet erat nunc
|
||||
* Eget porttitor lorem
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
* Lorem ipsum dolor sit amet
|
||||
* Consectetur adipiscing elit
|
||||
* Integer molestie lorem at massa
|
||||
* Facilisis in pretium nisl aliquet
|
||||
* Nulla volutpat aliquam velit
|
||||
* Phasellus iaculis neque
|
||||
* Purus sodales ultricies
|
||||
* Vestibulum laoreet porttitor sem
|
||||
* Ac tristique libero volutpat at
|
||||
* Faucibus porta lacus fringilla vel
|
||||
* Aenean sit amet erat nunc
|
||||
* Eget porttitor lorem
|
||||
|
||||
The HTML looks like this:
|
||||
|
||||
```html
|
||||
<ul>
|
||||
<li>Lorem ipsum dolor sit amet</li>
|
||||
<li>Consectetur adipiscing elit</li>
|
||||
<li>Integer molestie lorem at massa</li>
|
||||
<li>Facilisis in pretium nisl aliquet</li>
|
||||
<li>Nulla volutpat aliquam velit
|
||||
<ul>
|
||||
<li>Phasellus iaculis neque</li>
|
||||
<li>Purus sodales ultricies</li>
|
||||
<li>Vestibulum laoreet porttitor sem</li>
|
||||
<li>Ac tristique libero volutpat at</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Faucibus porta lacus fringilla vel</li>
|
||||
<li>Aenean sit amet erat nunc</li>
|
||||
<li>Eget porttitor lorem</li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
### Ordered
|
||||
|
||||
A list of items in which the order of items does explicitly matter.
|
||||
|
||||
```markdown
|
||||
1. Lorem ipsum dolor sit amet
|
||||
2. Consectetur adipiscing elit
|
||||
3. Integer molestie lorem at massa
|
||||
4. Facilisis in pretium nisl aliquet
|
||||
5. Nulla volutpat aliquam velit
|
||||
6. Faucibus porta lacus fringilla vel
|
||||
7. Aenean sit amet erat nunc
|
||||
8. Eget porttitor lorem
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
1. Lorem ipsum dolor sit amet
|
||||
2. Consectetur adipiscing elit
|
||||
3. Integer molestie lorem at massa
|
||||
4. Facilisis in pretium nisl aliquet
|
||||
5. Nulla volutpat aliquam velit
|
||||
6. Faucibus porta lacus fringilla vel
|
||||
7. Aenean sit amet erat nunc
|
||||
8. Eget porttitor lorem
|
||||
|
||||
The HTML looks like this:
|
||||
|
||||
```html
|
||||
<ol>
|
||||
<li>Lorem ipsum dolor sit amet</li>
|
||||
<li>Consectetur adipiscing elit</li>
|
||||
<li>Integer molestie lorem at massa</li>
|
||||
<li>Facilisis in pretium nisl aliquet</li>
|
||||
<li>Nulla volutpat aliquam velit</li>
|
||||
<li>Faucibus porta lacus fringilla vel</li>
|
||||
<li>Aenean sit amet erat nunc</li>
|
||||
<li>Eget porttitor lorem</li>
|
||||
</ol>
|
||||
```
|
||||
|
||||
{{< admonition tip >}}
|
||||
If you just use `1.` for each number, Markdown will automatically number each item. For example:
|
||||
|
||||
```markdown
|
||||
1. Lorem ipsum dolor sit amet
|
||||
1. Consectetur adipiscing elit
|
||||
1. Integer molestie lorem at massa
|
||||
1. Facilisis in pretium nisl aliquet
|
||||
1. Nulla volutpat aliquam velit
|
||||
1. Faucibus porta lacus fringilla vel
|
||||
1. Aenean sit amet erat nunc
|
||||
1. Eget porttitor lorem
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
1. Lorem ipsum dolor sit amet
|
||||
1. Consectetur adipiscing elit
|
||||
1. Integer molestie lorem at massa
|
||||
1. Facilisis in pretium nisl aliquet
|
||||
1. Nulla volutpat aliquam velit
|
||||
1. Faucibus porta lacus fringilla vel
|
||||
1. Aenean sit amet erat nunc
|
||||
1. Eget porttitor lorem
|
||||
{{< /admonition >}}
|
||||
|
||||
### Task Lists
|
||||
|
||||
Task lists allow you to create a list of items with checkboxes. To create a task list, add dashes (`-`) and brackets with a space (`[ ]`) before task list items. To select a checkbox, add an x in between the brackets (`[x]`).
|
||||
|
||||
```markdown
|
||||
- [x] Write the press release
|
||||
- [ ] Update the website
|
||||
- [ ] Contact the media
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
- [x] Write the press release
|
||||
- [ ] Update the website
|
||||
- [ ] Contact the media
|
||||
|
||||
## 9 Code
|
||||
|
||||
### Inline Code
|
||||
|
||||
Wrap inline snippets of code with <code>`</code>.
|
||||
|
||||
```markdown
|
||||
In this example, `<section></section>` should be wrapped as **code**.
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
In this example, `<section></section>` should be wrapped as **code**.
|
||||
|
||||
The HTML looks like this:
|
||||
|
||||
```html
|
||||
<p>
|
||||
In this example, <code><section></section></code> should be wrapped with <strong>code</strong>.
|
||||
</p>
|
||||
```
|
||||
|
||||
### Indented Code
|
||||
|
||||
Or indent several lines of code by at least four spaces, as in:
|
||||
|
||||
```markdown
|
||||
// Some comments
|
||||
line 1 of code
|
||||
line 2 of code
|
||||
line 3 of code
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
// Some comments
|
||||
line 1 of code
|
||||
line 2 of code
|
||||
line 3 of code
|
||||
|
||||
The HTML looks like this:
|
||||
|
||||
```html
|
||||
<pre>
|
||||
<code>
|
||||
// Some comments
|
||||
line 1 of code
|
||||
line 2 of code
|
||||
line 3 of code
|
||||
</code>
|
||||
</pre>
|
||||
```
|
||||
|
||||
### Block Fenced Code
|
||||
|
||||
Use "fences" <code>```</code> to block in multiple lines of code with a language attribute.
|
||||
|
||||
{{< highlight markdown >}}
|
||||
```markdown
|
||||
Sample text here...
|
||||
```
|
||||
{{< / highlight >}}
|
||||
|
||||
The HTML looks like this:
|
||||
|
||||
```html
|
||||
<pre language-html>
|
||||
<code>Sample text here...</code>
|
||||
</pre>
|
||||
```
|
||||
|
||||
### Syntax Highlighting
|
||||
|
||||
[GFM]^(GitHub Flavored Markdown) also supports syntax highlighting.
|
||||
|
||||
To activate it, simply add the file extension of the language you want to use directly after the first code "fence",
|
||||
<code>```js</code>, and syntax highlighting will automatically be applied in the rendered HTML.
|
||||
|
||||
For example, to apply syntax highlighting to JavaScript code:
|
||||
|
||||
{{< highlight markdown >}}
|
||||
```js
|
||||
grunt.initConfig({
|
||||
assemble: {
|
||||
options: {
|
||||
assets: 'docs/assets',
|
||||
data: 'src/data/*.{json,yml}',
|
||||
helpers: 'src/custom-helpers.js',
|
||||
partials: ['src/partials/**/*.{hbs,md}']
|
||||
},
|
||||
pages: {
|
||||
options: {
|
||||
layout: 'default.hbs'
|
||||
},
|
||||
files: {
|
||||
'./': ['src/templates/pages/index.hbs']
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
{{< / highlight >}}
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
```js
|
||||
grunt.initConfig({
|
||||
assemble: {
|
||||
options: {
|
||||
assets: 'docs/assets',
|
||||
data: 'src/data/*.{json,yml}',
|
||||
helpers: 'src/custom-helpers.js',
|
||||
partials: ['src/partials/**/*.{hbs,md}']
|
||||
},
|
||||
pages: {
|
||||
options: {
|
||||
layout: 'default.hbs'
|
||||
},
|
||||
files: {
|
||||
'./': ['src/templates/pages/index.hbs']
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
{{< admonition >}}
|
||||
[Syntax highlighting page](https://gohugo.io/content-management/syntax-highlighting/) in **Hugo** Docs introduces more about syntax highlighting, including highlight shortcode.
|
||||
{{< /admonition >}}
|
||||
|
||||
## 10 Tables
|
||||
|
||||
Tables are created by adding pipes as dividers between each cell, and by adding a line of dashes (also separated by bars) beneath the header. Note that the pipes do not need to be vertically aligned.
|
||||
|
||||
```markdown
|
||||
| Option | Description |
|
||||
| ------ | ----------- |
|
||||
| data | path to data files to supply the data that will be passed into templates. |
|
||||
| engine | engine to be used for processing templates. Handlebars is the default. |
|
||||
| ext | extension to be used for dest files. |
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
| Option | Description |
|
||||
| ------ | ----------- |
|
||||
| data | path to data files to supply the data that will be passed into templates. |
|
||||
| engine | engine to be used for processing templates. Handlebars is the default. |
|
||||
| ext | extension to be used for dest files. |
|
||||
|
||||
The HTML looks like this:
|
||||
|
||||
```html
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Option</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>data</td>
|
||||
<td>path to data files to supply the data that will be passed into templates.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>engine</td>
|
||||
<td>engine to be used for processing templates. Handlebars is the default.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>ext</td>
|
||||
<td>extension to be used for dest files.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
```
|
||||
|
||||
{{< admonition note "Right or center aligned text" >}}
|
||||
Adding a colon on the right side of the dashes below any heading will right align text for that column.
|
||||
|
||||
Adding colons on both sides of the dashes below any heading will center align text for that column.
|
||||
|
||||
```markdown
|
||||
| Option | Description |
|
||||
|:------:| -----------:|
|
||||
| data | path to data files to supply the data that will be passed into templates. |
|
||||
| engine | engine to be used for processing templates. Handlebars is the default. |
|
||||
| ext | extension to be used for dest files. |
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
| Option | Description |
|
||||
|:------:| -----------:|
|
||||
| data | path to data files to supply the data that will be passed into templates. |
|
||||
| engine | engine to be used for processing templates. Handlebars is the default. |
|
||||
| ext | extension to be used for dest files. |
|
||||
{{< /admonition >}}
|
||||
|
||||
## 11 Links {#links}
|
||||
|
||||
### Basic Link
|
||||
|
||||
```markdown
|
||||
<https://assemble.io>
|
||||
<contact@revolunet.com>
|
||||
[Assemble](https://assemble.io)
|
||||
```
|
||||
|
||||
The rendered output looks like this (hover over the link, there is no tooltip):
|
||||
|
||||
<https://assemble.io>
|
||||
|
||||
<contact@revolunet.com>
|
||||
|
||||
[Assemble](https://assemble.io)
|
||||
|
||||
The HTML looks like this:
|
||||
|
||||
```html
|
||||
<a href="https://assemble.io">https://assemble.io</a>
|
||||
<a href="mailto:contact@revolunet.com">contact@revolunet.com</a>
|
||||
<a href="https://assemble.io">Assemble</a>
|
||||
```
|
||||
|
||||
### Add a Title
|
||||
|
||||
```markdown
|
||||
[Upstage](https://github.com/upstage/ "Visit Upstage!")
|
||||
```
|
||||
|
||||
The rendered output looks like this (hover over the link, there should be a tooltip):
|
||||
|
||||
[Upstage](https://github.com/upstage/ "Visit Upstage!")
|
||||
|
||||
The HTML looks like this:
|
||||
|
||||
```html
|
||||
<a href="https://github.com/upstage/" title="Visit Upstage!">Upstage</a>
|
||||
```
|
||||
|
||||
### Named Anchors
|
||||
|
||||
Named anchors enable you to jump to the specified anchor point on the same page. For example, each of these chapters:
|
||||
|
||||
```markdown
|
||||
## Table of Contents
|
||||
* [Chapter 1](#chapter-1)
|
||||
* [Chapter 2](#chapter-2)
|
||||
* [Chapter 3](#chapter-3)
|
||||
```
|
||||
|
||||
will jump to these sections:
|
||||
|
||||
```markdown
|
||||
## Chapter 1 <a id="chapter-1"></a>
|
||||
Content for chapter one.
|
||||
|
||||
## Chapter 2 <a id="chapter-2"></a>
|
||||
Content for chapter one.
|
||||
|
||||
## Chapter 3 <a id="chapter-3"></a>
|
||||
Content for chapter one.
|
||||
```
|
||||
|
||||
{{< admonition >}}
|
||||
The specific placement of the anchor tag seems to be arbitrary. They are placed inline here since it seems to be unobtrusive, and it works.
|
||||
{{< /admonition >}}
|
||||
|
||||
## 12 Footnotes
|
||||
|
||||
Footnotes allow you to add notes and references without cluttering the body of the document. When you create a footnote, a superscript number with a link appears where you added the footnote reference. Readers can click the link to jump to the content of the footnote at the bottom of the page.
|
||||
|
||||
To create a footnote reference, add a caret and an identifier inside brackets (`[^1]`). Identifiers can be numbers or words, but they can’t contain spaces or tabs. Identifiers only correlate the footnote reference with the footnote itself — in the output, footnotes are numbered sequentially.
|
||||
|
||||
Add the footnote using another caret and number inside brackets with a colon and text (`[^1]: My footnote.`). You don’t have to put footnotes at the end of the document. You can put them anywhere except inside other elements like lists, block quotes, and tables.
|
||||
|
||||
```markdown
|
||||
This is a digital footnote[^1].
|
||||
This is a footnote with "label"[^label]
|
||||
|
||||
[^1]: This is a digital footnote
|
||||
[^label]: This is a footnote with "label"
|
||||
```
|
||||
|
||||
This is a digital footnote[^1].
|
||||
|
||||
This is a footnote with "label"[^label]
|
||||
|
||||
[^1]: This is a digital footnote
|
||||
[^label]: This is a footnote with "label"
|
||||
|
||||
## 13 Images
|
||||
|
||||
Images have a similar syntax to links but include a preceding exclamation point.
|
||||
|
||||
```markdown
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
or:
|
||||
|
||||
```markdown
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
Like links, images also have a footnote style syntax:
|
||||
|
||||
```markdown
|
||||
![Alt text][id]
|
||||
```
|
||||
|
||||
![Alt text][id]
|
||||
|
||||
With a reference later in the document defining the URL location:
|
||||
|
||||
```markdown
|
||||
[id]: https://octodex.github.com/images/dojocat.jpg "The Dojocat"
|
||||
```
|
||||
|
||||
[id]: https://octodex.github.com/images/dojocat.jpg "The Dojocat"
|
||||
|
||||
{{< admonition tip >}}
|
||||
**KeepIt** theme has [special shortcode for image](../theme-documentation-extended-shortcodes#image), which provides more features.
|
||||
{{< /admonition >}}
|
||||
BIN
themes/keepit/content/posts/emoji-support/featured-image.jpg
Normal file
BIN
themes/keepit/content/posts/emoji-support/featured-image.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
1285
themes/keepit/content/posts/emoji-support/index.en.md
Normal file
1285
themes/keepit/content/posts/emoji-support/index.en.md
Normal file
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
After Width: | Height: | Size: 94 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 106 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 114 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 115 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 151 KiB |
1035
themes/keepit/content/posts/theme-documentation-basics/index.en.md
Normal file
1035
themes/keepit/content/posts/theme-documentation-basics/index.en.md
Normal file
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
After Width: | Height: | Size: 280 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 114 KiB |
@@ -0,0 +1,65 @@
|
||||
---
|
||||
weight: 9
|
||||
title: "Theme Documentation - bilibili Shortcode"
|
||||
date: 2020-03-03T11:29:41+08:00
|
||||
lastmod: 2020-03-03T12:29:41+08:00
|
||||
draft: true
|
||||
author: "Dillon"
|
||||
authorLink: "https://dillonzq.com"
|
||||
description: "The bilibili shortcode embeds a responsive video player for bilibili videos."
|
||||
images: []
|
||||
resources:
|
||||
- name: "featured-image"
|
||||
src: "featured-image.jpg"
|
||||
|
||||
tags: ["shortcodes"]
|
||||
categories: ["documentation"]
|
||||
|
||||
hiddenFromHomePage: true
|
||||
|
||||
toc:
|
||||
enable: false
|
||||
---
|
||||
|
||||
{{< version 0.2.0 changed >}}
|
||||
|
||||
The `bilibili` shortcode embeds a responsive video player for bilibili videos.
|
||||
|
||||
<!--more-->
|
||||
|
||||
When the video only has one part, only the BV `id` of the video is required, e.g.:
|
||||
|
||||
```code
|
||||
https://www.bilibili.com/video/BV1Sx411T7QQ
|
||||
```
|
||||
|
||||
Example `bilibili` input:
|
||||
|
||||
```markdown
|
||||
{{</* bilibili BV1Sx411T7QQ */>}}
|
||||
Or
|
||||
{{</* bilibili id=BV1Sx411T7QQ */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< bilibili id=BV1Sx411T7QQ >}}
|
||||
|
||||
When the video has multiple parts, in addition to the BV `id` of the video,
|
||||
`p` is also required, whose default value is `1`, e.g.:
|
||||
|
||||
```code
|
||||
https://www.bilibili.com/video/BV1TJ411C7An?p=3
|
||||
```
|
||||
|
||||
Example `bilibili` input with `p`:
|
||||
|
||||
```markdown
|
||||
{{</* bilibili BV1TJ411C7An 3 */>}}
|
||||
Or
|
||||
{{</* bilibili id=BV1TJ411C7An p=3 */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< bilibili id=BV1TJ411C7An p=3 >}}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
@@ -0,0 +1,179 @@
|
||||
---
|
||||
weight: 3
|
||||
title: "Theme Documentation - Built-in Shortcodes"
|
||||
date: 2020-03-04T16:29:41+08:00
|
||||
lastmod: 2020-03-04T16:29:41+08:00
|
||||
draft: true
|
||||
author: "Dillon"
|
||||
authorLink: "https://dillonzq.com"
|
||||
description: "Hugo provides multiple built-in shortcodes for author convenience and to keep your markdown content clean."
|
||||
images: []
|
||||
resources:
|
||||
- name: "featured-image"
|
||||
src: "featured-image.png"
|
||||
|
||||
tags: ["shortcodes"]
|
||||
categories: ["documentation"]
|
||||
|
||||
lightgallery: true
|
||||
---
|
||||
|
||||
**Hugo** provides multiple built-in shortcodes for author convenience and to keep your markdown content clean.
|
||||
|
||||
<!--more-->
|
||||
|
||||
Hugo uses Markdown for its simple content format. However, there are a lot of things that Markdown doesn’t support well. You could use pure HTML to expand possibilities.
|
||||
|
||||
But this happens to be a bad idea. Everyone uses Markdown because it’s pure and simple to read even non-rendered. You should avoid HTML to keep it as simple as possible.
|
||||
|
||||
To avoid this limitations, Hugo created [shortcodes](https://gohugo.io/extras/shortcodes/).
|
||||
A shortcode is a simple snippet that can generate reasonable HTML code and conforms to Markdown's design philosophy.
|
||||
|
||||
Hugo ships with a set of predefined shortcodes that represent very common usage. These shortcodes are provided for author convenience and to keep your markdown content clean.
|
||||
|
||||
## 1 figure {#figure}
|
||||
|
||||
[Documentation of `figure`](https://gohugo.io/content-management/shortcodes#figure)
|
||||
|
||||
Example `figure` input:
|
||||
|
||||
```markdown
|
||||
{{</* figure src="/images/lighthouse.jpg" title="Lighthouse (figure)" */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< figure src="/images/lighthouse.jpg" title="Lighthouse (figure)" >}}
|
||||
|
||||
The HTML looks like this:
|
||||
|
||||
```html
|
||||
<figure>
|
||||
<img src="/images/lighthouse.jpg"/>
|
||||
<figcaption>
|
||||
<h4>Lighthouse (figure)</h4>
|
||||
</figcaption>
|
||||
</figure>
|
||||
```
|
||||
|
||||
## 2 gist
|
||||
|
||||
[Documentation of `gist`](https://gohugo.io/content-management/shortcodes#gist)
|
||||
|
||||
Example `gist` input:
|
||||
|
||||
```markdown
|
||||
{{</* gist spf13 7896402 */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< gist spf13 7896402 >}}
|
||||
|
||||
The HTML looks like this:
|
||||
|
||||
```html
|
||||
<script type="application/javascript" src="https://gist.github.com/spf13/7896402.js"></script>
|
||||
```
|
||||
|
||||
## 3 highlight
|
||||
|
||||
[Documentation of `highlight`](https://gohugo.io/content-management/shortcodes#instagram)
|
||||
|
||||
Example `highlight` input:
|
||||
|
||||
```markdown
|
||||
{{</* highlight html */>}}
|
||||
<section id="main">
|
||||
<div>
|
||||
<h1 id="title">{{ .Title }}</h1>
|
||||
{{ range .Pages }}
|
||||
{{ .Render "summary"}}
|
||||
{{ end }}
|
||||
</div>
|
||||
</section>
|
||||
{{</* /highlight */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< highlight html >}}
|
||||
<section id="main">
|
||||
<div>
|
||||
<h1 id="title">{{ .Title }}</h1>
|
||||
{{ range .Pages }}
|
||||
{{ .Render "summary"}}
|
||||
{{ end }}
|
||||
</div>
|
||||
</section>
|
||||
{{< /highlight >}}
|
||||
|
||||
## 4 instagram
|
||||
|
||||
[Documentation of `instagram`](https://gohugo.io/content-management/shortcodes#instagram)
|
||||
|
||||
{{< admonition question "Instagram’s API was deprecated since October 24th, 2020" >}}
|
||||
The instagram-shortcode refers an endpoint of Instagram’s API, that’s deprecated since October 24th, 2020.
|
||||
Thus, no images can be fetched from this API endpoint, resulting in an error when the instagram-shortcode is used.
|
||||
For more information please have a look at GitHub issue [#7879](https://github.com/gohugoio/hugo/issues/7879).
|
||||
{{< /admonition >}}
|
||||
|
||||
## 5 param
|
||||
|
||||
[Documentation of `param`](https://gohugo.io/content-management/shortcodes#param)
|
||||
|
||||
Example `param` input:
|
||||
|
||||
```markdown
|
||||
{{</* param description */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< param description >}}
|
||||
|
||||
## 6 ref and relref {#ref-and-relref}
|
||||
|
||||
[Documentation of `ref` and `relref`](https://gohugo.io/content-management/shortcodes#ref-and-relref)
|
||||
|
||||
## 7 tweet
|
||||
|
||||
[Documentation of `tweet`](https://gohugo.io/content-management/shortcodes#tweet)
|
||||
|
||||
Example `tweet` input:
|
||||
|
||||
```markdown
|
||||
{{</* tweet 917359331535966209 */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
<!-- {{< tweet 917359331535966209 >}} -->
|
||||
|
||||
## 8 vimeo
|
||||
|
||||
[Documentation of `vimeo`](https://gohugo.io/content-management/shortcodes#vimeo)
|
||||
|
||||
Example `vimeo` input:
|
||||
|
||||
```markdown
|
||||
{{</* vimeo 146022717 */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< vimeo 146022717 >}}
|
||||
|
||||
## 9 youtube
|
||||
|
||||
[Documentation of `youtube`](https://gohugo.io/content-management/shortcodes#youtube)
|
||||
|
||||
Example `youtube` input:
|
||||
|
||||
```markdown
|
||||
{{</* youtube w7Ft2ymGmfc */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< youtube w7Ft2ymGmfc >}}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 289 KiB |
@@ -0,0 +1,518 @@
|
||||
---
|
||||
weight: 2
|
||||
title: "Theme Documentation - Content"
|
||||
date: 2020-03-05T15:58:26+08:00
|
||||
lastmod: 2020-03-05T15:58:26+08:00
|
||||
draft: true
|
||||
author: "Dillon"
|
||||
authorLink: "https://dillonzq.com"
|
||||
description: "Find out how to create and organize your content quickly and intuitively in KeepIt theme."
|
||||
images: []
|
||||
resources:
|
||||
- name: "featured-image"
|
||||
src: "featured-image.jpg"
|
||||
|
||||
tags: ["content", "Markdown"]
|
||||
categories: ["documentation"]
|
||||
|
||||
lightgallery: true
|
||||
|
||||
toc:
|
||||
auto: false
|
||||
math:
|
||||
enable: true
|
||||
---
|
||||
|
||||
Find out how to create and organize your content quickly and intuitively in **KeepIt** theme.
|
||||
|
||||
<!--more-->
|
||||
|
||||
## 1 Contents Organization {#contents-organization}
|
||||
|
||||
A few suggestions to help you get a good looking site quickly:
|
||||
|
||||
* Keep post pages in the `content/posts` directory, for example: `content/posts/my-first-post.md`
|
||||
* Keep other pages in the `content` directory, for example: `content/about.md`
|
||||
* Local resources organization
|
||||
|
||||
{{< admonition note "Local Resource Reference" >}}
|
||||
{{< version 0.2.10 >}}
|
||||
|
||||
There are three ways to reference local resources such as **images** and **music**:
|
||||
|
||||
1. Using [page resources](https://gohugo.io/content-management/page-resources/) in [page bundles](https://gohugo.io/content-management/page-bundles/).
|
||||
You can reference page resources by the value for `Resources.GetMatch` or the filepath of the resource relative to the page directory directly.
|
||||
2. Store resources in the **assets** directory, which is `/assets` by default.
|
||||
The filepath of the resource to reference in the post is relative to the assets directory.
|
||||
3. Store resources in the **static** directory, which is `/static` by default.
|
||||
The filepath of the resource to reference in the post is relative to the static directory.
|
||||
|
||||
The **priority** of references is also in the above order.
|
||||
|
||||
There are many places in the theme where the above local resource references can be used,
|
||||
such as **links**, **images**, `image` shortcode, `music` shortcode and some params in the **front matter**.
|
||||
|
||||
Images in page resources or assets directory [processing](https://gohugo.io/content-management/image-processing/)
|
||||
will be supported in the future.
|
||||
It's really cool! :(far fa-grin-squint fa-fw):
|
||||
{{< /admonition >}}
|
||||
|
||||
## 2 Front Matter {#front-matter}
|
||||
|
||||
**Hugo** allows you to add front matter in `yaml`, `toml` or `json` to your content files.
|
||||
|
||||
{{< admonition >}}
|
||||
**Not all** of the below front matters need to be set in each of your posts.
|
||||
It is necessary only if the front matters and the `page` part in your [site configuration](../theme-documentation-basics#site-configuration) are inconsistent.
|
||||
{{< /admonition >}}
|
||||
|
||||
Here is a front matter example:
|
||||
|
||||
```yaml
|
||||
---
|
||||
title: "My First Post"
|
||||
subtitle: ""
|
||||
date: 2020-03-04T15:58:26+08:00
|
||||
lastmod: 2020-03-04T15:58:26+08:00
|
||||
draft: true
|
||||
author: ""
|
||||
authorLink: ""
|
||||
description: ""
|
||||
license: ""
|
||||
images: []
|
||||
|
||||
tags: []
|
||||
categories: []
|
||||
|
||||
featuredImage: ""
|
||||
featuredImagePreview: ""
|
||||
|
||||
hiddenFromHomePage: false
|
||||
hiddenFromSearch: false
|
||||
twemoji: false
|
||||
lightgallery: true
|
||||
ruby: true
|
||||
fraction: true
|
||||
fontawesome: true
|
||||
linkToMarkdown: true
|
||||
rssFullText: false
|
||||
|
||||
toc:
|
||||
enable: true
|
||||
auto: true
|
||||
code:
|
||||
copy: true
|
||||
maxShownLines: 50
|
||||
math:
|
||||
enable: false
|
||||
# ...
|
||||
mapbox:
|
||||
# ...
|
||||
share:
|
||||
enable: true
|
||||
# ...
|
||||
comment:
|
||||
enable: true
|
||||
# ...
|
||||
library:
|
||||
css:
|
||||
# someCSS = "some.css"
|
||||
# located in "assets/"
|
||||
# Or
|
||||
# someCSS = "https://cdn.example.com/some.css"
|
||||
js:
|
||||
# someJS = "some.js"
|
||||
# located in "assets/"
|
||||
# Or
|
||||
# someJS = "https://cdn.example.com/some.js"
|
||||
seo:
|
||||
images: []
|
||||
# ...
|
||||
---
|
||||
```
|
||||
|
||||
* **title**: the title for the content.
|
||||
* **subtitle**: {{< version 0.2.0 >}} the subtitle for the content.
|
||||
* **date**: the datetime assigned to this page, which is usually fetched from the `date` field in front matter, but this behaviour is configurabl in the [site configuration](../theme-documentation-basics#site-configuration).
|
||||
* **lastmod**: the datetime at which the content was last modified.
|
||||
* **draft**: if `true`, the content will not be rendered unless the `--buildDrafts`/`-D` flag is passed to the `hugo` command.
|
||||
* **author**: the author for the content.
|
||||
* **authorLink**: the link of the author.
|
||||
* **description**: the description for the content.
|
||||
* **license**: the special lisence for this content.
|
||||
* **images**: page images for Open Graph and Twitter Cards.
|
||||
|
||||
* **tags**: the tags for the content.
|
||||
* **categories**: the categories for the content.
|
||||
|
||||
* **featuredImage**: the featured image for the content.
|
||||
* **featuredImagePreview**: the featured image for the content preview in the home page.
|
||||
|
||||
* **hiddenFromHomePage**: if `true`, the content will not be shown in the home page.
|
||||
* **hiddenFromSearch**: {{< version 0.2.0 >}} if `true`, the content will not be shown in the search results.
|
||||
* **twemoji**: {{< version 0.2.0 >}} if `true`, the content will enable the twemoji.
|
||||
* **lightgallery**: if `true`, images in the content will be shown as the gallery.
|
||||
* **ruby**: {{< version 0.2.0 >}} if `true`, the content will enable the [ruby extended syntax](#ruby).
|
||||
* **fraction**: {{< version 0.2.0 >}} if `true`, the content will enable the [fraction extended syntax](#fraction).
|
||||
* **fontawesome**: {{< version 0.2.0 >}} if `true`, the content will enable the [Font Awesome extended syntax](#fontawesome).
|
||||
* **linkToMarkdown**: if `true`, the footer of the content will be shown the link to the orignal Markdown file.
|
||||
* **rssFullText**: {{< version 0.2.4 >}} if `true`, the full text content will be shown in RSS.
|
||||
|
||||
* **toc**: {{< version 0.2.9 changed >}} the same as the `params.page.toc` part in the [site configuration](../theme-documentation-basics#site-configuration).
|
||||
* **code**: {{< version 0.2.0 >}} the same as the `params.page.code` part in the [site configuration](../theme-documentation-basics#site-configuration).
|
||||
* **math**: {{< version 0.2.0 changed >}} the same as the `params.page.math` part in the [site configuration](../theme-documentation-basics#site-configuration).
|
||||
* **mapbox**: {{< version 0.2.0 >}} the same as the `params.page.mapbox` part in the [site configuration](../theme-documentation-basics#site-configuration).
|
||||
* **share**: the same as the `params.page.share` part in the [site configuration](../theme-documentation-basics#site-configuration).
|
||||
* **comment**: {{< version 0.2.0 changed >}} the same as the `params.page.comment` part in the [site configuration](../theme-documentation-basics#site-configuration).
|
||||
* **library**: {{< version 0.2.7 >}} the same as the `params.page.library` part in the [site configuration](../theme-documentation-basics#site-configuration).
|
||||
* **seo**: {{< version 0.2.10 >}} the same as the `params.page.seo` part in the [site configuration](../theme-documentation-basics#site-configuration).
|
||||
|
||||
{{< admonition tip >}}
|
||||
{{< version 0.2.10 >}}
|
||||
|
||||
**featuredImage** and **featuredImagePreview** support the complete usage of [local resource references](#contents-organization).
|
||||
|
||||
If the page resource with `name: featured-image` or `name: featured-image-preview` is set in the front matter,
|
||||
it is not necessary to set the parameter `featuredImage` or `featuredImagePreview`:
|
||||
|
||||
```yaml
|
||||
resources:
|
||||
- name: featured-image
|
||||
src: featured-image.jpg
|
||||
- name: featured-image-preview
|
||||
src: featured-image-preview.jpg
|
||||
```
|
||||
{{< /admonition >}}
|
||||
|
||||
## 3 Content Summaries
|
||||
|
||||
**KeepIt** theme uses the summary of the content to display abstract information in the home page. Hugo can generate summaries of your content.
|
||||
|
||||
|
||||
|
||||
### Automatic Summary Splitting
|
||||
|
||||
By default, Hugo automatically takes the first 70 words of your content as its summary.
|
||||
|
||||
You may customize the summary length by setting `summaryLength` in the [site configuration](../theme-documentation-basics#site-configuration).
|
||||
|
||||
If you are creating content in a [CJK]^(Chinese/Japanese/Korean) language and want to use Hugo’s automatic summary splitting, set `hasCJKLanguage` to `true` in your [site configuration](../theme-documentation-basics#site-configuration).
|
||||
|
||||
### Manual Summary Splitting
|
||||
|
||||
Alternatively, you may add the `<!--more-->` summary divider where you want to split the article.
|
||||
|
||||
Content that comes before the summary divider will be used as that content’s summary.
|
||||
|
||||
{{< admonition >}}
|
||||
Be careful to enter `<!--more-->` exactly; i.e., all lowercase and with no whitespace.
|
||||
{{< /admonition >}}
|
||||
|
||||
### Front Matter Summary
|
||||
|
||||
You might want your summary to be something other than the text that starts the article. In this case you can provide a separate summary in the `summary` variable of the article front matter.
|
||||
|
||||
### Use Description as Summary
|
||||
|
||||
You might want your description in the `description` variable of the article front matter as the summary.
|
||||
|
||||
You may add the `<!--more-->` summary divider at the start of the article. Keep content that comes before the summary divider empty. Then **KeepIt** theme will use your description as the summary.
|
||||
|
||||
### Priority Order of Summary Selection
|
||||
|
||||
Because there are multiple ways in which a summary can be specified it is useful to understand the order. It is as follows:
|
||||
|
||||
1. If there is a `<!--more-->` summary divider present in the article but no content is before the divider, the description will be used as the summary.
|
||||
2. If there is a `<!--more-->` summary divider present in the article the text up to the divider will be provided as per the manual summary split method.
|
||||
3. If there is a summary variable in the article front matter the value of the variable will be provided as per the front matter summary method.
|
||||
4. The text at the start of the article will be provided as per the automatic summary split method.
|
||||
|
||||
{{< admonition >}}
|
||||
It is not recommended to include rich text block elements in the summary, which will cause typographic errors. Such as code blocks, pictures, tables, etc.
|
||||
{{< /admonition >}}
|
||||
|
||||
## 4 Basic Markdown Syntax
|
||||
|
||||
This part is shown in the [basic markdown syntax page](../basic-markdown-syntax/).
|
||||
|
||||
## 5 Extended Markdown Syntax {#extended-markdown-syntax}
|
||||
|
||||
**KeepIt** theme has some extended syntax elements for you to write articles.
|
||||
|
||||
### Emoji Support
|
||||
|
||||
This part is shown in the [emoji support page](../emoji-support/).
|
||||
|
||||
### Mathematical Formula
|
||||
|
||||
{{< version 0.2.11 changed >}}
|
||||
|
||||
**KeepIt** theme supports mathematical formulas based on [$\KaTeX$](https://katex.org/).
|
||||
|
||||
Set the property `enable = true` under `[params.math]` in your [site configuration](../theme-documentation-basics#site-configuration)
|
||||
and the property `math: true` of the article front matter to enable the automatic rendering of mathematical formulas.
|
||||
**$\KaTeX$** automatically renders formulas based on **specific delimiters**.
|
||||
|
||||
{{< admonition tip >}}
|
||||
Here is a list of [$\TeX$ functions supported by $\KaTeX$](https://katex.org/docs/supported.html).
|
||||
{{< /admonition >}}
|
||||
|
||||
{{< admonition >}}
|
||||
Since Hugo generates HTML documents according to the syntax such as `_`/`*`/`>>` when rendering Markdown documents,
|
||||
and some text content in the form of escape characters
|
||||
(such as `\(`/`\)`/`\[`/`\]`/`\\`) escape processing will be performed automatically,
|
||||
therefore, additional escape character expressions are required for these places to achieve automatic rendering:
|
||||
|
||||
* `_` -> `\_`
|
||||
* `*` -> `\*`
|
||||
* `>>` -> `\>>`
|
||||
* `\(` -> `\\(`
|
||||
* `\)` -> `\\)`
|
||||
* `\[` -> `\\[`
|
||||
* `\]` -> `\\]`
|
||||
* `\\` -> `\\\\`
|
||||
|
||||
**KeepIt** theme supports [`raw` shortcode](../theme-documentation-extended-shortcodes#12-raw) to avoid these escape characters,
|
||||
which helps you write raw mathematical formula content.
|
||||
|
||||
Example `raw` input:
|
||||
|
||||
```markdown
|
||||
Inline Formula: {{</* raw */>}}\(\mathbf{E}=\sum_{i} \mathbf{E}_{i}=\mathbf{E}_{1}+\mathbf{E}_{2}+\mathbf{E}_{3}+\cdots\){{</* /raw */>}}
|
||||
|
||||
Block Formula:
|
||||
|
||||
{{</* raw */>}}
|
||||
\[ a=b+c \\ d+e=f \]
|
||||
{{</* /raw */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
Inline Formula: {{< raw >}}\(\mathbf{E}=\sum_{i} \mathbf{E}_{i}=\mathbf{E}_{1}+\mathbf{E}_{2}+\mathbf{E}_{3}+\cdots\){{< /raw >}}
|
||||
|
||||
Block Formula:
|
||||
|
||||
{{< raw>}}
|
||||
\[ a=b+c \\ d+e=f \]
|
||||
{{< /raw >}}
|
||||
{{< /admonition >}}
|
||||
|
||||
#### Inline Formula
|
||||
|
||||
The default inline delimiters are:
|
||||
|
||||
* `$ ... $`
|
||||
* `\( ... \)` (escaped: `\\( ... \\)`)
|
||||
|
||||
For example:
|
||||
|
||||
```tex
|
||||
$c = \pm\sqrt{a^2 + b^2}$ and \\(f(x)=\int_{-\infty}^{\infty} \hat{f}(\xi) e^{2 \pi i \xi x} d \xi\\)
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
$c = \pm\sqrt{a^2 + b^2}$ and \\(f(x)=\int_{-\infty}^{\infty} \hat{f}(\xi) e^{2 \pi i \xi x} d \xi\\)
|
||||
|
||||
#### Block Formula
|
||||
|
||||
The default block delimiters are:
|
||||
|
||||
* `$$ ... $$`
|
||||
* `\[ ... \]` (escaped: `\\[ ... \\]`)
|
||||
* `\begin{equation} ... \end{equation}` (unnumbered: `\begin{equation*} ... \end{equation*}`)
|
||||
* `\begin{align} ... \end{align}` (unnumbered: `\begin{align*} ... \end{align*}`)
|
||||
* `\begin{alignat} ... \end{alignat}` (unnumbered: `\begin{alignat*} ... \end{alignat*}`)
|
||||
* `\begin{gather} ... \end{gather}` (unnumbered: `\begin{gather*} ... \end{gather*}`)
|
||||
* `\begin{CD} ... \end{CD}`
|
||||
|
||||
For example:
|
||||
|
||||
```tex
|
||||
$$ c = \pm\sqrt{a^2 + b^2} $$
|
||||
|
||||
\\[ f(x)=\int_{-\infty}^{\infty} \hat{f}(\xi) e^{2 \pi i \xi x} d \xi \\]
|
||||
|
||||
\begin{equation*}
|
||||
\rho \frac{\mathrm{D} \mathbf{v}}{\mathrm{D} t}=\nabla \cdot \mathbb{P}+\rho \mathbf{f}
|
||||
\end{equation*}
|
||||
|
||||
\begin{equation}
|
||||
\mathbf{E}=\sum_{i} \mathbf{E}\_{i}=\mathbf{E}\_{1}+\mathbf{E}\_{2}+\mathbf{E}_{3}+\cdots
|
||||
\end{equation}
|
||||
|
||||
\begin{align}
|
||||
a&=b+c \\\\
|
||||
d+e&=f
|
||||
\end{align}
|
||||
|
||||
\begin{alignat}{2}
|
||||
10&x+&3&y = 2 \\\\
|
||||
3&x+&13&y = 4
|
||||
\end{alignat}
|
||||
|
||||
\begin{gather}
|
||||
a=b \\\\
|
||||
e=b+c
|
||||
\end{gather}
|
||||
|
||||
\begin{CD}
|
||||
A @>a\>> B \\\\
|
||||
@VbVV @AAcA \\\\
|
||||
C @= D
|
||||
\end{CD}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
$$ c = \pm\sqrt{a^2 + b^2} $$
|
||||
|
||||
\\[ f(x)=\int_{-\infty}^{\infty} \hat{f}(\xi) e^{2 \pi i \xi x} d \xi \\]
|
||||
|
||||
\begin{equation*}
|
||||
\rho \frac{\mathrm{D} \mathbf{v}}{\mathrm{D} t}=\nabla \cdot \mathbb{P}+\rho \mathbf{f}
|
||||
\end{equation*}
|
||||
|
||||
\begin{equation}
|
||||
\mathbf{E}=\sum_{i} \mathbf{E}\_{i}=\mathbf{E}\_{1}+\mathbf{E}\_{2}+\mathbf{E}_{3}+\cdots
|
||||
\end{equation}
|
||||
|
||||
\begin{align}
|
||||
a&=b+c \\\\
|
||||
d+e&=f
|
||||
\end{align}
|
||||
|
||||
\begin{alignat}{2}
|
||||
10&x+&3&y = 2 \\\\
|
||||
3&x+&13&y = 4
|
||||
\end{alignat}
|
||||
|
||||
\begin{gather}
|
||||
a=b \\\\
|
||||
e=b+c
|
||||
\end{gather}
|
||||
|
||||
\begin{CD}
|
||||
A @>a\>> B \\\\
|
||||
@VbVV @AAcA \\\\
|
||||
C @= D
|
||||
\end{CD}
|
||||
|
||||
{{< admonition tip >}}
|
||||
You can add more inline and block delimiters in your [site configuration](../theme-documentation-basics#site-configuration).
|
||||
{{< /admonition >}}
|
||||
|
||||
#### Copy-tex
|
||||
|
||||
**[Copy-tex](https://github.com/Khan/KaTeX/tree/master/contrib/copy-tex)** is an extension for **$\KaTeX$**.
|
||||
|
||||
By the extension, when selecting and copying $\KaTeX$ rendered elements, copies their $\LaTeX$ source to the clipboard.
|
||||
|
||||
Set the property `copyTex = true` under `[params.math]` in your [site configuration](../theme-documentation-basics#site-configuration) to enable Copy-tex.
|
||||
|
||||
Select and copy the formula rendered in the previous section, and you can find that the copied content is the $\LaTeX$ source code.
|
||||
|
||||
#### mhchem
|
||||
|
||||
**[mhchem](https://github.com/Khan/KaTeX/tree/master/contrib/mhchem)** is an extension for **$\KaTeX$**.
|
||||
|
||||
By the extension, you can write beautiful chemical equations easily in the article.
|
||||
|
||||
Set the property `mhchem = true` under `[params.math]` in your [site configuration](../theme-documentation-basics#site-configuration) to enable mhchem.
|
||||
|
||||
```markdown
|
||||
$$ \ce{CO2 + C -> 2 CO} $$
|
||||
|
||||
$$ \ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-} $$
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
$$ \ce{CO2 + C -> 2 CO} $$
|
||||
|
||||
$$ \ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-} $$
|
||||
|
||||
### Ruby Annotation {#ruby}
|
||||
|
||||
An extended Markdown syntax for **ruby annotation** is supported in **KeepIt** theme:
|
||||
|
||||
```markdown
|
||||
[Hugo]{?^}(An open-source static site generator)
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
[Hugo]^(An open-source static site generator)
|
||||
|
||||
### Fraction {#fraction}
|
||||
|
||||
{{< version 0.2.0 >}}
|
||||
|
||||
An extended Markdown syntax for **fraction** is supported in **KeepIt** theme:
|
||||
|
||||
```markdown
|
||||
[Light]{?/}[Dark]
|
||||
|
||||
[99]{?/}[100]
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
[Light]/[Dark]
|
||||
|
||||
[90]/[100]
|
||||
|
||||
### Font Awesome {#fontawesome}
|
||||
|
||||
**KeepIt** theme uses [Font Awesome](https://fontawesome.com/) as the icon library.
|
||||
You can easily use these icons in your articles.
|
||||
|
||||
Get the `class` of icons you wanted from the [Font Awesome website](https://fontawesome.com/icons?d=gallery).
|
||||
|
||||
```markdown
|
||||
Gone camping! {?:}(fas fa-campground fa-fw): Be back soon.
|
||||
|
||||
That is so funny! {?:}(far fa-grin-tears):
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
Gone camping! :(fas fa-campground fa-fw): Be back soon.
|
||||
|
||||
That is so funny! :(far fa-grin-tears):
|
||||
|
||||
### Escape character {#escape-character}
|
||||
|
||||
In some special cases (when writing this theme documentation :(far fa-grin-squint-tears):),
|
||||
your content will conflict with basic or extended Markdown syntax, and it is inevitable.
|
||||
|
||||
The escape character syntax can help you build the content you wanted:
|
||||
|
||||
```markdown
|
||||
{{??}X} -> X
|
||||
```
|
||||
|
||||
For example, two `:` will enable emoji syntax, which is not the behavior you want. The escape character syntax is like this:
|
||||
|
||||
```markdown
|
||||
{{??}:}joy:
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
**{?:}joy{?:}** instead of **:joy:**
|
||||
|
||||
{{< admonition tip >}}
|
||||
This is related to **[an issue for Hugo](https://github.com/gohugoio/hugo/issues/4978)**, which has not been resolved.
|
||||
{{< /admonition >}}
|
||||
|
||||
Another example is:
|
||||
|
||||
```markdown
|
||||
[link{{??}]}(#escape-character)
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
**[link{?]}(#escape-character)** instead of **[link](#escape-character)**.
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 272 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
@@ -0,0 +1,414 @@
|
||||
---
|
||||
weight: 6
|
||||
title: "Theme Documentation - echarts Shortcode"
|
||||
date: 2020-03-03T14:29:41+08:00
|
||||
lastmod: 2020-03-03T14:29:41+08:00
|
||||
draft: true
|
||||
author: "Dillon"
|
||||
authorLink: "https://dillonzq.com"
|
||||
description: "The echarts shortcode supports data visualization in Hugo with ECharts library."
|
||||
images: []
|
||||
resources:
|
||||
- name: "featured-image"
|
||||
src: "featured-image.jpg"
|
||||
|
||||
tags: ["shortcodes"]
|
||||
categories: ["documentation"]
|
||||
|
||||
hiddenFromHomePage: true
|
||||
|
||||
toc:
|
||||
enable: false
|
||||
code:
|
||||
maxShownLines: 70
|
||||
---
|
||||
|
||||
The `echarts` shortcode supports data visualization in Hugo with [ECharts](https://echarts.apache.org/) library.
|
||||
|
||||
<!--more-->
|
||||
|
||||
**ECharts** is a library helping you to generate interactive data visualization.
|
||||
|
||||
The basic chart types ECharts supports include [line series](https://echarts.apache.org/en/option.html#series-line), [bar series](https://echarts.apache.org/en/option.html#series-line), [scatter series](https://echarts.apache.org/en/option.html#series-scatter), [pie charts](https://echarts.apache.org/en/option.html#series-pie), [candle-stick series](https://echarts.apache.org/en/option.html#series-candlestick), [boxplot series](https://echarts.apache.org/en/option.html#series-boxplot) for statistics, [map series](https://echarts.apache.org/en/option.html#series-map), [heatmap series](https://echarts.apache.org/en/option.html#series-heatmap), [lines series](https://echarts.apache.org/en/option.html#series-lines) for directional information, [graph series](https://echarts.apache.org/en/option.html#series-graph) for relationships, [treemap series](https://echarts.apache.org/en/option.html#series-treemap), [sunburst series](https://echarts.apache.org/en/option.html#series-sunburst), [parallel series](https://echarts.apache.org/en/option.html#series-parallel) for multi-dimensional data, [funnel series](https://echarts.apache.org/en/option.html#series-funnel), [gauge series](https://echarts.apache.org/en/option.html#series-gauge). And it's extremely easy to create a combinition of them with ECharts.
|
||||
|
||||
Just insert your ECharts option in `JSON`/`YAML`/`TOML` format in the `echarts` shortcode and that’s it.
|
||||
|
||||
Example `echarts` input in `JSON` format:
|
||||
|
||||
```json
|
||||
{{</* echarts */>}}
|
||||
{
|
||||
"title": {
|
||||
"text": "Summary Line Chart",
|
||||
"top": "2%",
|
||||
"left": "center"
|
||||
},
|
||||
"tooltip": {
|
||||
"trigger": "axis"
|
||||
},
|
||||
"legend": {
|
||||
"data": ["Email Marketing", "Affiliate Advertising", "Video Advertising", "Direct View", "Search Engine"],
|
||||
"top": "10%"
|
||||
},
|
||||
"grid": {
|
||||
"left": "5%",
|
||||
"right": "5%",
|
||||
"bottom": "5%",
|
||||
"top": "20%",
|
||||
"containLabel": true
|
||||
},
|
||||
"toolbox": {
|
||||
"feature": {
|
||||
"saveAsImage": {
|
||||
"title": "Save as Image"
|
||||
}
|
||||
}
|
||||
},
|
||||
"xAxis": {
|
||||
"type": "category",
|
||||
"boundaryGap": false,
|
||||
"data": ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"]
|
||||
},
|
||||
"yAxis": {
|
||||
"type": "value"
|
||||
},
|
||||
"series": [
|
||||
{
|
||||
"name": "Email Marketing",
|
||||
"type": "line",
|
||||
"stack": "Total",
|
||||
"data": [120, 132, 101, 134, 90, 230, 210]
|
||||
},
|
||||
{
|
||||
"name": "Affiliate Advertising",
|
||||
"type": "line",
|
||||
"stack": "Total",
|
||||
"data": [220, 182, 191, 234, 290, 330, 310]
|
||||
},
|
||||
{
|
||||
"name": "Video Advertising",
|
||||
"type": "line",
|
||||
"stack": "Total",
|
||||
"data": [150, 232, 201, 154, 190, 330, 410]
|
||||
},
|
||||
{
|
||||
"name": "Direct View",
|
||||
"type": "line",
|
||||
"stack": "Total",
|
||||
"data": [320, 332, 301, 334, 390, 330, 320]
|
||||
},
|
||||
{
|
||||
"name": "Search Engine",
|
||||
"type": "line",
|
||||
"stack": "Total",
|
||||
"data": [820, 932, 901, 934, 1290, 1330, 1320]
|
||||
}
|
||||
]
|
||||
}
|
||||
{{</* /echarts */>}}
|
||||
```
|
||||
|
||||
The same in `YAML` format:
|
||||
|
||||
```yaml
|
||||
{{</* echarts */>}}
|
||||
title:
|
||||
text: Summary Line Chart
|
||||
top: 2%
|
||||
left: center
|
||||
tooltip:
|
||||
trigger: axis
|
||||
legend:
|
||||
data:
|
||||
- Email Marketing
|
||||
- Affiliate Advertising
|
||||
- Video Advertising
|
||||
- Direct View
|
||||
- Search Engine
|
||||
top: 10%
|
||||
grid:
|
||||
left: 5%
|
||||
right: 5%
|
||||
bottom: 5%
|
||||
top: 20%
|
||||
containLabel: true
|
||||
toolbox:
|
||||
feature:
|
||||
saveAsImage:
|
||||
title: Save as Image
|
||||
xAxis:
|
||||
type: category
|
||||
boundaryGap: false
|
||||
data:
|
||||
- Monday
|
||||
- Tuesday
|
||||
- Wednesday
|
||||
- Thursday
|
||||
- Friday
|
||||
- Saturday
|
||||
- Sunday
|
||||
yAxis:
|
||||
type: value
|
||||
series:
|
||||
- name: Email Marketing
|
||||
type: line
|
||||
stack: Total
|
||||
data:
|
||||
- 120
|
||||
- 132
|
||||
- 101
|
||||
- 134
|
||||
- 90
|
||||
- 230
|
||||
- 210
|
||||
- name: Affiliate Advertising
|
||||
type: line
|
||||
stack: Total
|
||||
data:
|
||||
- 220
|
||||
- 182
|
||||
- 191
|
||||
- 234
|
||||
- 290
|
||||
- 330
|
||||
- 310
|
||||
- name: Video Advertising
|
||||
type: line
|
||||
stack: Total
|
||||
data:
|
||||
- 150
|
||||
- 232
|
||||
- 201
|
||||
- 154
|
||||
- 190
|
||||
- 330
|
||||
- 410
|
||||
- name: Direct View
|
||||
type: line
|
||||
stack: Total
|
||||
data:
|
||||
- 320
|
||||
- 332
|
||||
- 301
|
||||
- 334
|
||||
- 390
|
||||
- 330
|
||||
- 320
|
||||
- name: Search Engine
|
||||
type: line
|
||||
stack: Total
|
||||
data:
|
||||
- 820
|
||||
- 932
|
||||
- 901
|
||||
- 934
|
||||
- 1290
|
||||
- 1330
|
||||
- 1320
|
||||
{{</* /echarts */>}}
|
||||
```
|
||||
|
||||
The same in `TOML` format:
|
||||
|
||||
```toml
|
||||
{{</* echarts */>}}
|
||||
[title]
|
||||
text = "Summary Line Chart"
|
||||
top = "2%"
|
||||
left = "center"
|
||||
|
||||
[tooltip]
|
||||
trigger = "axis"
|
||||
|
||||
[legend]
|
||||
data = [
|
||||
"Email Marketing",
|
||||
"Affiliate Advertising",
|
||||
"Video Advertising",
|
||||
"Direct View",
|
||||
"Search Engine"
|
||||
]
|
||||
top = "10%"
|
||||
|
||||
[grid]
|
||||
left = "5%"
|
||||
right = "5%"
|
||||
bottom = "5%"
|
||||
top = "20%"
|
||||
containLabel = true
|
||||
|
||||
[toolbox]
|
||||
[toolbox.feature]
|
||||
[toolbox.feature.saveAsImage]
|
||||
title = "Save as Image"
|
||||
|
||||
[xAxis]
|
||||
type = "category"
|
||||
boundaryGap = false
|
||||
data = [
|
||||
"Monday",
|
||||
"Tuesday",
|
||||
"Wednesday",
|
||||
"Thursday",
|
||||
"Friday",
|
||||
"Saturday",
|
||||
"Sunday"
|
||||
]
|
||||
|
||||
[yAxis]
|
||||
type = "value"
|
||||
|
||||
[[series]]
|
||||
name = "Email Marketing"
|
||||
type = "line"
|
||||
stack = "Total"
|
||||
data = [
|
||||
120.0,
|
||||
132.0,
|
||||
101.0,
|
||||
134.0,
|
||||
90.0,
|
||||
230.0,
|
||||
210.0
|
||||
]
|
||||
|
||||
[[series]]
|
||||
name = "Affiliate Advertising"
|
||||
type = "line"
|
||||
stack = "Total"
|
||||
data = [
|
||||
220.0,
|
||||
182.0,
|
||||
191.0,
|
||||
234.0,
|
||||
290.0,
|
||||
330.0,
|
||||
310.0
|
||||
]
|
||||
|
||||
[[series]]
|
||||
name = "Video Advertising"
|
||||
type = "line"
|
||||
stack = "Total"
|
||||
data = [
|
||||
150.0,
|
||||
232.0,
|
||||
201.0,
|
||||
154.0,
|
||||
190.0,
|
||||
330.0,
|
||||
410.0
|
||||
]
|
||||
|
||||
[[series]]
|
||||
name = "Direct View"
|
||||
type = "line"
|
||||
stack = "Total"
|
||||
data = [
|
||||
320.0,
|
||||
332.0,
|
||||
301.0,
|
||||
334.0,
|
||||
390.0,
|
||||
330.0,
|
||||
320.0
|
||||
]
|
||||
|
||||
[[series]]
|
||||
name = "Search Engine"
|
||||
type = "line"
|
||||
stack = "Total"
|
||||
data = [
|
||||
820.0,
|
||||
932.0,
|
||||
901.0,
|
||||
934.0,
|
||||
1290.0,
|
||||
1330.0,
|
||||
1320.0
|
||||
]
|
||||
{{</* /echarts */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< echarts >}}
|
||||
{
|
||||
"title": {
|
||||
"text": "Summary Line Chart",
|
||||
"top": "2%",
|
||||
"left": "center"
|
||||
},
|
||||
"tooltip": {
|
||||
"trigger": "axis"
|
||||
},
|
||||
"legend": {
|
||||
"data": ["Email Marketing", "Affiliate Advertising", "Video Advertising", "Direct View", "Search Engine"],
|
||||
"top": "10%"
|
||||
},
|
||||
"grid": {
|
||||
"left": "5%",
|
||||
"right": "5%",
|
||||
"bottom": "5%",
|
||||
"top": "20%",
|
||||
"containLabel": true
|
||||
},
|
||||
"toolbox": {
|
||||
"feature": {
|
||||
"saveAsImage": {
|
||||
"title": "Save as Image"
|
||||
}
|
||||
}
|
||||
},
|
||||
"xAxis": {
|
||||
"type": "category",
|
||||
"boundaryGap": false,
|
||||
"data": ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"]
|
||||
},
|
||||
"yAxis": {
|
||||
"type": "value"
|
||||
},
|
||||
"series": [
|
||||
{
|
||||
"name": "Email Marketing",
|
||||
"type": "line",
|
||||
"stack": "Total",
|
||||
"data": [120, 132, 101, 134, 90, 230, 210]
|
||||
},
|
||||
{
|
||||
"name": "Affiliate Advertising",
|
||||
"type": "line",
|
||||
"stack": "Total",
|
||||
"data": [220, 182, 191, 234, 290, 330, 310]
|
||||
},
|
||||
{
|
||||
"name": "Video Advertising",
|
||||
"type": "line",
|
||||
"stack": "Total",
|
||||
"data": [150, 232, 201, 154, 190, 330, 410]
|
||||
},
|
||||
{
|
||||
"name": "Direct View",
|
||||
"type": "line",
|
||||
"stack": "Total",
|
||||
"data": [320, 332, 301, 334, 390, 330, 320]
|
||||
},
|
||||
{
|
||||
"name": "Search Engine",
|
||||
"type": "line",
|
||||
"stack": "Total",
|
||||
"data": [820, 932, 901, 934, 1290, 1330, 1320]
|
||||
}
|
||||
]
|
||||
}
|
||||
{{< /echarts >}}
|
||||
|
||||
The `echarts` shortcode has also the following named parameters:
|
||||
|
||||
* **width** *[optional]* (**first** positional parameter)
|
||||
|
||||
{{< version 0.2.0 >}} Width of the data visualization, default value is `100%`.
|
||||
|
||||
* **height** *[optional]* (**second** positional parameter)
|
||||
|
||||
{{< version 0.2.0 >}} Height of the data visualization, default value is `30rem`.
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 160 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 64 KiB |
@@ -0,0 +1,377 @@
|
||||
---
|
||||
weight: 4
|
||||
title: "Theme Documentation - Extended Shortcodes"
|
||||
date: 2020-03-03T16:29:41+08:00
|
||||
lastmod: 2020-03-03T16:29:41+08:00
|
||||
draft: true
|
||||
author: "Dillon"
|
||||
authorLink: "https://dillonzq.com"
|
||||
description: "KeepIt theme provides multiple shortcodes on top of built-in ones in Hugo."
|
||||
images: []
|
||||
resources:
|
||||
- name: "featured-image"
|
||||
src: "featured-image.jpg"
|
||||
- name: "featured-image-preview"
|
||||
src: "featured-image-preview.jpg"
|
||||
|
||||
tags: ["shortcodes"]
|
||||
categories: ["documentation"]
|
||||
|
||||
lightgallery: true
|
||||
|
||||
math:
|
||||
enable: true
|
||||
---
|
||||
|
||||
**KeepIt** theme provides multiple shortcodes on top of built-in ones in Hugo.
|
||||
|
||||
<!--more-->
|
||||
|
||||
## 1 style
|
||||
|
||||
{{< version 0.2.0 changed >}}
|
||||
|
||||
{{< admonition >}}
|
||||
Hugo **extended** version is necessary for `style` shortcode.
|
||||
{{< /admonition >}}
|
||||
|
||||
`style` is a shortcode to insert custom style in your post.
|
||||
|
||||
The `style` shortcode has two positional parameters.
|
||||
|
||||
The **first** one is the custom style content,
|
||||
which supports nesting syntax in [:(fab fa-sass fa-fw): SASS](https://sass-lang.com/documentation/style-rules/declarations#nesting)
|
||||
and `&` referring to this parent HTML element.
|
||||
|
||||
And the **second** one is the tag name of the HTML element wrapping the content you want to change style, and whose default value is `div`.
|
||||
|
||||
Example `style` input:
|
||||
|
||||
```markdown
|
||||
{{</* style "text-align:right; strong{color:#00b1ff;}" */>}}
|
||||
This is a **right-aligned** paragraph.
|
||||
{{</* /style */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< style "text-align:right; strong{color:#00b1ff;}" >}}
|
||||
This is a **right-aligned** paragraph.
|
||||
{{< /style >}}
|
||||
|
||||
## 2 link
|
||||
|
||||
{{< version 0.2.0 >}}
|
||||
|
||||
`link` shortcode is an alternative to [Markdown link syntax](../basic-markdown-syntax#links). `link` shortcode can provide some other features and can be used in code blocks.
|
||||
|
||||
{{< version 0.2.10 >}} The complete usage of [local resource references](../theme-documentation-content#contents-organization) is supported.
|
||||
|
||||
The `link` shortcode has the following named parameters:
|
||||
|
||||
* **href** *[required]* (**first** positional parameter)
|
||||
|
||||
Destination of the link.
|
||||
|
||||
* **content** *[optional]* (**second** positional parameter)
|
||||
|
||||
Content of the link, default value is the value of **href** parameter.
|
||||
|
||||
*Markdown or HTML format is supported.*
|
||||
|
||||
* **title** *[optional]* (**third** positional parameter)
|
||||
|
||||
`title` attribute of the HTML `a` tag, which will be shown when hovering on the link.
|
||||
|
||||
* **class** *[optional]*
|
||||
|
||||
`class` attribute of the HTML `a` tag.
|
||||
|
||||
* **rel** *[optional]*
|
||||
|
||||
Additional `rel` attributes of the HTML `a` tag.
|
||||
|
||||
Example `link` input:
|
||||
|
||||
```markdown
|
||||
{{</* link "https://assemble.io" */>}}
|
||||
Or
|
||||
{{</* link href="https://assemble.io" */>}}
|
||||
|
||||
{{</* link "mailto:contact@revolunet.com" */>}}
|
||||
Or
|
||||
{{</* link href="mailto:contact@revolunet.com" */>}}
|
||||
|
||||
{{</* link "https://assemble.io" Assemble */>}}
|
||||
Or
|
||||
{{</* link href="https://assemble.io" content=Assemble */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
* {{< link "https://assemble.io" >}}
|
||||
* {{< link "mailto:contact@revolunet.com" >}}
|
||||
* {{< link "https://assemble.io" Assemble >}}
|
||||
|
||||
Example `link` input with a title:
|
||||
|
||||
```markdown
|
||||
{{</* link "https://github.com/upstage/" Upstage "Visit Upstage!" */>}}
|
||||
Or
|
||||
{{</* link href="https://github.com/upstage/" content=Upstage title="Visit Upstage!" */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this (hover over the link, there should be a tooltip):
|
||||
|
||||
{{< link "https://github.com/upstage/" Upstage "Visit Upstage!" >}}
|
||||
|
||||
## 3 image {#image}
|
||||
|
||||
{{< version 0.2.0 changed >}}
|
||||
|
||||
`image` shortcode is an alternative to [`figure` shortcode](../theme-documentation-built-in-shortcodes#figure). `image` shortcode can take full advantage of the dependent libraries of [lazysizes](https://github.com/aFarkas/lazysizes) and [lightGallery](https://github.com/sachinchoolur/lightgallery).
|
||||
|
||||
{{< version 0.2.10 >}} The complete usage of [local resource references](../theme-documentation-content#contents-organization) is supported.
|
||||
|
||||
The `image` shortcode has the following named parameters:
|
||||
|
||||
* **src** *[required]* (**first** positional parameter)
|
||||
|
||||
URL of the image to be displayed.
|
||||
|
||||
* **alt** *[optional]* (**second** positional parameter)
|
||||
|
||||
Alternate text for the image if the image cannot be displayed, default value is the value of **src** parameter.
|
||||
|
||||
*Markdown or HTML format is supported.*
|
||||
|
||||
* **caption** *[optional]* (**third** positional parameter)
|
||||
|
||||
Image caption.
|
||||
|
||||
*Markdown or HTML format is supported.*
|
||||
|
||||
* **title** *[optional]*
|
||||
|
||||
Image title that will be shown when hovering on the image.
|
||||
|
||||
* **class** *[optional]*
|
||||
|
||||
`class` attribute of the HTML `figure` tag.
|
||||
|
||||
* **src_s** *[optional]*
|
||||
|
||||
URL of the image thumbnail, used for lightgallery, default value is the value of **src** parameter.
|
||||
|
||||
* **src_l** *[optional]*
|
||||
|
||||
URL of the HD image, used for lightgallery, default value is the value of **src** parameter.
|
||||
|
||||
* **height** *[optional]*
|
||||
|
||||
`height` attribute of the image.
|
||||
|
||||
* **width** *[optional]*
|
||||
|
||||
`width` attribute of the image.
|
||||
|
||||
* **linked** *[optional]*
|
||||
|
||||
Whether the image needs to be hyperlinked, default value is `true`.
|
||||
|
||||
* **rel** *[optional]*
|
||||
|
||||
Additional `rel` attributes of the HTML `a` tag, if **linked** parameter is set to `true`.
|
||||
|
||||
Example `image` input:
|
||||
|
||||
```markdown
|
||||
{{</* image src="/images/lighthouse.jpg" caption="Lighthouse (`image`)" src_s="/images/lighthouse-small.jpg" src_l="/images/lighthouse-large.jpg" */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< image src="/images/lighthouse.jpg" caption="Lighthouse (`image`)" src_s="/images/lighthouse-small.jpg" src_l="/images/lighthouse-large.jpg" >}}
|
||||
|
||||
## 4 admonition
|
||||
|
||||
The `admonition` shortcode supports **12** types of banners to help you put notice in your page.
|
||||
|
||||
*Markdown or HTML format in the content is supported.*
|
||||
|
||||
{{< admonition >}}
|
||||
A **note** banner
|
||||
{{< /admonition >}}
|
||||
|
||||
{{< admonition abstract >}}
|
||||
An **abstract** banner
|
||||
{{< /admonition >}}
|
||||
|
||||
{{< admonition info >}}
|
||||
A **info** banner
|
||||
{{< /admonition >}}
|
||||
|
||||
{{< admonition tip >}}
|
||||
A **tip** banner
|
||||
{{< /admonition >}}
|
||||
|
||||
{{< admonition success >}}
|
||||
A **success** banner
|
||||
{{< /admonition >}}
|
||||
|
||||
{{< admonition question >}}
|
||||
A **question** banner
|
||||
{{< /admonition >}}
|
||||
|
||||
{{< admonition warning >}}
|
||||
A **warning** banner
|
||||
{{< /admonition >}}
|
||||
|
||||
{{< admonition failure >}}
|
||||
A **failure** banner
|
||||
{{< /admonition >}}
|
||||
|
||||
{{< admonition danger >}}
|
||||
A **danger** banner
|
||||
{{< /admonition >}}
|
||||
|
||||
{{< admonition bug >}}
|
||||
A **bug** banner
|
||||
{{< /admonition >}}
|
||||
|
||||
{{< admonition example >}}
|
||||
An **example** banner
|
||||
{{< /admonition >}}
|
||||
|
||||
{{< admonition quote >}}
|
||||
A **quote** banner
|
||||
{{< /admonition >}}
|
||||
|
||||
The `admonition` shortcode has the following named parameters:
|
||||
|
||||
* **type** *[optional]* (**first** positional parameter)
|
||||
|
||||
Type of the `admonition` banner, default value is `note`.
|
||||
|
||||
* **title** *[optional]* (**second** positional parameter)
|
||||
|
||||
Title of the `admonition` banner, default value is the value of **type** parameter.
|
||||
|
||||
* **open** *[optional]* (**third** positional parameter) {{< version 0.2.0 changed >}}
|
||||
|
||||
Whether the content will be expandable by default, default value is `true`.
|
||||
|
||||
Example `admonition` input:
|
||||
|
||||
```markdown
|
||||
{{</* admonition type=tip title="This is a tip" open=false */>}}
|
||||
A **tip** banner
|
||||
{{</* /admonition */>}}
|
||||
Or
|
||||
{{</* admonition tip "This is a tip" false */>}}
|
||||
A **tip** banner
|
||||
{{</* /admonition */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< admonition tip "This is a tip" false >}}
|
||||
A **tip** banner
|
||||
{{< /admonition >}}
|
||||
|
||||
## 5 mermaid
|
||||
|
||||
The `mermaid` shortcode supports diagrams in Hugo with [Mermaid](https://mermaidjs.github.io/) library.
|
||||
|
||||
The full documentation is provided in [Theme Documentation - mermaid Shortcode](../theme-documentation-mermaid-shortcode).
|
||||
|
||||
## 6 echarts
|
||||
|
||||
The `echarts` shortcode supports data visualization in Hugo with [ECharts](https://echarts.apache.org/) library.
|
||||
|
||||
The full documentation is provided in [Theme Documentation - echarts Shortcode](../theme-documentation-echarts-shortcode).
|
||||
|
||||
## 7 mapbox
|
||||
|
||||
{{< version 0.2.0 >}}
|
||||
|
||||
The `mapbox` shortcode supports interactive maps in Hugo with [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js) library.
|
||||
|
||||
The full documentation is provided in [Theme Documentation - mapbox Shortcode](../theme-documentation-mapbox-shortcode).
|
||||
|
||||
## 8 music
|
||||
|
||||
The `music` shortcode embeds a responsive music player based on [APlayer](https://github.com/MoePlayer/APlayer) and [MetingJS](https://github.com/metowolf/MetingJS) library.
|
||||
|
||||
The full documentation is provided in [Theme Documentation - music Shortcode](../theme-documentation-music-shortcode).
|
||||
|
||||
## 9 bilibili
|
||||
|
||||
{{< version 0.2.0 changed >}}
|
||||
|
||||
The `bilibili` shortcode embeds a responsive video player for bilibili videos.
|
||||
|
||||
The full documentation is provided in [Theme Documentation - bilibili Shortcode](../theme-documentation-bilibili-shortcode).
|
||||
|
||||
## 10 typeit
|
||||
|
||||
The `typeit` shortcode provides typing animation based on [TypeIt](https://typeitjs.com/) library.
|
||||
|
||||
The full documentation is provided in [Theme Documentation - typeit Shortcode](../theme-documentation-typeit-shortcode).
|
||||
|
||||
## 11 script
|
||||
|
||||
{{< version 0.2.8 >}}
|
||||
|
||||
`script` is a shortcode to insert custom **:(fab fa-js fa-fw): Javascript** in your post.
|
||||
|
||||
{{< admonition >}}
|
||||
The script content can be guaranteed to be executed in order after all third-party libraries are loaded. So you are free to use third-party libraries.
|
||||
{{< /admonition >}}
|
||||
|
||||
Example `script` input:
|
||||
|
||||
```markdown
|
||||
{{</* script */>}}
|
||||
console.log('Hello KeepIt!');
|
||||
{{</* /script */>}}
|
||||
```
|
||||
|
||||
You can see the output in the console of the developer tool.
|
||||
|
||||
{{< script >}}
|
||||
console.log('Hello KeepIt!');
|
||||
{{< /script >}}
|
||||
|
||||
## 12 raw
|
||||
|
||||
{{< version 0.2.11 >}}
|
||||
|
||||
`raw` is a shortcode to insert raw **:(fab fa-html5 fa-fw): HTML** content in your post.
|
||||
This is useful when you want to include some Markdown content to **avoid being rendered or escaped** by Hugo.
|
||||
|
||||
Example `raw` input:
|
||||
|
||||
```markdown
|
||||
Inline Formula: {{</* raw */>}}\(\mathbf{E}=\sum_{i} \mathbf{E}_{i}=\mathbf{E}_{1}+\mathbf{E}_{2}+\mathbf{E}_{3}+\cdots\){{</* /raw */>}}
|
||||
|
||||
Block Formula:
|
||||
|
||||
{{</* raw */>}}
|
||||
\[ a=b+c \\ d+e=f \]
|
||||
{{</* /raw */>}}
|
||||
|
||||
Raw content using Markdown syntax: {{</* raw */>}}**Hello**{{</* /raw */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
Inline Formula: {{< raw >}}\(\mathbf{E}=\sum_{i} \mathbf{E}_{i}=\mathbf{E}_{1}+\mathbf{E}_{2}+\mathbf{E}_{3}+\cdots\){{< /raw >}}
|
||||
|
||||
Block Formula:
|
||||
|
||||
{{< raw>}}
|
||||
\[ a=b+c \\ d+e=f \]
|
||||
{{< /raw >}}
|
||||
|
||||
Raw content using Markdown syntax: {{< raw >}}**Hello**{{< /raw >}}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 264 KiB |
@@ -0,0 +1,104 @@
|
||||
---
|
||||
weight: 7
|
||||
title: "Theme Documentation - mapbox Shortcode"
|
||||
date: 2020-03-03T13:29:41+08:00
|
||||
lastmod: 2020-03-03T13:29:41+08:00
|
||||
draft: true
|
||||
author: "Dillon"
|
||||
authorLink: "https://dillonzq.com"
|
||||
description: "The mapbox shortcode supports interactive maps in Hugo with Mapbox GL JS library."
|
||||
images: []
|
||||
resources:
|
||||
- name: "featured-image"
|
||||
src: "featured-image.jpg"
|
||||
|
||||
tags: ["shortcodes"]
|
||||
categories: ["documentation"]
|
||||
|
||||
hiddenFromHomePage: true
|
||||
|
||||
toc:
|
||||
enable: false
|
||||
---
|
||||
|
||||
{{< version 0.2.0 >}}
|
||||
|
||||
The `mapbox` shortcode supports interactive maps in Hugo with [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js) library.
|
||||
|
||||
<!--more-->
|
||||
|
||||
**Mapbox GL JS** is a JavaScript library that uses WebGL to render interactive maps from [vector tiles](https://docs.mapbox.com/help/glossary/vector-tiles/) and [Mapbox styles](https://docs.mapbox.com/mapbox-gl-js/style-spec/).
|
||||
|
||||
The `mapbox` shortcode has the following named parameters to use Mapbox GL JS:
|
||||
|
||||
* **lng** *[required]* (**first** positional parameter)
|
||||
|
||||
Longitude of the inital centerpoint of the map, measured in degrees.
|
||||
|
||||
* **lat** *[required]* (**second** positional parameter)
|
||||
|
||||
Latitude of the inital centerpoint of the map, measured in degrees.
|
||||
|
||||
* **zoom** *[optional]* (**third** positional parameter)
|
||||
|
||||
The initial zoom level of the map, default value is `10`.
|
||||
|
||||
* **marked** *[optional]* (**fourth** positional parameter)
|
||||
|
||||
Whether to add a marker at the inital centerpoint of the map, default value is `true`.
|
||||
|
||||
* **light-style** *[optional]* (**fifth** positional parameter)
|
||||
|
||||
Style for the light theme, default value is the value set in the [front matter](../theme-documentation-content#front-matter) or the [site configuration](../theme-documentation-basics#site-configuration).
|
||||
|
||||
* **dark-style** *[optional]* (**sixth** positional parameter)
|
||||
|
||||
Style for the dark theme, default value is the value set in the [front matter](../theme-documentation-content#front-matter) or the [site configuration](../theme-documentation-basics#site-configuration).
|
||||
|
||||
* **navigation** *[optional]*
|
||||
|
||||
Whether to add [NavigationControl](https://docs.mapbox.com/mapbox-gl-js/api#navigationcontrol), default value is the value set in the [front matter](../theme-documentation-content#front-matter) or the [site configuration](../theme-documentation-basics#site-configuration).
|
||||
|
||||
* **geolocate** *[optional]*
|
||||
|
||||
Whether to add [GeolocateControl](https://docs.mapbox.com/mapbox-gl-js/api#geolocatecontrol), default value is the value set in the [front matter](../theme-documentation-content#front-matter) or the [site configuration](../theme-documentation-basics#site-configuration).
|
||||
|
||||
* **scale** *[optional]*
|
||||
|
||||
Whether to add [ScaleControl](https://docs.mapbox.com/mapbox-gl-js/api#scalecontrol), default value is the value set in the [front matter](../theme-documentation-content#front-matter) or the [site configuration](../theme-documentation-basics#site-configuration).
|
||||
|
||||
* **fullscreen** *[optional]*
|
||||
|
||||
Whether to add [FullscreenControl](https://docs.mapbox.com/mapbox-gl-js/api#fullscreencontrol), default value is the value set in the [front matter](../theme-documentation-content#front-matter) or the [site configuration](../theme-documentation-basics#site-configuration).
|
||||
|
||||
* **width** *[optional]*
|
||||
|
||||
Width of the map, default value is `100%`.
|
||||
|
||||
* **height** *[optional]*
|
||||
|
||||
Height of the map, default value is `20rem`.
|
||||
|
||||
Example simple `mapbox` input:
|
||||
|
||||
```markdown
|
||||
{{</* mapbox 121.485 31.233 12 */>}}
|
||||
Or
|
||||
{{</* mapbox lng=121.485 lat=31.233 zoom=12 */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< mapbox 121.485 31.233 12 >}}
|
||||
|
||||
Example `mapbox` input with the custom style:
|
||||
|
||||
```markdown
|
||||
{{</* mapbox -122.252 37.453 10 false "mapbox://styles/mapbox/navigation-preview-day-v4" "mapbox://styles/mapbox/navigation-preview-night-v4" */>}}
|
||||
Or
|
||||
{{</* mapbox lng=-122.252 lat=37.453 zoom=10 marked=false light-style="mapbox://styles/mapbox/navigation-preview-day-v4" dark-style="mapbox://styles/mapbox/navigation-preview-night-v4" */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< mapbox -122.252 37.453 10 false "mapbox://styles/mapbox/navigation-preview-day-v4?optimize=true" "mapbox://styles/mapbox/navigation-preview-night-v4?optimize=true" >}}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 68 KiB |
@@ -0,0 +1,361 @@
|
||||
---
|
||||
weight: 5
|
||||
title: "Theme Documentation - mermaid Shortcode"
|
||||
date: 2020-03-03T15:29:41+08:00
|
||||
lastmod: 2020-03-03T15:29:41+08:00
|
||||
draft: true
|
||||
author: "Dillon"
|
||||
authorLink: "https://dillonzq.com"
|
||||
description: "The mermaid shortcode supports diagrams in Hugo with Mermaid library."
|
||||
images: []
|
||||
resources:
|
||||
- name: "featured-image"
|
||||
src: "featured-image.png"
|
||||
|
||||
tags: ["shortcodes"]
|
||||
categories: ["documentation"]
|
||||
|
||||
hiddenFromHomePage: true
|
||||
---
|
||||
|
||||
{{< version 0.2.11 changed >}}
|
||||
|
||||
The `mermaid` shortcode supports diagrams in Hugo with [Mermaid](https://mermaidjs.github.io/) library.
|
||||
|
||||
<!--more-->
|
||||
|
||||
**Mermaid** is a library helping you to generate diagram and flowcharts from text, in a similar manner as Markdown.
|
||||
|
||||
Just insert your mermaid code in the `mermaid` shortcode and that’s it.
|
||||
|
||||
## Flowchart {#flowchart}
|
||||
|
||||
Example **flowchart** `mermaid` input:
|
||||
|
||||
```markdown
|
||||
{{</* mermaid */>}}
|
||||
graph LR;
|
||||
A[Hard edge] -->|Link text| B(Round edge)
|
||||
B --> C{Decision}
|
||||
C -->|One| D[Result one]
|
||||
C -->|Two| E[Result two]
|
||||
{{</* /mermaid */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< mermaid >}}
|
||||
graph LR;
|
||||
A[Hard edge] -->|Link text| B(Round edge)
|
||||
B --> C{Decision}
|
||||
C -->|One| D[Result one]
|
||||
C -->|Two| E[Result two]
|
||||
{{< /mermaid >}}
|
||||
|
||||
## Sequence Diagram {#sequence-diagram}
|
||||
|
||||
Example **sequence diagram** `mermaid` input:
|
||||
|
||||
```markdown
|
||||
{{</* mermaid */>}}
|
||||
sequenceDiagram
|
||||
participant Alice
|
||||
participant Bob
|
||||
Alice->>John: Hello John, how are you?
|
||||
loop Healthcheck
|
||||
John->John: Fight against hypochondria
|
||||
end
|
||||
Note right of John: Rational thoughts <br/>prevail...
|
||||
John-->Alice: Great!
|
||||
John->Bob: How about you?
|
||||
Bob-->John: Jolly good!
|
||||
{{</* /mermaid */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< mermaid >}}
|
||||
sequenceDiagram
|
||||
participant Alice
|
||||
participant Bob
|
||||
Alice->>John: Hello John, how are you?
|
||||
loop Healthcheck
|
||||
John->John: Fight against hypochondria
|
||||
end
|
||||
Note right of John: Rational thoughts <br/>prevail...
|
||||
John-->Alice: Great!
|
||||
John->Bob: How about you?
|
||||
Bob-->John: Jolly good!
|
||||
{{< /mermaid >}}
|
||||
|
||||
## Gantt {#gantt}
|
||||
|
||||
Example **Gantt** `mermaid` input:
|
||||
|
||||
```markdown
|
||||
{{</* mermaid */>}}
|
||||
gantt
|
||||
dateFormat YYYY-MM-DD
|
||||
title Adding GANTT diagram to mermaid
|
||||
excludes weekdays 2014-01-10
|
||||
|
||||
section A section
|
||||
Completed task :done, des1, 2014-01-06,2014-01-08
|
||||
Active task :active, des2, 2014-01-09, 3d
|
||||
Future task : des3, after des2, 5d
|
||||
Future task2 : des4, after des3, 5d
|
||||
{{</* /mermaid */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< mermaid >}}
|
||||
gantt
|
||||
dateFormat YYYY-MM-DD
|
||||
title Adding GANTT diagram to mermaid
|
||||
excludes weekdays 2014-01-10
|
||||
|
||||
section A section
|
||||
Completed task :done, des1, 2014-01-06,2014-01-08
|
||||
Active task :active, des2, 2014-01-09, 3d
|
||||
Future task : des3, after des2, 5d
|
||||
Future task2 : des4, after des3, 5d
|
||||
{{< /mermaid >}}
|
||||
|
||||
## Class Diagram {#class-diagram}
|
||||
|
||||
Example **class diagram** `mermaid` input:
|
||||
|
||||
```markdown
|
||||
{{</* mermaid */>}}
|
||||
classDiagram
|
||||
Animal <|-- Duck
|
||||
Animal <|-- Fish
|
||||
Animal <|-- Zebra
|
||||
Animal : +int age
|
||||
Animal : +String gender
|
||||
Animal: +isMammal()
|
||||
Animal: +mate()
|
||||
class Duck{
|
||||
+String beakColor
|
||||
+swim()
|
||||
+quack()
|
||||
}
|
||||
class Fish{
|
||||
-int sizeInFeet
|
||||
-canEat()
|
||||
}
|
||||
class Zebra{
|
||||
+bool is_wild
|
||||
+run()
|
||||
}
|
||||
{{</* /mermaid */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< mermaid >}}
|
||||
classDiagram
|
||||
Animal <|-- Duck
|
||||
Animal <|-- Fish
|
||||
Animal <|-- Zebra
|
||||
Animal : +int age
|
||||
Animal : +String gender
|
||||
Animal: +isMammal()
|
||||
Animal: +mate()
|
||||
class Duck{
|
||||
+String beakColor
|
||||
+swim()
|
||||
+quack()
|
||||
}
|
||||
class Fish{
|
||||
-int sizeInFeet
|
||||
-canEat()
|
||||
}
|
||||
class Zebra{
|
||||
+bool is_wild
|
||||
+run()
|
||||
}
|
||||
{{< /mermaid >}}
|
||||
|
||||
## State Diagram {#state-diagram}
|
||||
|
||||
Example **state diagram** `mermaid` input:
|
||||
|
||||
```markdown
|
||||
{{</* mermaid */>}}
|
||||
stateDiagram-v2
|
||||
[*] --> Still
|
||||
Still --> [*]
|
||||
Still --> Moving
|
||||
Moving --> Still
|
||||
Moving --> Crash
|
||||
Crash --> [*]
|
||||
{{</* /mermaid */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< mermaid >}}
|
||||
stateDiagram-v2
|
||||
[*] --> Still
|
||||
Still --> [*]
|
||||
Still --> Moving
|
||||
Moving --> Still
|
||||
Moving --> Crash
|
||||
Crash --> [*]
|
||||
{{< /mermaid >}}
|
||||
|
||||
## Git Graph {#git-graph}
|
||||
|
||||
Example **git graph** `mermaid` input:
|
||||
|
||||
```markdown
|
||||
{{</* mermaid */>}}
|
||||
gitGraph
|
||||
commit
|
||||
commit
|
||||
branch develop
|
||||
checkout develop
|
||||
commit
|
||||
commit
|
||||
checkout main
|
||||
merge develop
|
||||
commit
|
||||
commit
|
||||
{{</* /mermaid */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< mermaid >}}
|
||||
gitGraph
|
||||
commit
|
||||
commit
|
||||
branch develop
|
||||
checkout develop
|
||||
commit
|
||||
commit
|
||||
checkout main
|
||||
merge develop
|
||||
commit
|
||||
commit
|
||||
{{< /mermaid >}}
|
||||
|
||||
## Entity Relationship Diagram {#entity-relationship-diagram}
|
||||
|
||||
Example **entity-relationship diagram** `mermaid` input:
|
||||
|
||||
```markdown
|
||||
{{</* mermaid */>}}
|
||||
erDiagram
|
||||
CUSTOMER ||--o{ ORDER : places
|
||||
ORDER ||--|{ LINE-ITEM : contains
|
||||
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
|
||||
{{</* /mermaid */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< mermaid >}}
|
||||
erDiagram
|
||||
CUSTOMER ||--o{ ORDER : places
|
||||
ORDER ||--|{ LINE-ITEM : contains
|
||||
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
|
||||
{{< /mermaid >}}
|
||||
|
||||
## User Journey {#user-journey}
|
||||
|
||||
Example **user journey** `mermaid` input:
|
||||
|
||||
```markdown
|
||||
{{</* mermaid */>}}
|
||||
journey
|
||||
title My working day
|
||||
section Go to work
|
||||
Make tea: 5: Me
|
||||
Go upstairs: 3: Me
|
||||
Do work: 1: Me, Cat
|
||||
section Go home
|
||||
Go downstairs: 5: Me
|
||||
Sit down: 5: Me
|
||||
{{</* /mermaid */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< mermaid >}}
|
||||
journey
|
||||
title My working day
|
||||
section Go to work
|
||||
Make tea: 5: Me
|
||||
Go upstairs: 3: Me
|
||||
Do work: 1: Me, Cat
|
||||
section Go home
|
||||
Go downstairs: 5: Me
|
||||
Sit down: 5: Me
|
||||
{{< /mermaid >}}
|
||||
|
||||
## Pie Chart {#pie-chart}
|
||||
|
||||
Example **pie chart** `mermaid` input:
|
||||
|
||||
```markdown
|
||||
{{</* mermaid */>}}
|
||||
pie
|
||||
"Dogs" : 386
|
||||
"Cats" : 85
|
||||
"Rats" : 15
|
||||
{{</* /mermaid */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< mermaid >}}
|
||||
pie
|
||||
"Dogs" : 386
|
||||
"Cats" : 85
|
||||
"Rats" : 15
|
||||
{{< /mermaid >}}
|
||||
|
||||
## Requirement Diagram {#requirement-diagram}
|
||||
|
||||
Example **requirement diagram** `mermaid` input:
|
||||
|
||||
```markdown
|
||||
{{</* mermaid */>}}
|
||||
requirementDiagram
|
||||
|
||||
requirement test_req {
|
||||
id: 1
|
||||
text: the test text.
|
||||
risk: high
|
||||
verifymethod: test
|
||||
}
|
||||
|
||||
element test_entity {
|
||||
type: simulation
|
||||
}
|
||||
|
||||
test_entity - satisfies -> test_req
|
||||
{{</* /mermaid */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< mermaid >}}
|
||||
requirementDiagram
|
||||
|
||||
requirement test_req {
|
||||
id: 1
|
||||
text: the test text.
|
||||
risk: high
|
||||
verifymethod: test
|
||||
}
|
||||
|
||||
element test_entity {
|
||||
type: simulation
|
||||
}
|
||||
|
||||
test_entity - satisfies -> test_req
|
||||
{{< /mermaid >}}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
@@ -0,0 +1,160 @@
|
||||
---
|
||||
weight: 8
|
||||
title: "Theme Documentation - music Shortcode"
|
||||
date: 2020-03-03T12:29:41+08:00
|
||||
lastmod: 2020-03-03T12:29:41+08:00
|
||||
draft: true
|
||||
author: "Dillon"
|
||||
authorLink: "https://dillonzq.com"
|
||||
description: "The music shortcode embeds a responsive music player based on APlayer and MetingJS library."
|
||||
images: []
|
||||
resources:
|
||||
- name: "featured-image"
|
||||
src: "featured-image.png"
|
||||
|
||||
tags: ["shortcodes"]
|
||||
categories: ["documentation"]
|
||||
|
||||
hiddenFromHomePage: true
|
||||
---
|
||||
|
||||
The `music` shortcode embeds a responsive music player based on [APlayer](https://github.com/MoePlayer/APlayer) and [MetingJS](https://github.com/metowolf/MetingJS).
|
||||
|
||||
<!--more-->
|
||||
|
||||
There are three ways to use it the `music` shortcode.
|
||||
|
||||
## 1 Custom Music URL {#custom-music-url}
|
||||
|
||||
{{< version 0.2.10 >}} The complete usage of [local resource references](../theme-documentation-content#contents-organization) is supported.
|
||||
|
||||
The `music` shortcode has the following named parameters by custom music URL:
|
||||
|
||||
* **server** *[required]*
|
||||
|
||||
URL of the custom music.
|
||||
|
||||
* **name** *[optional]*
|
||||
|
||||
Name of the custom music.
|
||||
|
||||
* **artist** *[optional]*
|
||||
|
||||
Artist of the custom music.
|
||||
|
||||
* **cover** *[required]*
|
||||
|
||||
URL of the custom music cover.
|
||||
|
||||
Example `music` input by custom music URL:
|
||||
|
||||
```markdown
|
||||
{{</* music url="/music/Wavelength.mp3" name=Wavelength artist=oldmanyoung cover="/images/Wavelength.jpg" */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< music url="/music/Wavelength.mp3" name=Wavelength artist=oldmanyoung cover="/images/Wavelength.jpg" >}}
|
||||
|
||||
## 2 Music Platform URL Automatic Identification {#automatic-identification}
|
||||
|
||||
The `music` shortcode has one named parameter by music platform URL automatic identification:
|
||||
|
||||
* **auto** *[required]* (**first** positional parameter)
|
||||
|
||||
URL of the music platform URL for automatic identification,
|
||||
which supports `netease`, `tencent` and `xiami` music platform.
|
||||
|
||||
Example `music` input by music platform URL automatic identification:
|
||||
|
||||
```markdown
|
||||
{{</* music auto="https://music.163.com/#/playlist?id=60198" */>}}
|
||||
Or
|
||||
{{</* music "https://music.163.com/#/playlist?id=60198" */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< music auto="https://music.163.com/#/playlist?id=60198" >}}
|
||||
|
||||
## 3 Custom Server, Type and ID {#custom-server}
|
||||
|
||||
The `music` shortcode has the following named parameters by custom music platform:
|
||||
|
||||
* **server** *[required]* (**first** positional parameter)
|
||||
|
||||
[`netease`, `tencent`, `kugou`, `xiami`, `baidu`]
|
||||
|
||||
Music platform.
|
||||
|
||||
* **type** *[required]* (**second** positional parameter)
|
||||
|
||||
[`song`, `playlist`, `album`, `search`, `artist`]
|
||||
|
||||
Type of the music.
|
||||
|
||||
* **id** *[required]* (**third** positional parameter)
|
||||
|
||||
Song ID, or playlist ID, or album ID, or search keyword, or artist ID.
|
||||
|
||||
Example `music` input by custom music platform:
|
||||
|
||||
```markdown
|
||||
{{</* music server="netease" type="song" id="1868553" */>}}
|
||||
Or
|
||||
{{</* music netease song 1868553 */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< music netease song 1868553 >}}
|
||||
|
||||
## 4 Other Parameters {#other-parameters}
|
||||
|
||||
The `music` shortcode has other named parameters applying to the above three ways:
|
||||
|
||||
* **theme** *[optional]*
|
||||
|
||||
{{< version 0.2.0 changed >}} Main color of the music player, default value is `#448aff`.
|
||||
|
||||
* **fixed** *[optional]*
|
||||
|
||||
Whether to enable fixed mode, default value is `false`.
|
||||
|
||||
* **mini** *[optional]*
|
||||
|
||||
Whether to enable mini mode, default value is `false`.
|
||||
|
||||
* **autoplay** *[optional]*
|
||||
|
||||
Whether to autoplay music, default value is `false`.
|
||||
|
||||
* **volume** *[optional]*
|
||||
|
||||
Default volume when the player is first opened, which will be remembered in the browser, default value is `0.7`.
|
||||
|
||||
* **mutex** *[optional]*
|
||||
|
||||
Whether to pause other players when this player starts playing, default value is `true`.
|
||||
|
||||
The `music` shortcode has the following named parameters only applying to the type of music list:
|
||||
|
||||
* **loop** *[optional]*
|
||||
|
||||
[`all`, `one`, `none`]
|
||||
|
||||
Loop mode of the music list, default value is `none`.
|
||||
|
||||
* **order** *[optional]*
|
||||
|
||||
[`list`, `random`]
|
||||
|
||||
Play order of the music list, default value is `list`.
|
||||
|
||||
* **list-folded** *[optional]*
|
||||
|
||||
Whether the music list should be folded at first, default value is `false`.
|
||||
|
||||
* **list-max-height** *[optional]*
|
||||
|
||||
Max height of the music list, default value is `340px`.
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 80 KiB |
@@ -0,0 +1,114 @@
|
||||
---
|
||||
weight: 10
|
||||
title: "Theme Documentation - typeit Shortcode"
|
||||
date: 2020-03-03T10:29:41+08:00
|
||||
lastmod: 2020-03-03T10:29:41+08:00
|
||||
draft: true
|
||||
author: "Dillon"
|
||||
authorLink: "https://dillonzq.com"
|
||||
description: "The typeit shortcode provides typing animation based on TypeIt library."
|
||||
images: []
|
||||
resources:
|
||||
- name: "featured-image"
|
||||
src: "featured-image.png"
|
||||
|
||||
tags: ["shortcodes"]
|
||||
categories: ["documentation"]
|
||||
|
||||
hiddenFromHomePage: true
|
||||
---
|
||||
|
||||
The `typeit` shortcode provides typing animation based on [TypeIt](https://typeitjs.com/) library.
|
||||
|
||||
<!--more-->
|
||||
|
||||
Just insert your content in the `typeit` shortcode and that’s it.
|
||||
|
||||
## 1 Simple Content {#simple-content}
|
||||
|
||||
Simple content is allowed in `Markdown` format and **without** rich block content such as images and more...
|
||||
|
||||
Example `typeit` input:
|
||||
|
||||
```markdown
|
||||
{{</* typeit */>}}
|
||||
This is a *paragraph* with **typing animation** based on [TypeIt](https://typeitjs.com/)...
|
||||
{{</* /typeit */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< typeit >}}
|
||||
This is a *paragraph* with **typing animation** based on [TypeIt](https://typeitjs.com/)...
|
||||
{{< /typeit >}}
|
||||
|
||||
Alternatively, you can use custom **HTML tags**.
|
||||
|
||||
Example `typeit` input with `h4` tag:
|
||||
|
||||
```markdown
|
||||
{{</* typeit tag=h4 */>}}
|
||||
This is a *paragraph* with **typing animation** based on [TypeIt](https://typeitjs.com/)...
|
||||
{{</* /typeit */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< typeit tag=h4 >}}
|
||||
This is a *paragraph* with **typing animation** based on [TypeIt](https://typeitjs.com/)...
|
||||
{{< /typeit >}}
|
||||
|
||||
## 2 Code Content {#code-content}
|
||||
|
||||
Code content is allowed and will be highlighted by named parameter `code` for the type of code language.
|
||||
|
||||
Example `typeit` input with `code`:
|
||||
|
||||
```markdown
|
||||
{{</* typeit code=java */>}}
|
||||
public class HelloWorld {
|
||||
public static void main(String []args) {
|
||||
System.out.println("Hello World");
|
||||
}
|
||||
}
|
||||
{{</* /typeit */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< typeit code=java >}}
|
||||
public class HelloWorld {
|
||||
public static void main(String []args) {
|
||||
System.out.println("Hello World");
|
||||
}
|
||||
}
|
||||
{{< /typeit >}}
|
||||
|
||||
## 3 Group Content {#group-content}
|
||||
|
||||
All typing animations start at the same time by default.
|
||||
But sometimes you may want to start a set of `typeit` contents in order.
|
||||
|
||||
A set of `typeit` contents with the same value of named parameter `group` will start typing animation in sequence.
|
||||
|
||||
Example `typeit` input with `group`:
|
||||
|
||||
```markdown
|
||||
{{</* typeit group=paragraph */>}}
|
||||
**First** this paragraph begins
|
||||
{{</* /typeit */>}}
|
||||
|
||||
{{</* typeit group=paragraph */>}}
|
||||
**Then** this paragraph begins
|
||||
{{</* /typeit */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< typeit group=paragraph >}}
|
||||
**First** this paragraph begins
|
||||
{{< /typeit >}}
|
||||
|
||||
{{< typeit group=paragraph >}}
|
||||
**Then** this paragraph begins
|
||||
{{< /typeit >}}
|
||||
Reference in New Issue
Block a user