Testing features of HEXO & JS in custom theme

Inspired by: https://yuang01.github.io/

https://github.com/yuang01/hexo-theme-bamboo

The purpose of this post is to see if everything documented actually works…

Gallery 图片

Requires fancybox.js true

一行一个图片

一行多个图片（不换行）

多行多个图片（每行2～8个图片）

组合使用

Gallery Group 图片示例

Buttons

融入段落中按钮

不设置任何参数的按钮适合融入段落中。不设置任何参数的按钮适合融入段落中。不设置任何参数的按钮适合融入段落中。不设置任何参数的按钮适合融入段落中。不设置任何参数的按钮适合融入段落中。 ### 空心和实心按钮示例博客示例博客 ### 大点的按钮和样式开始使用 ### 环形按钮开始使用 ### warning等颜色按钮开始使用开始使用开始使用开始使用开始使用 ### warning等颜色空心按钮开始使用开始使用开始使用开始使用开始使用 ### warning等颜色空心环形居中按钮开始使用开始使用 ### 带有头像和名称的按钮

草帽海贼团

小绵羊

沫兮

凯爹

阿离

韩信

Rounded buttons 环形图标按钮

下载源码查看文档

环形图标居中按钮

下载源码查看文档

环形图标填充按钮

下载源码查看文档

Card Views 圆形图标按钮

这个是微信

微信

这个是支付宝

支付宝

Checkbox 进度条示例

纯文本测试

支持简单的 markdown 语法

支持自定义颜色

绿色 + 默认选中

黄色 + 默认选中

青色 + 默认选中

蓝色 + 默认选中

增加

减少

叉

Radio

纯文本测试

支持简单的 markdown 语法

支持自定义颜色

绿色

黄色

青色

蓝色

warning色

success色

danger色

info色

Progress Bars 进度条

进度条测试

Accordion Box

查看图片测试

Cyan 青色-默认打开

查看默认打开的折叠框

这是一个默认打开的折叠框。

Green 查看代码

查看代码测试

这里写代码高亮部分

Yellow 查看列表

查看列表测试

haha
hehe

Red 查看嵌套

查看嵌套测试

查看嵌套测试2

查看嵌套测试3

hahaha

。。。

！！！

Inline Image 标签

段落中插入图片

这是一段话。

这又是一段话。

自定义图片并添加描述

自定义图片

指定宽度

随机生成风景（alt描述可有可无）

随机生成二次元壁纸

设置占位背景色

随机生成呆萌酱

Link 标签

超链接标签

如何参与项目

http://www.baidu.com

如何参与项目

http://www.baidu.com

### 上述事例代码

如何参与项目

http://www.baidu.com

如何参与项目

http://www.baidu.com

如何参与项目

http://www.baidu.com

如何参与项目

http://www.baidu.com

Post Link

Include links to other posts.

1 2	`{% post_path filename %} {% post_link filename [title] [escape] %}`

//TODO: fix bug on post_path & post_link where it fails to find the post…

You can ignore permalink and folder information, like languages and dates, when using this tag.

For instance: {% post_link how-to-bake-a-cake %}.

This will work as long as the filename of the post is how-to-bake-a-cake.md, even if the post is located at source/posts/2015-02-my-family-holiday and has permalink 2018/en/how-to-bake-a-cake.

You can customize the text to display, instead of displaying the post’s title.

Do not escape title.

{% post_link Markup-manual 'bold custom title' false %}

bold custom title

Note 标签

note演示效果

markdown默认写法，左边框颜色，随着主题色改变

我有一只小毛驴，我从来都不骑。

适合引用一段话

这是一个警告

这是一个错误

这是一个成功

这是一个信息

## Noteblock 演示效果

标题（可选）

noteblock base

标题（可选）

noteblock quote

标题（可选）

noteblock warning

标题（可选）

noteblock success

标题（可选）

noteblock danger

标题（可选）

noteblock info

Title 演示

演示

我是标题

你好啊，未来越来越好哦

我是标题

你好啊，加油哦

我是标题

titleB 演示

我是标题bbb

Paragraph 段落文本

段落文本演示

我是一个文本高亮大萨达所多撒多撒多撒大多多撒多撒多撒大所多撒大多

Text 文本样式标签

Text文本样式标签演示

带下划线的文本

带着重号的文本

带波浪线的文本

带 ~~删除线~~ 的文本

键盘样式的文本 command + D

密码样式的文本：这里没有验证码

text color 文字颜色

这是一个简单的文字我是一个文字高亮，唱着我们心肠的曲折
这是一个简单的文字我是一个文字高亮，唱着我们心肠的曲折
这是一个简单的文字我是一个文字高亮，唱着我们心肠的曲折
这是一个简单的文字我是一个文字高亮，唱着我们心肠的曲折
这是一个简单的文字我是一个文字高亮，唱着我们心肠的曲折
这是一个简单的文字我是一个文字高亮，唱着我们心肠的曲折
这是一个简单的文字我是一个文字高亮，唱着我们心肠的曲折
这是一个简单的文字我是一个文字高亮，唱着我们心肠的曲折
这是一个简单的文字我是一个文字高亮，唱着我们心肠的曲折
这是一个简单的文字我是一个文字高亮，唱着我们心肠的曲折

我是一个居中文字高亮

这是一个简单的文字我是一个文字高亮，唱着我们心肠的曲折
这是一个简单的文字我是一个文字高亮，唱着我们心肠的曲折

text highlighting 文本高亮

