时光荏苒，珍惜当下

hexo博客：写作技巧

发表于 更新于 分类于 ， Valine：

主要参考 Hexo 搭建个人博客系列：写作技巧篇

常用技巧

  • 阅读更多： <!-- more-->
  • 空格： 1个空格字符&nbsp;   1个中文宽度&emsp;
  • 换 行： </br>
  • 插入图片： <img src=" " width="600" hegiht="400" >
  • 居中： <center> </center>

文本居中标签

参考 内置标签 文本居中的引用

文本居中标签有以下三种写法：

1
2
3
4
5
6
7
8
9
<!-- HTML方式: 直接在 Markdown 文件中编写 HTML 来调用 -->
<!-- 其中 class="blockquote-center" 是必须的 -->
<blockquote class="blockquote-center">时光荏苒，珍惜当下</blockquote>

<!-- 标签方式 -->
{% centerquote %}时光荏苒，珍惜当下{% endcenterquote %}

<!-- 标签别名 -->
{% cq %}时光荏苒，珍惜当下{% endcq %}

举例：

<blockquote class="blockquote-center">时光荏苒，珍惜当下</blockquote>

效果：

时光荏苒，珍惜当下

代码块

书写方式：

// ``` [language] [title] [url] [link text]
// code snippet
// ```

其中，各参数意义如下：

  • langugae：语言名称，引导渲染引擎正确解析并高亮显示关键字
  • title：代码块标题，将会显示在左上角
  • url：链接地址，如果没有指定 link text 则会在右上角显示 link
  • link text：链接名称，指定 url 后有效，将会显示在右上角

如果不想填写 title，可以在 language 和 url 之间添加至少三个空格。

note 标签

修改主题配置文件

  • 打开主题配置文件config.yml, 修改 note 标签 。
config.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
# note 标签
# Note tag (bs-callout)
note:
  # Note tag style values:
  #  - simple    bs-callout old alert style. Default.
  #  - modern    bs-callout new (v2-v3) alert style.
  #  - flat      flat callout style with background, like on Mozilla or StackOverflow.
  #  - disabled  disable all CSS styles import of note tag.
  style: flat
  icons: true
  border_radius: 3
  # Offset lighter of background in % for modern and flat styles (modern: -12 | 12; flat: -18 | 6).
  # Offset also applied to label tag variables. This option can work with disabled note tag.
  light_bg_offset: 20%  # 默认背景减淡效果，以百分比计算

效果展示

通过 note 标签可以为段落添加背景色，语法如下：

1
2
3
{% note [class] %}
文本内容 (支持行内标签)
{% endnote %}

支持的 class 种类包括 default primary success info warning danger，也可以不指定 class。

举例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
{% note default %}
路是自己走出来的；机会是自己创造出来的。人不能创造时机，但是它可以抓住那些已经出现的时机。累了，才放慢脚步。错了，才想到最后。苦了，才知道满足。伤了，才明白坚强。
{% endnote %}

{% note primary %}
尝试后可能会放弃，但千万不能放弃尝试。
{% endnote %}

{% note success %}
每天给自己一个希望，试着不为明天而烦恼，不为昨天而叹息，只为今天更美好！人生没有对错，只有选择后的坚持，不后悔，走下去，就是对的。走着走着，花就开了。
{% endnote %}

{% note info %}
如果把我们能做到的都做了，最终连我们自己都会被吓到。
{% endnote %}

{% note warning %}
 今日的事情，尽心、尽意、尽力去做了，无论成绩如何，都应该高高兴兴地上床恬睡。
{% endnote %}

{% note danger %}
生活其实很简单，过了今天就是明天。
{% endnote %}

效果：（按顺序，加上小图标）

路是自己走出来的；机会是自己创造出来的。人不能创造时机，但是它可以抓住那些已经出现的时机。累了，才放慢脚步。错了，才想到最后。苦了，才知道满足。伤了，才明白坚强。

尝试后可能会放弃，但千万不能放弃尝试。

每天给自己一个希望，试着不为明天而烦恼，不为昨天而叹息，只为今天更美好！人生没有对错，只有选择后的坚持，不后悔，走下去，就是对的。走着走着，花就开了。

如果把我们能做到的都做了，最终连我们自己都会被吓到。

今日的事情，尽心、尽意、尽力去做了，无论成绩如何，都应该高高兴兴地上床恬睡。

生活其实很简单，过了今天就是明天。

button 按钮

通过 button 标签可以快速添加带有主题样式的按钮，语法如下：

1
2
3
{% button /path/to/url/, text, icon [class], title %}
也可简写为：
{% btn /path/to/url/, text, icon [class], title %}

举例：

{% btn #, 文本 %}
{% btn #, 文本 & 标题, 标题 %}
{% btn #, 文本 & 图标, home %}
{% btn #, 文本 & 大图标 (固定宽度), home fa-fw fa-lg %}

效果：

文本 文本 & 标题 文本 & 图标 文本 & 大图标 (固定宽度)

tab 标签

tab 标签用于快速创建 tab 选项卡，语法如下：

1
2
3
4
5
{% tabs [Unique name], [index] %}
  <!-- tab [Tab caption]@[icon] -->
  标签页内容（支持行内标签）
  <!-- endtab -->
{% endtabs %}

其中，各参数意义如下：

  • Unique name: 全局唯一的 Tab 名称，将作为各个标签页的 id 属性前缀
  • index: 当前激活的标签页索引，如果未定义则默认选中显示第一个标签页，如果设为 - 1 则默认隐藏所有标签页
  • Tab caption: 当前标签页的标题，如果不指定则会以 Unique name 加上索引作为标题
  • icon: 在标签页标题中添加 Font awesome 图标

举例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{% tabs Tab标签列表 %}
  <!-- tab 王祖贤1 -->
    标签页1文本内容
	<img src="https://hexo-1257031621.cos.ap-chengdu.myqcloud.com/%E5%8D%9A%E5%AE%A2%E9%85%8D%E5%9B%BE/hexo%20blog%20%E5%86%99%E4%BD%9C%E6%8A%80%E5%B7%A7/1.jpg" width="600" hegiht="400" >
  <!-- endtab -->
  <!-- tab 王祖贤2 -->
    标签页2文本内容
	<img src="https://hexo-1257031621.cos.ap-chengdu.myqcloud.com/%E5%8D%9A%E5%AE%A2%E9%85%8D%E5%9B%BE/hexo%20blog%20%E5%86%99%E4%BD%9C%E6%8A%80%E5%B7%A7/2.jpg" width="600" hegiht="400" >
  <!-- endtab -->
  <!-- tab 王祖贤3 -->
    标签页3文本内容
	<img src="https://hexo-1257031621.cos.ap-chengdu.myqcloud.com/%E5%8D%9A%E5%AE%A2%E9%85%8D%E5%9B%BE/hexo%20blog%20%E5%86%99%E4%BD%9C%E6%8A%80%E5%B7%A7/3.jpg" width="600" hegiht="400" >
  <!-- endtab -->
  <!-- tab 王祖贤4 -->
    标签页4文本内容
	<img src="https://hexo-1257031621.cos.ap-chengdu.myqcloud.com/%E5%8D%9A%E5%AE%A2%E9%85%8D%E5%9B%BE/hexo%20blog%20%E5%86%99%E4%BD%9C%E6%8A%80%E5%B7%A7/4.jpg" width="600" hegiht="400" >
  <!-- endtab -->
{% endtabs %}

效果：

标签页1文本内容

标签页2文本内容

标签页3文本内容

标签页4文本内容

完
+