实验田

有些例子还挺魔性的,为了心理健康建议别看全文。

Custom Shortcodes

Quote

Adapted from: loikein/hugo-tufte/layouts/shortcodes/blockquote.html, original author: shawnohare (Shawn O’Hare).

Including at least one of author or cite will begin the footnote, and detail is optional.

Hello world.

Usage:

{{< quote
author=`[Somebody famous](#)`
cite=`[Something famous](#)`
detail=`pp.256-27` >}}
Hello world.
{{< /quote >}}

diffcode

Adapted from: CloudCannon/alto-hugo-template/layouts/shortcodes/diffcode.html and CloudCannon/alto-hugo-template/layouts/partials/diffcode.html.

[submodule "something"]
    path = something
    url = https://github.com/something/something.git
    ignore = untracked
    branch = new-branch

Usage: (add + or - (no space) before the lines to be highlighted)

{{< diffcode >}}
```sh
[submodule "something"]
    path = something
    url = https://github.com/something/something.git
+    ignore = untracked
-    branch = new-branch
```
{{< /diffcode >}}

Two-column layout (new version)

你好世界

Hello world

Hello world test[^5]

こんにちは

Usage:

{{< cols "zh-Hans,en,ja" >}}
你好世界
||
Hello world
||
こんにちは
{{< /cols >}}

Ruby

你好世界(读作:hello world 

Usage:

{{< ruby "你好世界" "hello world" >}}

kbd

I+hate+typing  

Usage:

{{< kbd I hate `typing` >}}

Summary & Nested shortcodes

点击展开:我是谁?我在哪?

Hello world

0 Oo Ii Ll 1 | 2 Z 5 s 8 Bb 6 # * ^ ~ () {} [] . , : ; “ ‘ ’ `

Usage:

{{< fold  "我是谁?`我在哪?`" >}}
{{< md >}}Hello world{{< /md >}}

{{< highlight text >}}
0 Oo Ii Ll 1 | 2 Z 5 s 8 Bb 6 # * ^ ~ () {} [] . , : ; “ ‘ ’ `
{{< /highlight >}}
{{< /fold >}}

Figure

Local picture:

I did not understand but I was shocked

Usage:

{{< figure
folder="sticker"
name="shocked.png"
alt="I did not understand but I was shocked"
h="200px" >}}

Remote picture:

Dracula theme HTML demo for Sublime Text

Usage:

{{< figure 
src="https://raw.githubusercontent.com/dracula/sublime/master/images/html.png"
alt="Dracula theme HTML demo for Sublime Text"
link="https://github.com/dracula/sublime/blob/master/README.md" >}}

Video

Usage:

{{< video name="scream" folder="sticker" mute="false" w="50%" >}}

Emoji sticker

Static:

Usage:

{{< sticker name="css-is-awesome.png" h=120 animated="false" >}}

Animated: not looping vs. looping

Usage:

{{< sticker name="nice" h=200 loop="false" >}}
{{< sticker name="nice" h=200 >}}

Usage:

{{< preview "https://blog.ypertex.com/articles/useful-hugo-templating/" >}}

Fediverse post

Currently only supports Mastodon, because I do not have accounts on other types of servers.

No content warning (CW):

So hard to make table header sticky - DEV Community
dev.to/jennieji/so-hard-to-mak

— loikein (decaf soya latte) (@loikein​@mastodon.social) 四月 15, 2021

Has CW:

点击展开: FB, Google, MS containers

!*.facebook.com , Facebook
!*.fb.com , Facebook
!*.instagram.com , Facebook
!*.messenger.com , Facebook
!*.whatsapp.com , Facebook

!*.google.com , Google
!*.google.de , Google
!*.youtube-nocookie.com , Google
!*.youtube.com , Google

!*.bing.com , Microsoft
!*.linkedin.com , Microsoft
!*.linkedin.de , Microsoft
!*.live.com , Microsoft
!*.microsoft.com , Microsoft
!*.msn.com , Microsoft
!*.skype.com , Microsoft

— loikein (decaf soya latte) (@loikein​@mastodon.social) 六月 4, 2021

Usage:

{{< mstdn mastodon.social 106070125652504343 >}}

Twitter tweets

Currently waiting for gohugoio/hugo Issue #5617 to be implemented.

It will never happen due to changes in the Twitter API v2.

Usage:

{{< twitter 1621026986784337922 >}}

Bilibili

Usage: (supports both AV and BV)

{{< bilibili 52046593 >}}

YouTube-nocookie

Usage:

{{< youtube id=kF8I_r9XT7A title="How to Become Pope" >}}

Regular Markdown Stuff

Begin test file

Formatting

Bold, bold, 加粗

Italic, italic, 斜体

Underline, underline

Strike, strike, strike, ~strike~, –strike–

Highlight, ==highlight==

Footnote1, footnote2


Lists

  • ul
  • Unordered list
  1. ol
  2. Ordered list
dl
dt
Description list
  • Task list
  • Task list

Code

Inline code, `escape`, and keystroke

<h1>hello world</h1>
console.log("hello world");
alert("hello world");
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
// GetTitleFunc returns a func that can be used to transform a string to
// title case.
//
// The supported styles are
//
// - "Go" (strings.Title)
// - "AP" (see https://www.apstylebook.com/)
// - "Chicago" (see https://www.chicagomanualofstyle.org/home.html)
//
// If an unknown or empty style is provided, AP style is what you get.
func GetTitleFunc(style string) func(s string) string {
  switch strings.ToLower(style) {
  case "go":
    return strings.Title
  case "chicago":
    return transform.NewTitleConverter(transform.ChicagoStyle)
  default:
    return transform.NewTitleConverter(transform.APStyle)
  }
}

Font

我能体に傷つけないで吞下 259 ml glass。

Four score and seven years ago our fathers brought forth upon this continent, a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal.

0 Oo Ii Ll 1 | 2 Z 5 s 8 Bb 6 # * ^ ~ () {} [] . , : ; “ ‘ ’ `

0 Oo Ii Ll 1 | 2 Z 5 s 8 Bb 6 # * ^ ~ () {} [] . , : ; “ ‘ ’ `

Inline HTML

ref: https://burk.io/2020/let-there-be-dark

#282a36
#f8f8f2

LaTeX & Table

$\LaTeX{}$

$$R_1 \begin{cases} >\mu_{2} \ \leq \mu_{2} \end{cases}$$

Message to agent 1$M_1$
Agent 1’s action$a_1$
New finding$R_1 \begin{cases} >\mu_{2} \ \leq \mu_{2} \end{cases}$

  1. The linked footnote appears at the end of the document. ↩︎

  2. New lines ↩︎