文本高亮演示效果
这是一个简单的文字我是一个文本高亮，唱着我们心肠的曲折
这是一个简单的文字我是一个文本高亮，唱着我们心肠的曲折
这是一个简单的文字我是一个文本高亮，唱着我们心肠的曲折
这是一个简单的文字我是一个文本高亮，唱着我们心肠的曲折
这是一个简单的文字我是一个文本高亮，唱着我们心肠的曲折
这是一个简单的文字我是一个文本高亮，唱着我们心肠的曲折
这是一个简单的文字我是一个文本高亮，唱着我们心肠的曲折
这是一个简单的文字我是一个文本高亮，唱着我们心肠的曲折
这是一个简单的文字我是一个文本高亮，唱着我们心肠的曲折
这是一个简单的文字我是一个文本高亮，唱着我们心肠的曲折

Simple TABLE

col 1	col 2	col 2
cell 1,1	cell 1,2	left 1,3
default 2,1	right 2,2	cell 2,3

Timeline 时间线演示

2021-01-01 1.0.3 -> 1.0.3

我是一个测试文字ghghgh。
我是一个测试问题二’qweqw’，请问企鹅请问请问佛挡杀fgfgf佛第三节课。
我是一个测试问题三’fgfgfg’，请问企鹅请问请问佛挡杀trtrtr佛第三节课。

2020-08-15 1.0.2 -> 1.0.2

这是一段测试文字

2020-08-08 1.0.0 -> 1.0.0

我是一个测试文字ghghgh。
我是一个测试问题二’qweqw’，请问企鹅请问请问佛挡杀fgfgf佛第三节课。
我是一个测试问题三’fgfgfg’，请问企鹅请问请问佛挡杀trtrtr佛第三节课。

Media

Video视频

video演示

100%宽度

50%宽度

25%宽度

Audio 音频

YouTuber

{% youtuber video 5ROIU_9dYe4 %}

    start: 0,
    allowfullscreen: 1,
    autoplay: 0,
    hl: en,
    cc_lang_pref: en,
    cc_load_policy: 1,
    color: white,
    controls: 1,
    disablekb: 0,
    enablejsapi: 1,
    fs: 0,
    iv_load_policy: 3,
    loop: 0,
    modestbranding: 1,
    playsinline: 0,
    privacy_mode: yes,
    rel: 0,
    showinfo: 0,
    origin: blog.richiebartlett.com,
    widget_referrer: blog.richiebartlett.com
{% endyoutuber %}

Vimeo

{% vimeo 56695094 %}

Site-Card 演示

Wikipedia

{% wikipedia title:User_interface wikiButton:true lang:en sentences:5 %}

Wikipedia

Twitter

{% twitter https://twitter.com/MillsReggie/status/1475339348170375171 %}

FootNotes

Easy to add internal references similar to Wikipedia within the article. Simply add a bracketed carot number (e.g. [ ^1 ]) in the paragraph. At the end of the article, place a section with each of the brackets and references like below:

## Footnotes

[ ^1 ]: [Frequently Asked Questions (FAQs) - U.S. Energy Information Administration (EIA)](https://www.eia.gov/tools/faqs/faq.php?id=97&t=3#:~:text=How%20much%20electricity%20does%20an,about%20877%20kWh%20per%20month.)
[ ^2 ]: [Amazon.com: 2600W Power Supply for ASIC Miner](https://www.amazon.com/2600W-Supply-Compatible-BITMAIN-Antminer/dp/B08RHXSMMP/ref=sr_1_fkmr0_1?dchild=1&keywords=asic+miner+2600+watt&qid=1622263558&sr=8-1-fkmr0)
[ ^3 ]: [Bank of America prioritized internal cloud. Now it's evaluating third-party providers](https://www.ciodive.com/news/bank-of-america-prioritized-internal-cloud-now-its-evaluating-third-party/565228/)

CodeBlocks

Hi-World

// https://hexo.io/docs/syntax-highlight.html
/*
 ```[language] [title] [url] [link text] [additional options]
 */

let string = "Hello World";

string += " all!";

alert( string );

Github 卡片

Github用户卡片

表格中加入用户卡片

单个项目卡片

表格中加入单个项目卡片

GIST

{% gist 18938572f5df000ebe06fbd1872e4e39 useHexo.md %}

Post Excerpt

Use text placed before the  tag as an excerpt for the post. excerpt: value in the front-matter, if specified, will take precedent.

Example:

1
2
3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<!-- more -->
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

HEXO helpers

https://hexo.io/docs/helpers

HEXO variables

https://hexo.io/docs/variables

Testing features of HEXO & JS in custom theme

Gallery 图片

一行一个图片

一行多个图片（不换行）

多行多个图片（每行2～8个图片）

多行多个图片（每行2～8个图片）

组合使用

Gallery Group 图片示例

Buttons

融入段落中按钮

一行三个

一行四个

一行五个

Rounded buttons 环形图标按钮

环形图标居中按钮

环形图标填充按钮

Card Views 圆形图标按钮

Checkbox 进度条示例

Radio

Progress Bars 进度条

Accordion Box

Cyan 青色-默认打开

Green 查看代码

Yellow 查看列表

Red 查看嵌套

Tab 事例

Inline Image 标签

段落中插入图片

自定义图片并添加描述

指定宽度

设置占位背景色

Link 标签

超链接标签

Post Link

Do not escape title.

Note 标签

note演示效果

Title 演示

演示

我是标题

我是标题

我是标题

我是标题

titleB 演示

我是标题bbb

我是标题bbb

我是标题bbb

Paragraph 段落文本

Text 文本样式标签

Text文本样式标签演示

text color 文字颜色

text highlighting 文本高亮

Simple TABLE

Timeline 时间线演示

Media

Video视频

video演示

Audio 音频

YouTuber

Vimeo

Site-Card 演示

Wikipedia

Twitter

FootNotes

CodeBlocks

Github 卡片

Github用户卡片

表格中加入用户卡片

单个项目卡片

表格中加入单个项目卡片

GIST

Post Excerpt

HEXO helpers

HEXO variables