博客样式测试

前言

样式测试

Butterfly 主题使用的插件

Tabs

在尽可能短的时间内消除40行

sub60

连续完成20次T-spin doule

大于号拼花

secret grade


{% tabs 成就记录, 2%}
<!-- tab 40L -->
**在尽可能短的时间内消除40行**

- [sub60](https://www.bilibili.com/video/BV1KP4y1N73j)

<!-- endtab -->

<!-- tab 20TSD -->

**连续完成20次T-spin doule**

- [机械TSD](https://www.bilibili.com/video/BV1Av411K7ER)

- [LST](https://www.bilibili.com/video/BV1BU4y1o7sH)

<!-- endtab -->

<!-- tab 拼花-->

**大于号拼花**

- [secret grade](https://www.bilibili.com/video/BV1j5411g7m5)

<!-- endtab -->
{% endtabs %}

timeline

title

xxxxx

title

xxxxx

{% timeline title,color %}
<!-- timeline title -->
xxxxx
<!-- endtimeline -->
<!-- timeline title -->
xxxxx
<!-- endtimeline -->
{% endtimeline %}

折叠框 hideToggle

Butterfly安裝方法

在你的博客根目錄裏

git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly

如果想要安裝比較新的dev分支，可以

git clone -b dev https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly



{% hideToggle Butterfly安裝方法 %}
在你的博客根目錄裏

git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly

如果想要安裝比較新的dev分支，可以

git clone -b dev https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly

{% endhideToggle %}

Tag Plugins Plus

插件：hexo-butterfly-tag-plugins-plus
“hexo-butterfly-tag-plugins-plus”: “^1.0.17”
测试例来自或参考于 Tag Plugins Plus | Akilarの糖果屋

行内文本样式 text

带下划线的文本
带着重号的文本
带波浪线的文本
带 ~~删除线~~ 的文本
键盘样式的文本 command + D
密码样式的文本：这里没有验证码

1. 带 {% u 下划线 %} 的文本
2. 带 {% emp 着重号 %} 的文本
3. 带 {% wavy 波浪线 %} 的文本
4. 带 {% del 删除线 %} 的文本
5. 键盘样式的文本 {% kbd command %} + {% kbd D %}
6. 密码样式的文本：{% psw 这里没有验证码 %}

行内文本 span

彩色文字
在一段话中方便插入各种颜色的标签，包括：红色、黄色、绿色、青色、蓝色、灰色。
超大号文字
文档「开始」页面中的标题部分就是超大号文字。
Volantis
A Wonderful Theme for Hexo

- 彩色文字
在一段话中方便插入各种颜色的标签，包括：{% span red, 红色 %}、{% span yellow, 黄色 %}、{% span green, 绿色 %}、{% span cyan, 青色 %}、{% span blue, 蓝色 %}、{% span gray, 灰色 %}。
- 超大号文字
文档「开始」页面中的标题部分就是超大号文字。
{% span center logo large, Volantis %}
{% span center small, A Wonderful Theme for Hexo %}

上标标签 tip

default

info

success

error

warning

bolt

ban

home

sync

cogs

key

bell

自定义font awesome图标

{% tip %}default{% endtip %}
{% tip info %}info{% endtip %}
{% tip success %}success{% endtip %}
{% tip error %}error{% endtip %}
{% tip warning %}warning{% endtip %}
{% tip bolt %}bolt{% endtip %}
{% tip ban %}ban{% endtip %}
{% tip home %}home{% endtip %}
{% tip sync %}sync{% endtip %}
{% tip cogs %}cogs{% endtip %}
{% tip key %}key{% endtip %}
{% tip bell %}bell{% endtip %}
{% tip fa-atom %}自定义font awesome图标{% endtip %}

动态标签 anima

warning

ban

{% tip warning faa-horizontal animated-hover %}warning{% endtip %}
{% tip ban faa-flash animated-hover %}ban{% endtip %}

复选列表 checkbox

单选列表 radio

纯文本测试

支持简单的 markdown 语法

支持自定义颜色

绿色

黄色

青色

蓝色

{% radio 纯文本测试 %}
{% radio checked, 支持简单的 [markdown](https://guides.github.com/features/mastering-markdown/) 语法 %}
{% radio red, 支持自定义颜色 %}
{% radio green, 绿色 %}
{% radio yellow, 黄色 %}
{% radio cyan, 青色 %}
{% radio blue, 蓝色 %}

链接卡片 link

~~标签插件没法嵌套，大悲。~~

博客搭建备忘录

/posts/6b405ec0.html

{% link 博客搭建备忘录, "/posts/6b405ec0.html", https://cdn.zerolacqua.top/images/linkcard.png %}

注释 notation

把鼠标移动到我上面试试

{% nota 把鼠标移动到我上面试试 ,可以看到注解内容出现在顶栏 %}

气泡注释 bubble

西藏地区湖泊众多，受人类活动影响较小，处于较为原始自然的状态，如扎日南木错位于西藏阿里地区错勤县境内，该湖水主要靠冰雪融水补给，入湖河流主要有错勤藏布、达龙藏布，错勤藏布发源于冈底斯山。它是西藏境内第三大湖泊。。这些湖泊的水补给多为冰川融水，其水位能一定程度反映冰川的消融情况，与我国淡水资源的利用研究有十分密切的联系，具有有很大的现实意义。

西藏地区湖泊众多，受人类活动影响较小，处于较为原始自然的状态，如{% bubble 扎日南木错,"位于西藏阿里地区错勤县境内，该湖水主要靠冰雪融水补给，入湖河流主要有错勤藏布、达龙藏布，错勤藏布发源于冈底斯山。它是西藏境内第三大湖泊。" ,"#868fd7" %}。这些湖泊的水补给多为冰川融水，其水位能一定程度反映冰川的消融情况，与我国淡水资源的利用研究有十分密切的联系，具有有很大的现实意义。

引用文献 reference

这个引用很奇怪，得把"[1]"和"高乐……“合在一个参数中，两个参数中间用”,"分隔。否则会出现奇怪的问题。referfrom 生成的锚点后面会多一个空格

同时，由于青藏高原环境恶劣，很少有现场测量仪器可用于湖水位监测。而基于卫星测高技术具有快速的全球覆盖能力，能够大尺度、周期性地探测陆表水的各种自然现象及其变化，故在这类研究中具有其他观测技术无可比拟的优越性^[1]基于卫星测高技术的青藏高原湖泊水位和冰川高程变化监测研究参考资料。

[1]

高乐. 基于卫星测高技术的青藏高原湖泊水位和冰川高程变化监测研究[D]. 中国科学院大学‚2014.


同时，由于青藏高原环境恶劣，很少有现场测量仪器可用于湖水位监测。而基于卫星测高技术具有快速的全球覆盖能力，能够大尺度、周期性地探测陆表水的各种自然现象及其变化，故在这类研究中具有其他观测技术无可比拟的优越性{% referto '[1]','基于卫星测高技术的青藏高原湖泊水位和冰川高程变化监测研究' %}。

{% referfrom '[1],高乐. 基于卫星测高技术的青藏高原湖泊水位和冰川高程变化监测研究[D]. 中国科学院大学&sbquo;2014.'  , 'https://d.wanfangdata.com.cn/thesis/ChJUaGVzaXNOZXdTMjAyMjA1MjYSCFkyNjc0NjA4Ggg2ODhsaWhrag%3D%3D ' %}

github 卡片 ghcard

|                                                     |                                                             |
| --------------------------------------------------- | ----------------------------------------------------------- |
| {% ghcard ZerolAcqua/old-programs %}                | {% ghcard ZerolAcqua/old-programs, theme=vue %}             |
| {% ghcard ZerolAcqua/old-programs, theme=buefy %}   | {% ghcard ZerolAcqua/old-programs, theme=solarized-light %} |
| {% ghcard ZerolAcqua/old-programs, theme=onedark %} | {% ghcard ZerolAcqua/old-programs, theme=solarized-dark %}  |
| {% ghcard ZerolAcqua/old-programs, theme=algolia %} | {% ghcard ZerolAcqua/old-programs, theme=calm %}            |

折叠框 folding

Butterfly 虽然也有内置折叠框 hideToggle 标签，但是 Volantis 的 folding 折叠框更好看一些。

查看代码测试

#include <iostream>
using namespace std;

int main() 
{
    cout << "Hello, World!";
    return 0;
}

{% folding green, 查看代码测试 %}

```c++
    #include <iostream>
    using namespace std;
    
    int main() 
    {
        cout << "Hello, World!";
        return 0;
    }
```

{% endfolding %}

网站卡片 sites

丘卡饮品店欢迎来玩~

{% sitegroup %}
{% site 丘卡饮品店, url=http://zerolacqua.top, screenshot= https://cdn.zerolacqua.top/images/blogs/博客样式测试/丘卡饮品店.png , avatar= https://cdn.zerolacqua.top/images/avatar.png, description=欢迎来玩~ %}
{% endsitegroup %}

诗词标签 poem

水调歌头

苏轼

丙辰中秋，欢饮达旦，大醉，作此篇，兼怀子由。
明月几时有？把酒问青天。
不知天上宫阙，今夕是何年？
我欲乘风归去，又恐琼楼玉宇，高处不胜寒。
起舞弄清影，何似在人间？

转朱阁，低绮户，照无眠。
不应有恨，何事长向别时圆？
人有悲欢离合，月有阴晴圆缺，此事古难全。
但愿人长久，千里共婵娟。

{% poem 水调歌头,苏轼 %}
丙辰中秋，欢饮达旦，大醉，作此篇，兼怀子由。
明月几时有？把酒问青天。
不知天上宫阙，今夕是何年？
我欲乘风归去，又恐琼楼玉宇，高处不胜寒。
起舞弄清影，何似在人间？

转朱阁，低绮户，照无眠。
不应有恨，何事长向别时圆？
人有悲欢离合，月有阴晴圆缺，此事古难全。
但愿人长久，千里共婵娟。
{% endpoem %}

其他插件

spoiler

插件：hexo-spoiler

你看不见我

{%spoiler 你看不见我 %}

ruby

插件：markdown-it-ruby
spoiler 和 ruby 可以一起用哦

我是看板娘零醇丘卡

低糖啾啾~

我是看板娘{零醇丘卡|{%spoiler 低糖啾啾~%}}

ECharts

插件：hexo-tag-echarts

似乎无法嵌套。本站已弃用此插件，只在特定页面使用。

示例源码

{% echarts 400 '85%' %}
{
    tooltip : {
        trigger: 'axis',
        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    legend: {
        data:['利润', '支出', '收入']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis : [
        {
            type : 'value'
        }
    ],
    yAxis : [
        {
            type : 'category',
            axisTick : {show: false},
            data : ['周一','周二','周三','周四','周五','周六','周日']
        }
    ],
    series : [
        {
            name:'利润',
            type:'bar',
            itemStyle : {
                normal: {
                    label: {show: true, position: 'inside'}
                }
            },
            data:[200, 170, 240, 244, 200, 220, 210]
        },
        {
            name:'收入',
            type:'bar',
            stack: '总量',
            itemStyle: {
                normal: {
                    label : {show: true}
                }
            },
            data:[320, 302, 341, 374, 390, 450, 420]
        },
        {
            name:'支出',
            type:'bar',
            stack: '总量',
            itemStyle: {normal: {
                label : {show: true, position: 'left'}
            }},
            data:[-120, -132, -101, -134, -190, -230, -210]
        }
    ]
};
{% endecharts %}