文章范文

文章范文

版权申明:本文为原创文章,转载请注明原文出处

原文链接:http://live.auroot.cn/hexo_docs_1/

头标范本

1
2
3
4
5
6
7
8
9
10
title: 	文章范文
cover: /Auins/img/auins_1.jpeg # 封面
thumbnail: /Auins/img/auins_1.jpeg # 侧边栏封面
date: 2021-08-19 22:59:32
toc: true # 打开目录功能
comments: true # 打开评论功能
tags: 工具教程
categories: [工具教程,主题工具] #分类
excerpt: Welcome to Hexo! #简介
copy_from: https://auroot.cn #加入这行 为转载

按钮

点击展开代码 >folded
1
2
3
4
5
6
<div class="buttons">
<button class="button is-info">Info</button>
<button class="button is-success">Success</button>
<button class="button is-warning">Warning</button>
<button class="button is-danger">Danger</button>
</div>

光有按钮肯定是不行的,一般我们还需要给按钮增加事件,比如点击下面的按钮,可以显示一条一言(Hitokoto)。

↑↑↑ 试着点击“显示一言”!
点击展开代码 >folded
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<button class="button is-info" onclick="showHitokoto(event)">显示一言</button>
<blockquote class="hitokoto">↑↑↑ 试着点击“显示一言”!</blockquote>

<script>
function showHitokoto (event) {
event.target.classList.add('is-loading');
$.ajax({
type: 'GET',
url: 'https://v1.hitokoto.cn/',
success: function (data) {
$('.hitokoto').text(data.hitokoto);
event.target.classList.remove('is-loading');
}
});
}
</script>

进度条





点击展开代码 >folded
1
2
3
4
5
<progress class="progress is-info" value="20" max="100"></progress>
<progress class="progress is-success" value="40" max="100"></progress>
<progress class="progress is-warning" value="60" max="100"></progress>
<progress class="progress is-danger" value="80" max="100"></progress>
<progress class="progress is-info" max="100"></progress>

标签页

Pixabay 是全球知名的图库网站及充满活力的创意社区,拥有上百万张免费正版高清照片素材,涵盖风景、人物、动态、静物等多种分类,你可以在任何地方使用 Pixabay 图库中的素材…

网易云音乐 是一款专注于发现与分享的音乐产品,依托专业音乐人、DJ、好友推荐及社交功能,为用户打造全新的音乐生活。

哔哩哔哩 是国内知名的视频弹幕网站,这里有最及时的动漫新番,最棒的ACG氛围,最有创意的Up主。大家可以在这里找到许多欢乐。

石墨文档 是全新一代云 Office 办公软件,支持多人在线协作编辑文档和表格,独有内容级安全,全过程留痕可追溯。PC 端和移动端全覆盖,随时随地远程办公。即写即存…

点击展开代码 >folded
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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<div class="tabs is-toggle"><ul>
<li class="is-active"><a onclick="onTabClick(event)">
<span class="icon is-small"><i class="fas fa-image" aria-hidden="true"></i></span>
<span>Pictures</span>
</a></li>
<li><a onclick="onTabClick(event)">
<span class="icon is-small"><i class="fas fa-music" aria-hidden="true"></i></span>
<span>Music</span>
</a></li>
<li><a onclick="onTabClick(event)">
<span class="icon is-small"><i class="fas fa-film" aria-hidden="true"></i></span>
<span>Videos</span>
</a></li>
<li><a onclick="onTabClick(event)">
<span class="icon is-small"><i class="far fa-file-alt" aria-hidden="true"></i></span>
<span>Documents</span>
</a></li>
</ul></div>

