0%

test

Posted on Edited on In ,
Symbols count in article: 8.7k Reading time ≈ 8 mins.

1. Introduction

This is a test file!

1
2
import os
print('This is a test file')

2. Color block

Note：如下的样式需要在主题的 css 文件夹中（./themes/next/source/css/_custom/custom.styl）中添加配置内容。

Yellow block

Blue block

Green block

Purple block

用法

1
2
3
4
5
6
7
<span id="inline-yellow">Yellow block</span>

<span id="inline-blue">Blue block</span>

<span id="inline-green">Green block</span>

<span id="inline-purple">Purple block</span>
  • 左侧（无边框）

左侧蓝色块 

1
<p id="div-left-blue">左侧蓝色块</p>
  • 左侧带边框色块

左侧边框红色块级

左侧边框黄色块级

左侧边框绿色块级

左侧边框蓝色块级

左侧边框紫色块级

用法：

1
2
3
4
5
<p id="div-border-left-red">左侧边框红色块级</p>
<p id="div-border-left-yellow">左侧边框黄色块级</p>
<p id="div-border-left-green">左侧边框绿色块级</p>
<p id="div-border-left-blue">左侧边框蓝色块级</p>
<p id="div-border-left-purple">左侧边框紫色块级</p>
  • 右侧

右侧边框红色块级

右侧边框黄色块级

右侧边框绿色块级

右侧边框蓝色块级

右侧边框紫色块级

用法：

1
2
3
4
5
<p id="div-border-right-red">右侧边框红色块级</p>
<p id="div-border-right-yellow">右侧边框黄色块级</p>
<p id="div-border-right-green">右侧边框绿色块级</p>
<p id="div-border-right-blue">右侧边框蓝色块级</p>
<p id="div-border-right-purple">右侧边框紫色块级</p>
  • 上侧

上侧边框红色块级

上侧边框黄色块级

上侧边框绿色块级

上侧边框蓝色块级

上侧边框紫色块级

用法：

1
2
3
4
5
<p id="div-border-top-red">上侧边框红色块级</p>
<p id="div-border-top-yellow">上侧边框黄色块级</p>
<p id="div-border-top-green">上侧边框绿色块级</p>
<p id="div-border-top-blue">上侧边框蓝色块级</p>
<p id="div-border-top-purple">上侧边框紫色块级</p>

3. Callouts

3.1 Next-based callouts

hexo中可以插入的提示块 Callout，效果如下：

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

用法：

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 %}
default 提示块标签
{% endnote %}

{% note primary %}
primary 提示块标签
{% endnote %}

{% note success %}
success 提示块标签
{% endnote %}

{% note info %}
info 提示块标签
{% endnote %}

{% note warning %}
warning 提示块标签
{% endnote %}

{% note danger %}
danger 提示块标签
{% endnote %}

3.2 Next-based Tag Plugins

hexo中可以插入的提示块 Callout，内容来自 hexo 官方文档：Link

3.2.1 Black Quote

语法如下：

