Basic Usage of Hexo
Posted Updated Documentation / Webblog / Hexo9 minutes read (About 1340 words)   visits

Basic Usage of Hexo

Basic Writing Syntax

To create a new post or new page, run the following command:

click to expand the code >folded
1
$ hexo new [layout] <title>

Markdown

Configuration Options Default Description
title Markdown document title
date date when the file is created
author same as the author in _config.yml Blogger
img value in featureunages Article feature map: http://xxx.com/xxx.jpg
top true Recommended articles (whether the article is pinned to the top)
password n.a. the password need to read the article
toc true Whether to enable TOC, you can turn off the TOC function individually for a certain article. The premise is that the toc option is activated in the theme’s config.yml
summary n.a. Article summary, customized article summary content. If this attribute has a value, the article card summary will display this text. Otherwise, the program will automatically intercept part of the article as a summary.
mathjax true Whether to enable mathematical formula support, this article whether to enable mathjax, and it needs to be enabled in the theme’s _config.ymlfile.
categories
tags
keywords
reprintPolicy Cc_by cc_by, cc_by_nd, cc_by_sa, cc_by_nc, cc_by_nc_nd, cc_by_nc_sa, cc0, noreprint or pay
wrap [Optional] Configure whether code blocks are expanded (true/false) (default is the setting of highlight_shrink)

Advcaned Writing Syntax

Use Bulma to Beautificate the Icarus Articles[1]

Buttons

Click to expand >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>

Click to expand the code