{% raw %}<div id="Pictures" class="tab-content" style="display: block;">{% endraw %}
[Pixabay](https://pixabay.com/zh/) 是全球知名的图库网站及充满活力的创意社区,拥有上百万张免费正版高清照片素材,涵盖风景、人物、动态、静物等多种分类,你可以在任何地方使用 Pixabay 图库中的素材...
{% raw %}</div>{% endraw %}
{% raw %}<div id="Music" class="tab-content">{% endraw %}
[网易云音乐](https://music.163.com/) 是一款专注于发现与分享的音乐产品,依托专业音乐人、DJ、好友推荐及社交功能,为用户打造全新的音乐生活。
{% raw %}</div>{% endraw %}
{% raw %}<div id="Videos" class="tab-content">{% endraw %}
[哔哩哔哩](https://www.bilibili.com/) 是国内知名的视频弹幕网站,这里有最及时的动漫新番,最棒的ACG氛围,最有创意的Up主。大家可以在这里找到许多欢乐。
{% raw %}</div>{% endraw %}
{% raw %}<div id="Documents" class="tab-content">{% endraw %}
[石墨文档](https://shimo.im/) 是全新一代云 Office 办公软件,支持多人在线协作编辑文档和表格,独有内容级安全,全过程留痕可追溯。PC 端和移动端全覆盖,随时随地远程办公。即写即存...
{% raw %}</div>{% endraw %}

<style type="text/css">
.content .tabs ul { margin: 0; }
.tab-content { display: none; }
</style>

<script>
function onTabClick (event) {
var tabTitle = $(event.currentTarget).children('span:last-child').text();
$('.article .content .tab-content').css('display', 'none');
$('.article .content .tabs li').removeClass('is-active');
$('#' + tabTitle).css('display', 'block');
$(event.currentTarget).parent().addClass('is-active');
}
</script>

彩色突出

Icarus 主题以白色的简洁为主,但有时候我们希望在文章中用特别的样式注明一些内容,markdown 语法就不够用了,所以在此分享一下我的高级玩法。

点击展开代码 >folded
1
2
3
{% raw %}<div class="notification is-info">{% endraw %}
[Icarus](https://blog.zhangruipeng.me/hexo-theme-icarus/) 主题以白色的简洁为主,但有时候我们希望在文章中用**特别的样式**注明一些内容,*markdown* 语法就不够用了,所以在此分享一下我的高级玩法。
{% raw %}</div>{% endraw %}

Icarus 主题以白色的简洁为主,但有时候我们希望在文章中用特别的样式注明一些内容,markdown 语法就不够用了,所以在此分享一下我的高级玩法。

点击展开代码 >folded
1
2
3
{% raw %}<div class="notification is-success">{% endraw %}
[Icarus](https://blog.zhangruipeng.me/hexo-theme-icarus/) 主题以白色的简洁为主,但有时候我们希望在文章中用**特别的样式**注明一些内容,*markdown* 语法就不够用了,所以在此分享一下我的高级玩法。
{% raw %}</div>{% endraw %}

Icarus 主题以白色的简洁为主,但有时候我们希望在文章中用特别的样式注明一些内容,markdown 语法就不够用了,所以在此分享一下我的高级玩法。

点击展开代码 >folded
1
2
3
{% raw %}<div class="notification is-warning">{% endraw %}
[Icarus](https://blog.zhangruipeng.me/hexo-theme-icarus/) 主题以白色的简洁为主,但有时候我们希望在文章中用**特别的样式**注明一些内容,*markdown* 语法就不够用了,所以在此分享一下我的高级玩法。
{% raw %}</div>{% endraw %}

Icarus 主题以白色的简洁为主,但有时候我们希望在文章中用特别的样式注明一些内容,markdown 语法就不够用了,所以在此分享一下我的高级玩法。

点击展开代码 >folded
1
2
3
{% raw %}<div class="notification is-danger">{% endraw %}
[Icarus](https://blog.zhangruipeng.me/hexo-theme-icarus/) 主题以白色的简洁为主,但有时候我们希望在文章中用**特别的样式**注明一些内容,*markdown* 语法就不够用了,所以在此分享一下我的高级玩法。
{% raw %}</div>{% endraw %}

Icarus 主题以白色的简洁为主,但有时候我们希望在文章中用特别的样式注明一些内容,markdown 语法就不够用了,所以在此分享一下我的高级玩法。

点击展开代码 >folded
1
2
3
{% raw %}<article class="message is-info"><div class="message-body">{% endraw %}
[Icarus](https://blog.zhangruipeng.me/hexo-theme-icarus/) 主题以白色的简洁为主,但有时候我们希望在文章中用**特别的样式**注明一些内容,*markdown* 语法就不够用了,所以在此分享一下我的高级玩法。
{% raw %}</div></article>{% endraw %}

Icarus 主题以白色的简洁为主,但有时候我们希望在文章中用特别的样式注明一些内容,markdown 语法就不够用了,所以在此分享一下我的高级玩法。

点击展开代码 >folded
1
2
3
{% raw %}<article class="message is-success"><div class="message-body">{% endraw %}
[Icarus](https://blog.zhangruipeng.me/hexo-theme-icarus/) 主题以白色的简洁为主,但有时候我们希望在文章中用**特别的样式**注明一些内容,*markdown* 语法就不够用了,所以在此分享一下我的高级玩法。
{% raw %}</div></article>{% endraw %}

Icarus 主题以白色的简洁为主,但有时候我们希望在文章中用特别的样式注明一些内容,markdown 语法就不够用了,所以在此分享一下我的高级玩法。

点击展开代码 >folded
1
2
3
{% raw %}<article class="message is-warning"><div class="message-body">{% endraw %}
[Icarus](https://blog.zhangruipeng.me/hexo-theme-icarus/) 主题以白色的简洁为主,但有时候我们希望在文章中用**特别的样式**注明一些内容,*markdown* 语法就不够用了,所以在此分享一下我的高级玩法。
{% raw %}</div></article>{% endraw %}

Icarus 主题以白色的简洁为主,但有时候我们希望在文章中用特别的样式注明一些内容,markdown 语法就不够用了,所以在此分享一下我的高级玩法。

点击展开代码 >folded
1
2
3
{% raw %}<article class="message is-danger"><div class="message-body">{% endraw %}
[Icarus](https://blog.zhangruipeng.me/hexo-theme-icarus/) 主题以白色的简洁为主,但有时候我们希望在文章中用**特别的样式**注明一些内容,*markdown* 语法就不够用了,所以在此分享一下我的高级玩法。
{% raw %}</div></article>{% endraw %}

活用 Bulma 美化 Icarus 文章

Icarus 主题以白色的简洁为主,但有时候我们希望在文章中用特别的样式注明一些内容,markdown 语法就不够用了,所以在此分享一下我的高级玩法。

点击展开代码 >folded
1
2
3
4
5
{% raw %}<article class="message is-info"><div class="message-header">{% endraw %}
活用 Bulma 美化 Icarus 文章
{% raw %}</div><div class="message-body">{% endraw %}
[Icarus](https://blog.zhangruipeng.me/hexo-theme-icarus/) 主题以白色的简洁为主,但有时候我们希望在文章中用**特别的样式**注明一些内容,*markdown* 语法就不够用了,所以在此分享一下我的高级玩法。
{% raw %}</div></article>{% endraw %}

点击展开代码

点击展开代码 >folded
1
console.log('I love Icarus!');

你知道的太多了

iMaeGoo 出自独立游戏 World of Goo 里小粘球的叫声,读作 /ɪ’mæɡu/ 不是爱妹狗啊,在家里电脑还是个大头(CRT)的时候就在玩了,其实头像也是在当时设定的,一直沿用至今。找不到女朋友誓不改头像

点击展开代码 >folded
1
2
3
4
5
6
7
{% raw %}
<style type="text/css">
.heimu { color: #000; background-color: #000; }
.heimu:hover { color: #fff; }
</style>
{% endraw %}
**iMaeGoo** 出自独立游戏 [World of Goo](https://store.steampowered.com/app/22000/) 里小粘球的叫声,读作 /ɪ'mæɡu/ {% raw %}<span class="heimu">不是爱妹狗啊</span>{% endraw %},在家里电脑还是个大头(CRT)的时候就在玩了,其实头像也是在当时设定的,一直沿用至今。{% raw %}<span class="heimu">找不到女朋友誓不改头像</span>{% endraw %}

封面图来源声明

   Vector Landscape Vectors by Vecteezy
点击展开代码 >folded
1
2
3
4
<a class="tag is-dark is-medium" href="https://www.vecteezy.com/free-vector/vector-landscape" target="_blank">
<span class="icon"><i class="fas fa-camera"></i></span>&nbsp;&nbsp;
Vector Landscape Vectors by Vecteezy
</a>

** 转载 **
https://www.imaegoo.com/2020/icarus-with-bulma/

作者

auroot

发布于

2021-08-19

更新于

2021-08-20

许可协议