we are back with 4.0
This commit is contained in:
panr
parent
7e13d24d10
commit
0b11e05735
57 changed files with 1840 additions and 1724 deletions
|
|
@ -1,22 +1,139 @@
|
|||
---
|
||||
title: "Showcase"
|
||||
date: "2018-07-18"
|
||||
author: "Hello Robot"
|
||||
---
|
||||
+++
|
||||
author = "Hugo Authors & Radek"
|
||||
title = "Showcase"
|
||||
date = "2019-03-11"
|
||||
description = "Sample article showcasing basic styling and formatting for HTML elements."
|
||||
+++
|
||||
|
||||
## Header 2
|
||||
This article offers a sample of basic Markdown syntax that can be used in Hugo content files, also it shows whether basic HTML elements are decorated with CSS in a Hugo theme.
|
||||
<!--more-->
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec interdum metus. Aenean rutrum ligula sodales ex auctor, sed tempus dui mollis. Curabitur ipsum dui, aliquet nec commodo at, tristique eget ante. **Donec quis dolor nec nunc mollis interdum vel in purus**. Sed vitae leo scelerisque, sollicitudin elit sed, congue ante. In augue nisl, vestibulum commodo est a, tristique porttitor est. Proin laoreet iaculis ornare. Nullam ut neque quam.
|
||||
## Headings
|
||||
|
||||
> Fusce pharetra suscipit orci nec tempor. Quisque vitae sem sit amet sem mollis consequat. Sed at imperdiet lorem. Vestibulum pharetra faucibus odio, ac feugiat tellus sollicitudin at. Pellentesque varius tristique mi imperdiet dapibus. Duis orci odio, sodales lacinia venenatis sit amet, feugiat et diam.
|
||||
The following HTML `<h1>`—`<h6>` elements represent six levels of section headings. `<h1>` is the highest section level while `<h6>` is the lowest.
|
||||
|
||||
### Header 3
|
||||
# H1
|
||||
## H2
|
||||
### H3
|
||||
### H4
|
||||
#### H5
|
||||
##### H6
|
||||
|
||||
Nulla libero turpis, lacinia vitae cursus ut, auctor dictum nisl. Fusce varius felis nec sem ullamcorper, at convallis nisi vestibulum. Duis risus odio, porta sit amet placerat mollis, tincidunt non mauris. Suspendisse fringilla, `odio a dignissim pharetra`, est urna sollicitudin urna, eu scelerisque magna ex vitae tellus.
|
||||
## Paragraph
|
||||
|
||||
```css
|
||||
/* PostCSS code */
|
||||
Xerum, quo qui aut unt expliquam qui dolut labo. Aque venitatiusda cum, voluptionse latur sitiae dolessi aut parist aut dollo enim qui voluptate ma dolestendit peritin re plis aut quas inctum laceat est volestemque commosa as cus endigna tectur, offic to cor sequas etum rerum idem sintibus eiur? Quianimin porecus evelectur, cum que nis nust voloribus ratem aut omnimi, sitatur? Quiatem. Nam, omnis sum am facea corem alique molestrunt et eos evelece arcillit ut aut eos eos nus, sin conecerem erum fuga. Ri oditatquam, ad quibus unda veliamenimin cusam et facea ipsamus es exerum sitate dolores editium rerore eost, temped molorro ratiae volorro te reribus dolorer sperchicium faceata tiustia prat.
|
||||
|
||||
Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sapicia is sinveli squiatum, core et que aut hariosam ex eat.
|
||||
|
||||
## Images
|
||||
|
||||
|
||||
|
||||
### Figure with a caption
|
||||
|
||||
{{< figure src="/img/terminal-theme.png" alt="Terminal Theme Preview" position="center" caption="Terminal Theme Preview" captionPosition="center" >}}
|
||||
|
||||
## Blockquotes
|
||||
|
||||
The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a `footer` or `cite` element, and optionally with in-line changes such as annotations and abbreviations.
|
||||
|
||||
### Blockquote without attribution
|
||||
|
||||
> Tiam, ad mint andaepu dandae nostion secatur sequo quae.
|
||||
> **Note** that you can use *Markdown syntax* within a blockquote.
|
||||
|
||||
### Blockquote with attribution
|
||||
|
||||
> Don't communicate by sharing memory, share memory by communicating.<br>
|
||||
> — <cite>Rob Pike[^1]</cite>
|
||||
|
||||
[^1]: The above quote is excerpted from Rob Pike's [talk](https://www.youtube.com/watch?v=PAAkCSZUG1c) during Gopherfest, November 18, 2015.
|
||||
|
||||
## Buttons and links
|
||||
|
||||
<button>Button</button>
|
||||
<a href="">Link</a>
|
||||
<a href="" class="button inline">Link</a>
|
||||
|
||||
## Tables
|
||||
|
||||
Tables aren't part of the core Markdown spec, but Hugo supports supports them out-of-the-box.
|
||||
|
||||
Name | Age
|
||||
--------|------
|
||||
Bob | 27
|
||||
Alice | 23
|
||||
|
||||
### Inline Markdown within tables
|
||||
|
||||
| Italics | Bold | Code |
|
||||
| -------- | -------- | ------ |
|
||||
| *italics* | **bold** | `code` |
|
||||
|
||||
## Forms
|
||||
|
||||
<fieldset>
|
||||
<input type="text" placeholder="Type something" /><br />
|
||||
<input type="number" placeholder="Insert number" /><br />
|
||||
<input type="text" value="Input value" /><br />
|
||||
<select>
|
||||
<option value="1">Option 1</option>
|
||||
<option value="2">Option 2</option>
|
||||
<option value="3">Option 3</option>
|
||||
</select><br />
|
||||
<textarea placeholder="Insert a comment..."></textarea><br />
|
||||
<input type="checkbox" /> I understand<br />
|
||||
<button type="submi">Submit</button>
|
||||
</fieldset>
|
||||
|
||||
## Code Blocks
|
||||
|
||||
### Code block with backticks
|
||||
|
||||
```html
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Example HTML5 Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test</p>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
### Code block indented with four spaces
|
||||
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Example HTML5 Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test</p>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
### Code block with Hugo's internal highlight shortcode
|
||||
|
||||
{{< highlight html >}}
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Example HTML5 Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test</p>
|
||||
</body>
|
||||
</html>
|
||||
{{< /highlight >}}
|
||||
|
||||
### Code block with custom built-in `{{ < code > }}` shortcode
|
||||
|
||||
{{< code title="Hey, this is a code block title" language="css" >}}
|
||||
pre {
|
||||
background: #1a1a1d;
|
||||
padding: 20px;
|
||||
|
|
@ -36,49 +153,40 @@ pre {
|
|||
font-size: inherit;
|
||||
}
|
||||
}
|
||||
```
|
||||
{{< /code >}}
|
||||
|
||||
```js
|
||||
// JS code
|
||||
## List Types
|
||||
|
||||
const menuTrigger = document.querySelector('.menu-trigger')
|
||||
const menu = document.querySelector('.menu')
|
||||
const mobileQuery = getComputedStyle(document.body).getPropertyValue('--phoneWidth')
|
||||
const isMobile = () => window.matchMedia(mobileQuery).matches
|
||||
const isMobileMenu = () => {
|
||||
menuTrigger.classList.toggle('hidden', !isMobile())
|
||||
menu.classList.toggle('hidden', isMobile())
|
||||
}
|
||||
### Ordered List
|
||||
|
||||
isMobileMenu()
|
||||
1. First item
|
||||
2. Second item
|
||||
3. Third item
|
||||
|
||||
menuTrigger.addEventListener('click', () => menu.classList.toggle('hidden'))
|
||||
### Unordered List
|
||||
|
||||
window.addEventListener('resize', isMobileMenu)
|
||||
```
|
||||
* List item
|
||||
* Another item
|
||||
* And another item
|
||||
|
||||
```html
|
||||
<!-- HTML code -->
|
||||
### Nested list
|
||||
|
||||
<section id="main">
|
||||
<div>
|
||||
<h1 id="title">{{ .Title }}</h1>
|
||||
{{ range .Pages }}
|
||||
{{ .Render "summary"}}
|
||||
{{ end }}
|
||||
</div>
|
||||
</section>
|
||||
```
|
||||
* Fruit
|
||||
* Apple
|
||||
* Orange
|
||||
* Banana
|
||||
* Dairy
|
||||
* Milk
|
||||
* Cheese
|
||||
|
||||
#### Header 4
|
||||
## Other Elements — abbr, sub, sup, kbd, mark
|
||||
|
||||
Curabitur scelerisque felis viverra varius scelerisque. Ut enim libero, molestie gravida blandit at, mollis ornare tellus. Cras arcu mi, ultrices vel pulvinar vel, volutpat eu tortor. Nullam nec eros quis massa ultrices iaculis sed in metus. Praesent sollicitudin sem sit amet orci tempor gravida.
|
||||
<abbr title="Graphics Interchange Format">GIF</abbr> is a bitmap image format.
|
||||
|
||||
- Maecenas elementum vitae nibh vitae porttitor.
|
||||
- Aenean consequat, risus ut cursus placerat, arcu nulla sodales risus, ut molestie tellus tellus et dui.
|
||||
- Integer imperdiet turpis vitae lacus imperdiet, ut ornare ligula auctor. Integer in mi eu velit vehicula suscipit eget vulputate nulla.
|
||||
- Etiam vitae enim quis velit lobortis placerat a ut sem.
|
||||
- Curabitur lobortis ante sit amet orci pulvinar, sollicitudin viverra nunc accumsan.
|
||||
- Praesent fermentum orci quis leo facilisis posuere.
|
||||
H<sub>2</sub>O
|
||||
|
||||
Aliquam erat volutpat. In hac habitasse platea dictumst. Nunc ut tincidunt mauris. Sed at gravida risus, id semper magna. Nullam vitae enim mattis, sodales neque non, pharetra elit. Cras sit amet sagittis augue, et finibus turpis. Ut tempus tincidunt diam vel pharetra. Nulla porttitor odio sit amet nulla scelerisque, quis aliquam mi imperdiet. Sed tincidunt dui vel tellus vestibulum rhoncus. Donec tempus ultrices velit.
|
||||
X<sup>n</sup> + Y<sup>n</sup> = Z<sup>n</sup>
|
||||
|
||||
Press <kbd>CTRL</kbd>+<kbd>ALT</kbd>+<kbd>Delete</kbd> to end the session.
|
||||
|
||||
Most <mark>salamanders</mark> are nocturnal, and hunt for insects, worms, and other small creatures.
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue