说明

这是我的第一篇博客，实际在去年我就有搭建博客的想法，不过那时对这些技术不了解，所以就什么都没做。
这段时间学了一部分javaSE，想要把学的过程中那些事分享出来，所以又重新来搭建博客。

这不是一个博客搭建教程，我也是看着别人的教程一步步摸出来的。这个是视频教程，这个是Butterfly的教程。

原本使用 Github Pages 来创建博客，但 github.io 无法访问，所以采用了Gitee Pages来创建博客。

中间还遇到了不少麻烦，不过好在都一一解决了，花了3天完成了这个博客的部署和使用上的学习。

测试部分

此部分为单纯的功能测试

插入指令或源码

helloworld.java
1
2
3
4
5
public class helloworld{
    public static void main(String[] args){
        System.out.println("Hello World!");
    }
}

插入图片

Markdown 语法

图片未能加载

HTML 语法

图片未能加载

为 img 标签添加 no-lightbox class 名，使图片不能使用放大模式。

Butterfly 的 Note 功能

1
2
3
{% note [class] [no-icon] [style] %}
Any content (support inline tags too.io).
{% endnote %}
1
2
3
4
5
6
7
8
class
【可选】标识，不同的标识有不同的配色（ default / primary / success / info / warning / danger ）

no-icon
【可选】不显示 icon

style
【可选】可以覆盖配置中的 style（simple/modern/flat/disabled）

默认

default 灰色继续

primary 紫色加号

success 绿色成功

info 蓝色信息

warning 黄色注意

danger 红色危险

Butterfly 的 Tabs 功能

Hello World!

你好，世界！

这是一个测试

Butterfly 的 Tag-hide 功能

Tag-hide
1
2
3
{% hideToggle display,bg,color %}
content
{% endhideToggle %}

Butterfly 的 Label 功能

1
2
{% label text color %}
# color: default/blue/pink/red/purple/orange/green
灰底字

Butterfly 的 Button 功能

不进行测试，详见此处。

分割线

1
<hr>

按键

1
<kbd>Ctrl</kbd> + <kbd>C</kbd>

Ctrl + C

时间线

1
2
3
4
5
6
7
8
9
10
{% timeline 这是个标题 %}
<!-- timeline 一个时间 -->
一件事
<!-- endtimeline -->
<!-- timeline 另一个时间 -->
另一件事

<img src="/img/avatar.png" width = "300" height = "300" alt="还能放图片！" />
<!-- endtimeline -->
{% endtimeline %}

这是个标题

一个时间

一件事

另一个时间

另一件事

还能放图片！

隐藏的内容

1
{% psw 此地无银三百两！ %}
此地无银三百两！

复选列表

1
2
3
4
5
6
7
8
9
10
{% checkbox 默认 %}
{% checkbox checked, 选`中`了 %}
{% checkbox red, 红色 %}
{% checkbox green checked, 绿色 选中 %}
{% checkbox yellow, 黄色 %}
{% checkbox cyan checked, 青色 选中 %}
{% checkbox blue, 蓝色 %}
{% checkbox plus green checked, 加号 %}
{% checkbox minus yellow checked, 减号 %}
{% checkbox times red checked, 叉号 %}

默认

选中了

红色

绿色 选中

黄色

青色 选中

蓝色

加号

减号

叉号

单选列表

1
2
3
4
5
6
7
{% radio 默认 %}
{% radio checked, 选`中`了 %}
{% radio red , 红色 %}
{% radio green checked, 绿色 选中 %}
{% radio yellow, 黄色 %}
{% radio cyan checked, 青色 选中 %}
{% radio blue, 蓝色 %}

默认

选中了

红色

绿色 选中

黄色

青色 选中

蓝色

更好康的链接

1
2
{% link Jonny's Blog, https://jonnys.top, /favicon.png %}
作者说图片可以不加，但是在我这不加图片会报错

Jonny's Blog

https://jonnys.top

Github徽标

1
2
{% bdage Frame,Hexo,Hexo||hexo,https://hexo.io/ %}
{% bdage Theme,Butterfly,Butterfly||butterfly,https://github.com/jerryc127/hexo-theme-butterfly %}

音频和视频

1
2
{% audio https://github.com/volantis-x/volantis-docs/releases/download/assets/Lumia1020.mp3 %}
{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}

进度条

1
2
3
4
5
6
{% progress 10 red "10% 红色" %}
{% progress 30 yellow "30% 黄色" %}
{% progress 50 green "50% 绿色" %}
{% progress 70 cyan "70% 青色" %}
{% progress 90 blue "90% 蓝色" %}
{% progress 100 gray "100% 灰色" %}

10% 红色

30% 黄色

50% 绿色

70% 青色

90% 蓝色

100% 灰色

字体

粗体正常体与斜体混合

表格

1
2
3
4
5
| 第一列标题               | Title 2               | 标题 3                   |
| ------------------------ | --------------------- | ------------------------ |
| 一个表格                 | Nothing, just a test. | Some english!            |
|                          |                       |                          |
| Welcome to Jonny's Blog! | 上面一行空白          | 顺带测测字体是否真的等宽 |
第一列标题Title 2标题 3
一个表格Nothing, just a test.Some english!
Welcome to Jonny’s Blog!上面一行空白顺带测测字体是否真的等宽