Bold and Italic

1
2
**Hello,World!**
*Hello,world!*

Hello,World! Hello,world!

Inline HTML

1
<p>To reboot your computer, press <kbd>ctrl</kbd>+<kbd>alt</kbd>+<kbd>del</kbd>.</p>

To reboot your computer, press ctrl+alt+del.

Blog Encryption

Install hexo-blog-encrypt Plugin

  • Run npm install hexo-blog-encrypt in the hexo directory
  • Add the following content to the /Hexo/_config.yml file:
1
2
encrypt:
	enable:true

Using the Plugin

  • Add the corresponding text to the header of the blog post where you want to use encryption:
1
2
3
4
5
6
7
8
9
---
title: Hexo加密功能
date: 2019-09-04 23:20:00   
tags: [学习笔记,Hexo]
categories: Blog Setup
password: smile   
abstract: Welcome to my blog, enter password to read. 
message: 密码输入框上描述性内容
---
  • Where:
    • password: The password used for this blog post
    • abstract: Blog summary text (brief)
    • message: Descriptive text above the password input box

Original Link

Insert YouTube Videos

1
2
3
4
5
6
7
8
9
10
Html version:

<a href="https://youtu.be/BSlMAJ7SkMA
" target="_blank"><img src="https://img.youtube.com/vi/ARted4RniaU/0.jpg"
alt="IMAGE ALT TEXT HERE" width="240" height="180" border="10" /></a>

Pure markdown version:

[![IMAGE ALT TEXT HERE](https://img.youtube.com/vi/ARted4RniaU/0.jpg)](https://www.youtube.com/watch?v=ARted4RniaU)

IMAGE ALT TEXT HERE

Pure markdown version:

IMAGE ALT TEXT HERE

Embedded Video

Method 1:

1
{% youtube video_id %}

How to find the video ID:

The string of letters and numbers after the address in the image, such as: BSlMAJ7SkMA

Method 2:

Click the embed option in the image above, which provides HTML code (HTML and markdown have some compatibility), and directly copy it to the md file.

You can modify some HTML attributes like width and height. Especially width=100% will make it stretch to full width.

Block Quote

Add quotes to your blog…

1
2
3
{% blockquote [author,source] [link] [source_link_title] %}
content
{% endblockquote %}

Thank you for watching!

--- Can be nested!

感谢观看！

Thank you for watching!

Note (Bootstrap Callout)

Each method is divided into simple, modern, and flat themes, which are the so-called styles.

Here I only show the flat style

Method 1:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
{% note flat %}
Default note block tag
{% endnote %}

{% note default flat %}
default note block tag
{% endnote %}

{% note primary flat %}
primary note block tag
{% endnote %}

{% note success flat %}
success note block tag
{% endnote %}

{% note info flat %}
info note block tag
{% endnote %}

{% note warning flat %}
warning note block tag
{% endnote %}

{% note danger flat %}
danger note block tag
{% endnote %}

Default note block tag

default note block tag

primary note block tag

success note block tag

info note block tag

warning note block tag

danger note block tag

Method 2:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{% note 'fab fa-cc-visa' flat %}
Are you using Visa or UnionPay
{% endnote %}
{% note blue 'fas fa-bullhorn' flat %}
2021 is coming soon....
{% endnote %}
{% note pink 'fas fa-car-crash' flat %}
Drive carefully, safety first
{% endnote %}
{% note red 'fas fa-fan' flat%}
Is this three blades or four?
{% endnote %}
{% note orange 'fas fa-battery-half' flat %}
Are you using Visa or UnionPay
{% endnote %}
{% note purple 'far fa-hand-scissors' flat %}
Rock Paper Scissors
{% endnote %}
{% note green 'fab fa-internet-explorer' flat %}
The browser that frontend developers hate the most
{% endnote %}

Are you using Visa or UnionPay

2021 is coming soon….

Drive carefully, safety first

Is this three blades or four?

Are you using Visa or UnionPay

Rock Paper Scissors

The browser that frontend developers hate the most

Tabs

1
2
3
4
5
6
7
8
9
10
11
12
13
{% tabs test1 %}
<!-- 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.

Button

Inline

1
2
This is my website, click the button {% btn 'https://butterfly.js.org',Butterfly %}
This is my website, click the button {% btn 'https://butterfly.js.org',Butterfly,,outline%}

This is my website, click the button Butterfly This is my website, click the button Butterfly

Block

1
2
3
This is my website, click the button  {% btn 'https://butterfly.js.org',Butterfly,far fa-hand-point-right,block larger %}
This is my website, click the button  {% btn 'https://butterfly.js.org',Butterfly,far fa-hand-point-right,block center larger %}
This is my website, click the button  {% btn 'https://butterfly.js.org',Butterfly,far fa-hand-point-right,block right blue larger %}

This is my website, click the button Butterfly This is my website, click the button Butterfly This is my website, click the button Butterfly

Options

1
2
3
4
5
6
7
8
9
<div class="btn-center">
{% btn 'https://butterfly.js.org',Butterfly,far fa-hand-point-right,larger %}
{% btn 'https://butterfly.js.org',Butterfly,far fa-hand-point-right,blue larger %}
{% btn 'https://butterfly.js.org',Butterfly,far fa-hand-point-right,pink larger %}
{% btn 'https://butterfly.js.org',Butterfly,far fa-hand-point-right,red larger %}
{% btn 'https://butterfly.js.org',Butterfly,far fa-hand-point-right,purple larger %}
{% btn 'https://butterfly.js.org',Butterfly,far fa-hand-point-right,orange larger %}
{% btn 'https://butterfly.js.org',Butterfly,far fa-hand-point-right,green larger %}
</div>
Butterfly Butterfly Butterfly Butterfly Butterfly Butterfly Butterfly 
1
2
3
4
5
6
7
8
9
<div class="btn-center">
{% btn 'https://butterfly.js.org',Butterfly,far fa-hand-point-right,outline larger %}
{% btn 'https://butterfly.js.org',Butterfly,far fa-hand-point-right,outline blue larger %}
{% btn 'https://butterfly.js.org',Butterfly,far fa-hand-point-right,outline pink larger %}
{% btn 'https://butterfly.js.org',Butterfly,far fa-hand-point-right,outline red larger %}
{% btn 'https://butterfly.js.org',Butterfly,far fa-hand-point-right,outline purple larger %}
{% btn 'https://butterfly.js.org',Butterfly,far fa-hand-point-right,outline orange larger %}
{% btn 'https://butterfly.js.org',Butterfly,far fa-hand-point-right,outline green larger %}
</div>
Butterfly Butterfly Butterfly Butterfly Butterfly Butterfly Butterfly