Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

Quick Start

Create a new post

1
$ hexo new "My New Post"

More info: Writing

Run server

1
$ hexo server

More info: Server

Generate static files

1
$ hexo generate

More info: Generating

Deploy to remote sites

1
$ hexo deploy

More info: Deployment

文章

1
2
3
4
5
6
7
8
9
10
11
12
13
title: myfirst
date: 2022-07-19 11:08:06
tags: 标签
cover: 文章封面
description: 描述
sticky: 文章置顶数字越大,置顶优先级越大
copyright: false 转载文章不需要设置版权

设置版权:
copyright_author: xxxx
copyright_author_href: https://xxxxxx.com
copyright_url: https://xxxxxx.com
copyright_info: 此文章版權歸xxxxx所有,如有轉載,請註明來自原作者

文章打赏

1
2
3
4
5
6
7
8
9
reward:
enable: true
QR_code:
- img: /img/wechat.jpg
link:
text: 微信
- img: /img/alipay.jpg
link:
text: 支付寶

相册图库

1
2
3
4
5
<div class="gallery-group-main">
{% galleryGroup name description link img-url %}
{% galleryGroup name description link img-url %}
{% galleryGroup name description link img-url %}
</div>
  • name:圖庫名字
  • description:圖庫描述
  • link:連接到對應相冊的地址
  • img-url:圖庫封面的地址

相册

