Writing Guide

This post is a guide for efficiently writing and deploying posts with Hexo Next for myself.

Writing

General

Add explicit icon for open external link in a new tab

1	{% exturl Cindy's Palace https://cindyli.me %}

Note: Accodring to Next Docs - SEO, exturl and extlink will be deprecated and all external links will be opened in a new tab by defaul with the exturl: false config. The icon will be added automatically too. Such as: Google

Insert email address

1	<fake@gmail.com>

fake@gmail.com

Insert a code named code block

1
2
3

```python demo.py
print('demo!')
```

demo.py

1	print('demo!')

Insert a table

| Fake Table Col 1                       | Fake Table Col 2                       |
|:--------------------------------------:|:--------------------------------------:|
| Val1                                   | Val4                                   |
| Val2                                   | Val5                                   |
| Val3                                   | Val6                                   |

Fake Table Col 1	Fake Table Col 2
Val1	Val4
Val2	Val5
Val3	Val6

Indentation

Use &emsp; to excape for the first lines.

Anchor

<!-- To insert an anchor -->
<span id = "anchor1"></span>

<!-- To navigate to the anchor -->
[Return to Anchor](#anchor1)

Centered text block

1
2
3

{% cq %}
Centered Text Block!
{% endcq %}

Centered Text Block!

Text with color backgorund

<span id="inline-blue"> Text with blue background </span>, 
<span id="inline-purple"> Text with purple background </span>,
<span id="inline-yellow"> Text with yellow background </span>, 
<span id="inline-green"> Text with green background </span>

Text with blue background , Text with purple background , Text with yellow background , Text with green background

Theme Label

This is an example paragraph, you could see {% label @label with default style %}, and label with {% label primary@primary style %}. Of
course you can use other of the boostrap styles here such as {% label info @info style %} and {% label danger @danger style %}. Along with the styles
from bootstrap, you could also apply normal styles to the text, such as *{% label warning @italic %}* or **{% label warning @bold %}**.
You could even use ~~{% label danger @strikethrough %}~~!

This is an example paragraph, you could see label with default style, and label with primary style. Of
course you can use other of the boostrap styles here such as info style and danger style. Along with the styles
from bootstrap, you could also apply normal styles to the text, such as *italic* or bold. You could even use ~~strikethrough~~!

Theme Note (Bootstrap Callout)

1
2
3

{% note %}
####  undefined class style
{% endnote %}

undefined class style

1
2
3

{% note default %}
#### default note
{% endnote %}

default note

1
2
3

{% note primary %}
#### primary note
{% endnote %}

primary note

1
2
3

{% note info %}
#### info note
{% endnote %}

info note

1
2
3

{% note success %}
#### success note
{% endnote %}

success note

1
2
3

{% note warning %}
#### warning note
{% endnote %}

warning note

1
2
3

{% note danger %}
#### danger note
{% endnote %}

danger note

1
2
3

{% note info no-icon%}
#### with info note, NO icon
{% endnote %}

with info note, NO icon

{% note info no-icon%}
#### with info note, NO icon, with code block
{% code %}
print('Hello World!')
{% endcode %}
{% endnote %}

with info note, NO icon, with code block

1	print('Hello World!')

Tabs

Tabs with 1st tab selected

{% tabs A Lot of Tabs, 1 %}
  <!-- tab -->
    **This is Tab 1.**
  <!-- endtab -->

  <!-- tab -->
    **This is Tab 2.**
  <!-- endtab -->

  <!-- tab -->
    **This is Tab 3.**
  <!-- endtab -->
{% endtabs %}

This is Tab 1.

This is Tab 2.

This is Tab 3.

Media

Insert icons

1 2	<i class="fa fa-github"> This is a Github fontawesom-based icon. </i> <i class="fa fa-github fa-lg"> This is a larger Github fontawesom-based icon. </i>

Insert videos

1	{% video https://example.com/sample.mp4 %}

1	{% video /path/to/my/video.mp4 %}

Insert musics

To see the full docs, check here

1	{% aplayer "Caffeine" "Jeff Williams" "caffeine.mp3" "picture.jpg" "lrc:caffeine.txt" %}

You could also insert a music from a streaming service:

<!-- Simple example (id, server, type)  -->
{% meting "60198" "netease" "playlist/song/album/search/artist" %}

<!-- Advanced example -->
{% meting "3169251" "netease" "album" "mutex:false" "listmaxheight:340px" "preload:none" "theme:#ad7a86" %}

An example of album could be:

Insert images

1	{% fullimage /url[@lazy], [alt], [title], [size] %}

An example could be:

1	{% fullimage /images/posts/4a17b156/dana1.jpg, YS-III lacrimosa of Dana, YS-III lacrimosa of Dana %}

You could also resize it:

1	{% fullimage /images/posts/4a17b156/rean1.jpg, Sen No Kiseki-I, Sen No Kiseki-I, 50% %}

Insert pdfs

1	{% pdf https://www.nature.com/articles/171737a0.pdf 650px %}

Warning: This is not fully compatible with the mobile browsers!

Writing Workflow

1. Start a new post

1	hexo new post <title>

2. Preview it locally

1	hexo clean && hexo s

3. Deploy to the server

1	hexo clean && hexo deploy

Others

Create a new special page

This will create a new special page, such as about or tags

1	hexo new page <title>