上次更新：2019-06-23 01:35:28, Sun

目录

  1. 自定义字体
  2. 标题以上的内容
  3. 可以放大的图片
  4. 横向铺满的图片
  5. 提示或警告
  6. 代码块
  7. 引用
  8. 行内颜色
  9. Youtube 标签

Hexo 博客的 Tranquilpeak 主题 非常的赞，有非常多不错的功能可以让博客更漂亮，内容更丰富。

自定义字体

https://github.com/LouisBarranqueiro/hexo-theme-tranquilpeak/issues/194
博主的 node.js 版本是 10.15.3，当修改完毕后，需要执行grunt buildProd 才可以生效

标题以上的内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
disqusIdentifier: fdsF34ff34
keywords:
- javascript
- hexo
clearReading: true
thumbnailImage: https://y.gtimg.cn/music/photo_new/T001R300x300M0000025NhlN2yWrP4.jpg?max_age=2592000
thumbnailImagePosition: bottom
autoThumbnailImage: yes
metaAlignment: center
coverImage: image-2.png
coverCaption: "A beautiful sunrise"
coverMeta: out
coverSize: full
coverImage: image-2.png
gallery:
    - image-3.jpg "New York"
    - image-4.png "Paris"
    - http://i.imgur.com/o9r19kD.jpg "Dubai"
    - https://example.com/orignal.jpg https://example.com/thumbnail.jpg "Sidney"
comments: false

可以放大的图片

1
{% image fancybox group:v http://ww1.sinaimg.cn/large/6a011e49gw1f67fm00645j21j80iin0b.jpg 100% 100% %}
魔兽世界哟魔兽世界哟

横向铺满的图片

1
{% wide_image https://ws1.sinaimg.cn/large/6a011e49ly1g4afcdg42qj20xc0ir0ye.jpg "魔兽世界哟" %}
魔兽世界哟魔兽世界哟

提示或警告

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{% alert danger %}
 这里 danger，标签中间可以输入内容
{% endalert %}

{% alert info %}
 这是 info，标签中间可以输入内容
{% endalert %}

{% alert success no-icon %}
 这是 success，标签中间可以输入内容
{% endalert %}

{% alert no-icon %}
 这是 no-icon，标签中间可以输入内容
{% endalert %}

{% alert warning %}
 这是 warning，标签中间可以输入内容
{% endalert %}

这里 danger，标签中间可以输入内容。可以在 danger 后加入 no-icon，就显示下面这样

这里是 danger 的 no-icon 样式

这是 info，标签中间可以输入内容

这是 success，标签中间可以输入内容

这是 no-icon，标签中间可以输入内容

这是 warning，标签中间可以输入内容

代码块

1.JavaScript 和 CSS 的切换代码示例：

1
2
3
4
5
6
7
8
9
10
{% tabbed_codeblock 示例代码 http://example.com %}
      <!-- tab js -->
          var test = 'test';
      <!-- endtab -->
      <!-- tab css -->
          .btn {
              color: red;
          }
      <!-- endtab -->
{% endtabbed_codeblock %}

示例代码
  • js
  • css
1
var test = 'test';

2.Objective-C 代码块示范：

1
2
3
4
5
6
{% tabbed_codeblock  %}
<!-- tab objc -->
      代码块

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

Objective-C示例代码
  • objc
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//
//  main.m
//  01_HelloWorld
//
//  Created by apple on 14-11-8.
//  Copyright (c) 2014年 cc. All rights reserved.
//

#import <Foundation/Foundation.h>

int main(int argc, const char * argv[]) {
    @autoreleasepool {
        printf("Hello, World!\n");
        NSLog(@"Hello, World!");
    }
    return 0;
}

3.Java 代码块示范：

1
2
3
4
5
{% tabbed_codeblock Java示例代码 %}
<!-- tab java -->
  your code
<!-- endtab -->
{% endtabbed_codeblock %}

Java示例代码
  • java
1
2
3
4
5
6
7
8
/* HelloWorld.java
 */

public class HelloWorld {
  public static void main(String[] args) {
    System.out.println("Hello World!");
  }
}

引用

1
2
3
4
5
6
7
{% blockquote @纳格兰 https://hilen.github.io %}
NEW: DevDocs now comes with syntax highlighting. http://devdocs.io
{% endblockquote %}

{% blockquote %}
这是一段引用的文字
{% endblockquote %}

NEW: DevDocs now comes with syntax highlighting. http://devdocs.io

这是一段引用的文字

行内颜色

1
2
<p>这是一段文字，使用主题提供的{% hl_text #00FFFF %}特殊标签可以改变颜色 {%
  endhl_text %}，请开始 {% hl_text red %}使用把！{% endhl_text %}</p>

这是一段文字，使用主题提供的特殊标签可以改变颜色 ，请开始 使用把！

Sed imperdiet urna et quam ultrices your highlighted text dignissim ultrices libero.

Youtube 标签

Reference：

Enjoy 😆