1
2
3
{% blockquote [author[, source]] [link] [source_link_title] %}
content
{% endblockquote %}

  • No arguments. Plain blockquote：

    Lorem ipsum dolor sit amet.

    1
    2
    3
    {% blockquote %}
    Lorem ipsum dolor sit amet.
    {% endblockquote %}

  • Quote from a book：

    Do not just seek happiness for yourself. Seek happiness for all. Through kindness. Through mercy.

    David LevithanWide Awake

    1
    2
    3
    {% blockquote David Levithan, Wide Awake %}
    Do not just seek happiness for yourself. Seek happiness for all. Through kindness. Through mercy.
    {% endblockquote %}

  • Quote from Twitter：

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

    1
    2
    3
    {% blockquote @DevDocs https://twitter.com/devdocs/status/356095192085962752 %}
    NEW: DevDocs now comes with syntax highlighting. http://devdocs.io
    {% endblockquote %}

  • Quote from an article on the web：

    Every interaction is both precious and an opportunity to delight.

    1
    2
    3
    {% blockquote Seth Godin http://sethgodin.typepad.com/seths_blog/2009/07/welcome-to-island-marketing.html Welcome to Island Marketing %}
    Every interaction is both precious and an opportunity to delight.
    {% endblockquote %}

3.2.2 Code Block

语法如下：

1
2
3
{% codeblock [title] [lang:language] [url] [link text] [additional options] %}
code snippet
{% endcodeblock %}

Specify additional options in option:value format, e.g. line_number:false first_line:5.

Extra Options Description Default
line_number Show line number true
line_threshold Only show line numbers as long as the numbers of lines of the code block exceed such threshold. 0
highlight Enable code highlighting true
first_line Specify the first line number 1
mark Line highlight specific line(s), each value separated by a comma. Specify number range using a dash Example: mark:1,4-7,10 will mark line 1, 4 to 7 and 10.
wrap Wrap the code block in [`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table) |true`

  • A plain code block：

    1
    alert('Hello World!');
    1
    2
    3
    {% codeblock %}
    alert('Hello World!');
    {% endcodeblock %}

  • Specifying the language：

    1
    [rectangle setX: 10 y: 10 width: 20 height: 20];

    1
    2
    3
    {% codeblock lang:objc %}
    [rectangle setX: 10 y: 10 width: 20 height: 20];
    {% endcodeblock %}

  • Adding a caption to the code block

    Array.map
    1
    array.map(callback[, thisArg])

    1
    2
    3
    {% codeblock Array.map %}
    array.map(callback[, thisArg])
    {% endcodeblock %}

  • Adding a caption and a URL：

    _.compactUnderscore.js
    1
    2
    _.compact([0, 1, false, 2, '', 3]);
    => [1, 2, 3]

    1
    2
    3
    4
    {% codeblock _.compact http://underscorejs.org/#compact Underscore.js %}
    _.compact([0, 1, false, 2, '', 3]);
    => [1, 2, 3]
    {% endcodeblock %}

3.2.3 Other types

  • Pull Quote：

    content

    1
    2
    3
    {% pullquote [class] %}
    content
    {% endpullquote %}

  • Gist：

    1
    {% gist gist_id [filename] %}

  • iframe：

    1
    {% iframe //player.bilibili.com/player.html?aid=289532467&bvid=BV1if4y147hS&cid=330208219&page=1&autoplay=0 [width] [height] %}

  • Include Code：

    Inserts code snippets in source/downloads/code folder. The folder location can be specified through the code_dir option in the config.

    1
    {% include_code [title] [lang:language] [from:line] [to:line] path/to/file %}

    • Examples

      Embed the whole content of test.js

      1
      {% include_code lang:javascript test.js %}

      Embed line 3 only

      1
      {% include_code lang:javascript from:3 to:3 test.js %}

      Embed line 5 to 8

      1
      {% include_code lang:javascript from:5 to:8 test.js %}

      Embed line 5 to the end of file

      1
      {% include_code lang:javascript from:5 test.js %}

      Embed line 1 to 8

      1
      {% include_code lang:javascript to:8 test.js %}

  • YouTube

    Inserts a YouTube video.

    1
    {% youtube video_id [type] [cookie] %}

    • Examples

      Embed a video

      1
      {% youtube lJIrF4YjHfQ %}

      Embed a playlist

      1
      {% youtube PL9hW1uS6HUfscJ9DHkOSoOX45MjXduUxo 'playlist' %}

      Enable privacy-enhanced mode

      YouTube’s cookie is not used in this mode.

      1
      2
      {% youtube lJIrF4YjHfQ false %}
      {% youtube PL9hW1uS6HUfscJ9DHkOSoOX45MjXduUxo 'playlist' false %}

  • Include Posts

    Include links to other posts.

    Post not found: filename [title] [escape] 
    1
    2
    {% post_path filename %}
    {% post_link filename [title] [escape] %}

    You can ignore permalink and folder information, like languages and dates, when using this tag.

    For instance: {% post_link how-to-bake-a-cake %}.

    This will work as long as the filename of the post is how-to-bake-a-cake.md, even if the post is located at source/posts/2015-02-my-family-holiday and has permalink 2018/en/how-to-bake-a-cake.

    You can customize the text to display, instead of displaying the post’s title.

    Post’s title and custom text are escaped by default. You can use the escape option to disable escaping.

    For instance:

    Display title of the post.

    1
    {% post_link Python-Figuration %}
    Post not found: Python-Figuration

    Display custom text.

    1
    {% post_link Python-Figuration 'Python Configuration' %}
    Post not found: Python-Figuration Python Configuration

    Escape title. （转义标题）

    1
    {% post_link Python-Figuration 'Python <b> Configuration' %}
    Post not found: Python-Figuration Python Configuration

    Do not escape title.

    1
    {% post_link Python-Figuration '<b>Python</b> Configuration' false %}
    Post not found: Python-Figuration Python Configuration false

3.3 Custome css style

Note：如下的样式需要在主题的 css 文件夹中（./themes/next/source/css/_custom/custom.styl）中添加配置内容。

Lorem ipsum default style

Lorem ipsum primary style

Lorem ipsum success style

Lorem ipsum danger style

Lorem ipsum warning style

Lorem ipsum info style

Lorem ipsum code style

Lorem ipsum style

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
<div style="callout:default">
 Lorem ipsum default style
</div>

<div style="callout:primary">
 Lorem ipsum primary style
</div>

<div style="callout:success">
 Lorem ipsum success style
</div>

<div style="callout:danger">
 Lorem ipsum danger style
</div>

<div style="callout:warning">
 Lorem ipsum warning style
</div>

<div style="callout:info">
 Lorem ipsum info style
</div>

<div style="callout:code">
 Lorem ipsum code style
</div>

<div style="callout:">
 Lorem ipsum style
</div>

3.3 选项卡

选项卡 1

选项卡 2

选项卡 3 名字为A

用法：

1
2
3
4
5
6
7
8
9
10
11
{% tabs tab,1 %} 名字为tab，默认在第1个选项卡，如果是-1则隐藏
<!-- tab -->
**选项卡 1** 
<!-- endtab -->
<!-- tab -->
**选项卡 2**
<!-- endtab -->
<!-- tab A -->
**选项卡 3** 名字为A
<!-- endtab -->
{% endtabs %}

参考→ 打造个性超赞博客Hexo+NexT+GithubPages的超深度优化 Hexo+markdown优雅写博客

4. Download style

Download Now

用法：

1
<a id="download" href="https://www.yangsuoly.com" target="_blank"><i class="fa fa-download"></i><span> Download Now </span> </a>
-------------This blog is over! Thanks for your reading-------------