博客写作时一些格式的用法

安装了一些稀奇古怪的插件,在这里记录一下用法免得自己忘了x


插件

Steam游戏标签

可以在文章中插入steam游戏标签
用法:

1
{% steamgame 1057090 %}  //就拿Ori举例了,数字是steam id

也可以自己写标签中的简介:

1
{% steamgame 1057090 "这游戏我至今没能通关,就一直在一直在迷路和死。" %}

还可以连续插入不止一个游戏:

1
2
3
4
{% steamgames %}
271590
1057090
{% endsteamgames %}

Spoiler:隐藏文字

1
{% spoiler 这是一条被隐去的信息 %}  <br>
这是一条被隐去的信息
1
{% spoiler style:box 然后这个形式的隐去也蛮有意思的 %}
然后这个形式的隐去也蛮有意思的

上标/参考文献?

格式如图(因为插件的bug,没法直接放进代码框里)

1. 这是第一条消息^1
2. 在这里放一个参考^2
3. 参考内容也可以有换行^3
4. 也可以在参考里加上md语法(可惜悬浮窗口里不会渲染)[^4]


插件其实就这俩,但是hexo自带的一些格式也蛮好玩的,这里顺带着记录一下吧。


Hexo格式

引用框

可以用来引用一些名人名言(?)

1
2
3
{% blockquote [作者[, 来源]] [链接] [链接的名称] %}
内容
{% endblockquote %}

下面举些例子:

  1. 只有内容的一句引用
1
2
3
{% blockquote %}
多米诺好强啊!
{% endblockquote %}

多米诺好强啊!

  1. 从一本书中引用
1
2
3
{% blockquote 多米诺, 多米诺讲故事 %}
多米诺好强啊!
{% endblockquote %}

多米诺好强啊!

多米诺多米诺讲故事
  1. 进行一个微博的引用
1
2
3
{% blockquote @每日经济新闻 https://weibo.com/1649173367/L6SI85MSZ %}
根据相关法律法规,年假可以跨1个年度安排,今年年假可以安排到明年休;确因工作需要不能安排职工休年假的,单位应在征得职工本人同意后,根据职工应休未休假天数,按照该职工日工资收入的300%支付报酬
{% endblockquote %}

根据相关法律法规,年假可以跨1个年度安排,今年年假可以安排到明年休;确因工作需要不能安排职工休年假的,单位应在征得职工本人同意后,根据职工应休未休假天数,按照该职工日工资收入的300%支付报酬

代码框

这个就,代码框,蛮多地方用得上的。

1
2
3
{% codeblock [标题] [lang:语言] [链接] [链接显示的文字] [附加参数] %}
这里是代码的内容
{% endcodeblock %}
附加参数 描述 默认值
line_number 显示行号 true
highlight 启用代码高亮 true
first_line 自定义首行的行号 1
mark 把特定的几行高亮,每个值之间用半角逗号,分割,范围用短横线-链接。比如: mark:1,4-7,10 就会高亮第1行,4到7行和第10行。
wrap 把代码块用 ``包裹(这个我没搞太懂) true

下面举些例子:

  1. 只有内容的代码块
只有内容的代码块
1
2
3
{% codeblock %}
alert('Hello World!');
{% endcodeblock %}

显示就是这样:

1
alert('Hello World!');
  1. 定义高亮的语言
定义高亮的语言
1
2
3
{% codeblock lang:objc %}
[rectangle setX: 10 y: 10 width: 20 height: 20];
{% endcodeblock %}

显示是这样(这个是抄Hexo官网文档的代码,其实我不懂objc是什么语言……)

1
[rectangle setX: 10 y: 10 width: 20 height: 20];
  1. 给代码块加个标题
加个标题
1
2
3
{% codeblock Array.map %}
array.map(callback[, thisArg])
{% endcodeblock %}
Array.map
1
array.map(callback[, thisArg])
  1. 给代码块加一个带链接的标题
加个带链接的标题
1
2
3
4
{% codeblock _.compact http://underscorejs.org/#compact Underscore.js %}
_.compact([0, 1, false, 2, '', 3]);
=> [1, 2, 3]
{% endcodeblock %}
_.compactUnderscore.js
1
2
_.compact([0, 1, false, 2, '', 3]);
=> [1, 2, 3]
  1. 代码块的另一种写法
另一种写法
1
``` [语言] [标题] [链接] [关联文字] 代码内容 ```

比如这样

1
2
```markdown 今天吃啥 https://blog.dominoh.com 多米诺好强啊
**多米诺好饿啊**```

最后会显示这样:

今天吃啥多米诺好强啊
1
**多米诺好饿啊**

站内文章链接

最后再搬一个站内文章链接

站内文章引用
1
{% post_link 这里填文章的文件名,不需要后缀 %}

比如说

1
{% post_link 传统艺能 %}

效果就是:

传统艺能

剩下的不想搬了,感觉用不太到,有兴趣的可以去Hexo的文档看看。


icarus主题使用技巧

icarus主题由于用到了Bulma,所以有一些有趣的格式,这里记录几个可能用得上的:

按钮

按钮
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>

然后还可以给按钮增加点击触发的功能

点击按钮显示一言
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>

↑↑↑ 试着点击“显示一言”!

进度条

进度条
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>





黑块(又一个黑块)

黑块
1
2
3
4
5
<style type="text/css">
.heimu { color: #000; background-color: #000; }
.heimu:hover { color: #fff; }
</style>
多米诺好强啊{% raw %}<span class="heimu">屁嘞!</span>{% endraw %}

多米诺好强啊屁嘞!

封面图来源声明(其实可以算在按钮那一类里)

   Vector Landscape Vectors by Vecteezy
封面图来源声明
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>

这样
换好几行

[^4]: 比如可以 插一个链接

博客写作时一些格式的用法

https://blog.dominoh.com/d778da6b.html

作者

多米诺

发布于

2021-12-20

更新于

2023-11-13

许可协议

评论