click to expand the code >folded
1
2
3
4
5
```rust click to expand the code >folde`
fn main() { 
	println!("{}", "These are three lines");
}
```

Progress Bar





click to expand the code >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>

Tabs

Pixabay is a globally renowned stock image website and a vibrant creative community, offering millions of free high-definition, legitimate photos covering various categories, including landscapes, people, dynamic shots, still life, and more. You can use Pixabay’s materials anywhere you like.

网易云音乐 is a music product that focuses on discovery and sharing. Leveraging professional musicians, DJs, friend recommendations, and social features, it aims to create a whole new music lifestyle for users.

哔哩哔哩 is a well-known domestic video barrage website that offers the latest anime releases, an excellent ACG (Anime, Comic, Game) atmosphere, and creative content creators. Here, everyone can find a lot of joy.

石墨文档 is a next-generation cloud office software that supports real-time collaboration for document and spreadsheet editing. It features unique content-level security and full-process traceability. It is available on both PC and mobile devices, allowing for remote work from anywhere. You can save your work instantly as you go.

click to expand the code >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
<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 is a globally renowned stock image website and a vibrant creative community, offering millions of free high-definition, legitimate photos covering various categories, including landscapes, people, dynamic shots, still life, and more. You can use Pixabay's materials anywhere you like.
{% raw %}</div>{% endraw %}
{% raw %}<div id="Music" class="tab-content">{% endraw %}
[网易云音乐](https://music.163.com/) is a music product that focuses on discovery and sharing. Leveraging professional musicians, DJs, friend recommendations, and social features, it aims to create a whole new music lifestyle for users.
{% raw %}</div>{% endraw %}
{% raw %}<div id="Videos" class="tab-content">{% endraw %}
[哔哩哔哩](https://www.bilibili.com/) is a well-known domestic video barrage website that offers the latest anime releases, an excellent ACG (Anime, Comic, Game) atmosphere, and creative content creators. Here, everyone can find a lot of joy.
{% raw %}</div>{% endraw %}
{% raw %}<div id="Documents" class="tab-content">{% endraw %}
[石墨文档](https://shimo.im/) is a next-generation cloud office software that supports real-time collaboration for document and spreadsheet editing. It features unique content-level security and full-process traceability. It is available on both PC and mobile devices, allowing for remote work from anywhere. You can save your work instantly as you go.
{% 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>

Highlight with Colour

  • Beautiful is better than ugly.
  • Explicit is better than implicit.
  • Simple is better than complex.
click to expand the code >folded
1
2
3
4
5
6
7
{% raw %}<div class="notification is-info">{% endraw %}

- Beautiful is better than ugly.
- Explicit is better than implicit.
- Simple is better than complex.

{% raw %}</div>{% endraw %}
  • Beautiful is better than ugly.
  • Explicit is better than implicit.
  • Simple is better than complex.
click to expand the code >folded
1
2
3
4
5
6
7
{% raw %}<div class="notification is-success">{% endraw %}

- Beautiful is better than ugly.
- Explicit is better than implicit.
- Simple is better than complex.

{% raw %}</div>{% endraw %}
  • Beautiful is better than ugly.
  • Explicit is better than implicit.
  • Simple is better than complex.
click to expand the code >folded
1
2
3
4
5
6
7
{% raw %}<div class="notification is-warning">{% endraw %}

- Beautiful is better than ugly.
- Explicit is better than implicit.
- Simple is better than complex.

{% raw %}</div>{% endraw %}
  • Beautiful is better than ugly.
  • Explicit is better than implicit.
  • Simple is better than complex.
click to expand the code >folded
1
2
3
4
5
6
7
{% raw %}<div class="notification is-danger">{% endraw %}

- Beautiful is better than ugly.
- Explicit is better than implicit.
- Simple is better than complex.

{% raw %}</div>{% endraw %}
  • Beautiful is better than ugly.
  • Explicit is better than implicit.
  • Simple is better than complex.
click to expand the code >folded
1
2
3
4
5
6
7
{% raw %}<article class="message is-info"><div class="message-body">{% endraw %}

- Beautiful is better than ugly.
- Explicit is better than implicit.
- Simple is better than complex.

{% raw %}</div></article>{% endraw %}
  • Beautiful is better than ugly.
  • Explicit is better than implicit.
  • Simple is better than complex.
click to expand the code >folded
1
2
3
4
5
6
7
{% raw %}<article class="message is-success"><div class="message-body">{% endraw %}

- Beautiful is better than ugly.
- Explicit is better than implicit.
- Simple is better than complex.

{% raw %}</div></article>{% endraw %}
  • Beautiful is better than ugly.
  • Explicit is better than implicit.
  • Simple is better than complex.
click to expand the code >folded
1
2
3
4
5
6
7
{% raw %}<article class="message is-warning"><div class="message-body">{% endraw %}

- Beautiful is better than ugly.
- Explicit is better than implicit.
- Simple is better than complex.

{% raw %}</div></article>{% endraw %}
  • Beautiful is better than ugly.
  • Explicit is better than implicit.
  • Simple is better than complex.
click to expand the code >folded
1
2
3
4
5
6
7
{% raw %}<article class="message is-danger"><div class="message-body">{% endraw %}

- Beautiful is better than ugly.
- Explicit is better than implicit.
- Simple is better than complex.

{% raw %}</div></article>{% endraw %}

Zen pf Python

  • Beautiful is better than ugly.
  • Explicit is better than implicit.
  • Simple is better than complex.
click to expand the code >folded
1
2
3
4
5
6
7
8
9
10
11
{% raw %}<article class="message is-info"><div class="message-header">{% endraw %}

Zen pf Python

{% raw %}</div><div class="message-body">{% endraw %}

- Beautiful is better than ugly.
- Explicit is better than implicit.
- Simple is better than complex.

{% raw %}</div></article>{% endraw %}

Cover image source statement

   Vector Landscape Vectors by Vecteezy
click to expand the code >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>

Keep the introduction from appearing in the text

It is well-known that <!-- more --> can sepearte the introduction and the main content, however the introduction will show in the content. What if we don’t want the introduction to appear in the body of the text?

click to expand the code >folded
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
The content written here will be shown in **introduction and main content**

{% raw %}<div class="post-summary">{% endraw %}

The text written here will only shown in **Introduction**

{% raw %}</div>{% endraw %}

<!-- more -->

<style type="text/css">
.post-summary { display: none; }
</style>

The content written here will shown in **main content**

[1]: 活用 Bulma 美化 Icarus 文章

Basic Usage of Hexo

https://songchen.science/blog/posts/e44932a0/

Author

Song Chen

Posted on

2023-10-06

Updated on

2023-10-26

Licensed under

#

Related Articles:

Like this article? Support the author with

Comments

Follow

Archives

Tags

AGI1
Alfred1
Automation3
Documentation2
Hexo1
Python_library1
Software3
bibliography1
chart1
computational simulation1
condensed-matter physics1
data analysis1
data-science2
deep-learning1
encryptAsDiary2
fortran1
functional programming2
machine-learning2
matplotlib1
multiprocessing1
neural-networks1
physics2
physics experiment3
plasma physics1
plugins1
poetry1
python15
python_configuration1
python_editors1
python_intermediate2
python_tools1
rust1
semiconductors1
superintelligence1
zotero1

follow.it

Recents

Latest Comments

×