1
2
3
4
5
6
7
8
9
10
{% gallery %}
![](https://i.loli.net/2019/12/25/Fze9jchtnyJXMHN.jpg)
![](https://i.loli.net/2019/12/25/ryLVePaqkYm4TEK.jpg)
![](https://i.loli.net/2019/12/25/gEy5Zc1Ai6VuO4N.jpg)
![](https://i.loli.net/2019/12/25/d6QHbytlSYO4FBG.jpg)
![](https://i.loli.net/2019/12/25/6nepIJ1xTgufatZ.jpg)
![](https://i.loli.net/2019/12/25/E7Jvr4eIPwUNmzq.jpg)
![](https://i.loli.net/2019/12/25/mh19anwBSWIkGlH.jpg)
![](https://i.loli.net/2019/12/25/2tu9JC8ewpBFagv.jpg)
{% endgallery %}

tag-hide

1
{% hideInline content,display,bg,color %}
  • content: 文本內容
  • display: 按鈕顯示的文字(可選)
  • bg: 按鈕的背景顏色(可選)
  • color: 按鈕文字的顏色(可選)

mermaid

1
2
3
{% mermaid %}
內容
{% endmermaid %}
1
2
3
4
5
6
7
8
{% mermaid %}
pie
title Key elements in Product X
"Calcium" : 42.96
"Potassium" : 50.05
"Magnesium" : 10.01
"Iron" : 5
{% endmermaid %}

Tabs

1
2
3
4
5
6
7
8
9
10
11
12
13
{% tabs test1 %}
<!-- tab -->
**This is Tab 1.**
<!-- endtab -->

<!-- tab -->
**This is Tab 2.**
<!-- endtab -->

<!-- tab -->
**This is Tab 3.**
<!-- endtab -->
{% endtabs %}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
自定义Tab名 + 只有icon + icon和Tab名

{% tabs test4 %}
<!-- tab 第一個Tab -->
**tab名字為第一個Tab**
<!-- endtab -->

<!-- tab @fab fa-apple-pay -->
**只有圖標 沒有Tab名字**
<!-- endtab -->

<!-- tab 炸彈@fas fa-bomb -->
**名字+icon**
<!-- endtab -->
{% endtabs %}

Button

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{% btn [url],[text],[icon],[color] [style] [layout] [position] [size] %}

[url] : 鏈接
[text] : 按鈕文字
[icon] : [可選] 圖標
[color] : [可選] 按鈕背景顔色(默認style時)
按鈕字體和邊框顔色(outline時)
default/blue/pink/red/purple/orange/green
[style] : [可選] 按鈕樣式 默認實心
outline/留空
[layout] : [可選] 按鈕佈局 默認為line
block/留空
[position] : [可選] 按鈕位置 前提是設置了layout為block 默認為左邊
center/right/留空
[size] : [可選] 按鈕大小
larger/留空
1
2
3
4
5
6
7
8
9
<div class="btn-center">
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,outline larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,outline blue larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,outline pink larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,outline red larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,outline purple larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,outline orange larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,outline green larger %}
</div>

inlineImg

主題中的圖片都是默認以塊級元素顯示,如果你想以內聯元素顯示,可以使用這個標簽外掛。

1
2
3
4
{% inlineImg [src] [height] %}

[src] : 圖片鏈接
[height] : 圖片高度限制【可選】

label

1
{% label text color %}

timeline

1
2
3
4
5
6
7
8
{% timeline title,color %}
<!-- timeline title -->
xxxxx
<!-- endtimeline -->
<!-- timeline title -->
xxxxx
<!-- endtimeline -->
{% endtimeline %}
1
2
3
4
5
{% timeline 2022 %}
<!-- timeline 01-02 -->
這是測試頁面
<!-- endtimeline -->
{% endtimeline %}

這是測試頁面

1
2
3
{% flink %}
xxxxxx
{% endflink %}
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
{% flink %}
- class_name: 友情鏈接
class_desc: 那些人,那些事
link_list:
- name: JerryC
link: https://jerryc.me/
avatar: https://jerryc.me/img/avatar.png
descr: 今日事,今日畢
- name: Hexo
link: https://hexo.io/zh-tw/
avatar: https://d33wubrfki0l68.cloudfront.net/6657ba50e702d84afb32fe846bed54fba1a77add/827ae/logo.svg
descr: 快速、簡單且強大的網誌框架

- class_name: 網站
class_desc: 值得推薦的網站
link_list:
- name: Youtube
link: https://www.youtube.com/
avatar: https://i.loli.net/2020/05/14/9ZkGg8v3azHJfM1.png
descr: 視頻網站
- name: Weibo
link: https://www.weibo.com/
avatar: https://i.loli.net/2020/05/14/TLJBum386vcnI1P.png
descr: 中國最大社交分享平台
- name: Twitter
link: https://twitter.com/
avatar: https://i.loli.net/2020/05/14/5VyHPQqR6LWF39a.png
descr: 社交分享平台
{% endflink %}

添加分类和标签

  1. 分别创建categories和tags

    1
    2
    hexo new page categories
    hexo new page tags
  2. 分别编辑页面categories和tags

    1
    2
    3
    4
    5
    ---
    title: 分类
    data: 2020-7-20 2:34:08
    type: 'categories'
    ---
    1
    2
    3
    4
    5
    ---
    title: 标签
    data: 2020-7-20 2:34:08
    type: 'tags'
    ---
  3. 实际使用

    1
    2
    3
    4
    categories:
    - hexo
    tags:
    - linux
  4. 配置别名(可以不配)

    在配置中更新别名,其中: 以前的是正式的名称,以后的是访问的路径

    1
    2
    3
    4
    5
    6
    7
    category_map:
    hexo:hexo
    ubuntu:ubuntu
    tag_map:
    linux:linux
    vim:vim
    hexo:hexo
  5. 部署生效

    1
    2
    3
    hexo clean
    hexo g
    hexo d

在导航栏添加点东西

  • 例如我添加了一个更新日志的模块。
  • 在主题的配置文件中,menu添加一栏:Board: /board
  • 然后在source中添加一个board,即对应上面的名字。然后再创建一个index.md,里面可以写你想写的内容。
  • 在主题的hueman/langulages/zh-CN.yml中的index适当的位置加:board: '更新日志',位置和名字是你自己设定。
  • 重新部署,然后就OK了

在侧边栏添加点东西

  • 回到你的主题的配置文件中,找到widgets一栏,在你要添加的位置处添加一条你自定义的名称。例如我的叫communiation且放在了第二行。
  • 在上面所提到的zh-CN.yml文件中找到sidebar一栏,添加communiation: '你要设的名称'
  • hueman/layout/widget中添加一个communiation.ejs,填入模板
1
2
3
4
5
6
7
8
<% if (site.posts.length) { %>
<div class="widget-wrap widget-list">
<h3 class="widget-title"><%= __('sidebar.communiation') %></h3>
<div class="widget">
<!--这里添加你要写的内容-->
</div>
</div>
<% } %>