Use Hexo and Github to publish your blog

前提条件

$node -v   # 出现版本号，就安装成功了
$npm -v    # 出现版本号，就安装成功了

Install Git
```
$git --version
```
Register a Github account.

快速开始

Reference: Molunerfinn/hexo-theme-melody

本地部署

Generate a Hexo static blog

# 新建elaine文件夹
$npm install -g hexo-cli
$hexo init
$npm install
$hexo c
$hexo g
$hexo s    # 本地预览 localhost:4000

与Github连接，发布到hexo服务器(Github)上

Connect with Github

1. 新建一个项目: 个人头像左边-> + -> New repository
2. 输入博客的项目名字: ElaineXHZhong.github.io (Github账号名(必须)+github.io后缀)
3. 勾上README初始化
4. 项目就建成了

In the hexo work folder’s root config file _config.yml:

deploy:
    type: git
    repo: git@github.com:ElaineXHZhong/ElaineXHZhong.github.io
    branch: master

Publish to Github

$npm install hexo-deployer-git --save # before $hexo d 
$hexo d    # 发布到你的hexo服务器(Github)上，即可在外网查看了

自定义配置

Hexo主题配置

Install melody theme
```
$npm install hexo-theme-melody
```
In the hexo work folder’s root config file _config.yml:
```
theme: melody
```

If you don’t have pug & stylus renderer, please

$npm install hexo-renderer-pug hexo-renderer-stylus --save

create a _config.melody.yml in your hexo work folder.

将 ./node_modules/hexo-theme-melody/_config.yml里的内容拷贝至 _config.melody.yml

看板娘

Add 看板娘

$npm uninstall hexo-helper-live2d
$npm install --save hexo-helper-live2d # 成功了之后可以看到当前目录的node_modules/下有个live2d-widget目录，这是动画的主配置
$npm audit fix
$npm audit fix --force
$npm install live2d-widget-model-tororo # 动画的下载模型文件
# 安装完成可以在node_modules/下看到live2d-widget-model-tororo文件夹(model名字是tororo)

In the hexo work folder’s root config file _config.yml:

# Live2D看板娘
live2d:
    enable: true
    scriptFrom: local
    pluginRootPath: live2dw/
    pluginJsPath: lib/
    pluginModelPath: assets/
    tagMode: false
    log: false
    model:
        use: live2d-widget-model-tororo
    display:
        position: right
        width: 200
        height: 400
    mobile:
        show: true

导航菜单

Add archives、tags、categories、gallery、slides:

Edit _config.melody.yml:

menu:
    Home: /
    Archives: /archives
    Tags: /tags
    Categories: /categories
    Gallery: /gallery
    Slides: /slides

archives 自动添加(public/archives)，不需要操作

Add tags标签页

$hexo new page tags # 创建source/tags

Edit source/tags/index.md

---
title: tags
date: 2021-04-09 10:07:51
type: "tags"
---

Add categories分类页

$hexo new page categories # 创建source/categories

Edit source/categories/index.md

---
title: categories
date: 2021-04-09 10:07:51
type: "categories"
---

Add gallery相册

$hexo new page gallery # 创建source/gallery

Edit source/gallery/index.md

---
title: gallery
date: 2021-04-09 10:07:51
type: "gallery"
---

Add slides幻灯片Slides页面

$hexo new page slides # 创建source/slides

Edit source/slides/index.md

---
title: slides
date: 2021-04-09 10:07:51
type: "slides"
---

Add 404404页面

$hexo new page 404 # 创建source/404

Edit source/404/index.md

---
title: 404
date: 2021-04-09 10:14:54
layout: 404
permalink: /404
---

打开https://elainexhzhong.github.io/404.html就能看到404页面

社交图标

Edit _config.melody.yml:

# 格式是    图标名 前缀: url
social:
    github fab: https://github.com/ElaineXHZhong
    video fas: https://space.bilibili.com/488540235?from=search&seid=14388519767007720984
    instagram fab: https://www.instagram.com/elaine_lyre/
# 同时你需要添加font-awesome v5的链接到
cdn:
    css:
        fontawesome: https://cdn.jsdelivr.net/npm/font-awesome@latest/css/font-awesome.min.css
        fontawesomev5: https://use.fontawesome.com/releases/v5.7.2/css/all.css

访问font-awesome v5 free icons去找图标名

头像

Edit _config.melody.yml:
选择长宽相等的头像，否则显示上会出问题
```
avatar: https://xxxx.jpg
```

Follow Me 按钮

Edit _config.melody.yml:

follow:
    enable: true
    url: 'https://github.com/ElaineXHZhong'
    text: 'Follow Me'

友情链接

Edit _config.melody.yml:
Please refer here

links_title: Links   # 配置友链的标题文字
links:
    Molunerfinn: https://molunerfinn.com # 名称：URL
    PiEgg: https://piegg.cn
    Elody: https://piegg.cn

顶部图

图片上传到图床Cloudinary
- github邮箱
- 密码自取

Edit _config.melody.yml:

top_img拥有true、false或者具体图片url三种值

top_img: https://res.cloudinary.com/okk/image/upload/v1617958217/samples/landscapes/2_hil4eh.jpg

顶部图高度控制
```
top_img_height: 60
```

博客年份

Edit _config.melody.yml:
```
since: 2013
```

页脚自定义文本

Edit _config.melody.yml:

一般

footer_custom_text: Hi, welcome to my <a href="https://molunerfinn.com">blog</a>!

底部文字生成随机的谚语
```
footer_custom_text: hitokoto
```

特效

烟花

Edit _config.melody.yml:
```
fireworks: true
```

彩带

Edit _config.melody.yml:

canvas_ribbon:
    enable: true
    size: 150
    alpha: 0.6
    zIndex: -1
    click_to_change: false

评论系统

注册disqus
- github邮箱
- 密码自取

Edit _config.melody.yml:

disqus:
    enable: true # or false
    shortname: 你的disqus的short-name # elaine
    count: true # or false. 开启将展示出你的文章的评论数

字数统计

打开 hexo 工作目录
```
$npm install hexo-wordcount --save
```
Edit _config.melody.yml:
```
wordcount:
    enable: true
```

代码高亮

Edit _config.melody.yml:

highlight_theme: light # default | darker | pale night | light | ocean

Edit _config.yml:

highlight:
    enable: true
    line_number: true
    auto_detect: false
    tab_replace: ''
    wrap: true
    hljs: true

发布文章

发布新文章

打开 hexo 工作目录

$hexo new "文章标题"   # 在source/_posts中会生成文章post_name.md和同名文件夹post_name

文章插入图片

Edit _config.yml:
```
post_asset_folder: true
```
打开 hexo 工作目录
```
$hexo new post_name
```
在source/_posts中会生成文章post_name.md和同名文件夹post_name

将图片资源放在post_name中，文章就可以使用相对路径引用图片资源了

# _posts/post_name/image.jpg
![](image.jpg) # markdown的引用方式: 图片只能在文章中显示，但无法在首页中正常显示
{% asset_img image.jpg This is an image %} # 标签插件语法: 图片在文章和首页中同时显示

除了在本地存储图片，还可以将图片上传到一些免费的CDN服务中
- 比如Cloudinary
  - github邮箱
  - 密码自取
- 在Cloudinary中上传图片后，会生成对应的url地址，将地址直接拿来引用即可

文章插入视频

Edit 文章.md

<html>
<div style="position: relative; width: 100%; height: 0; padding-bottom: 75%;">
    <iframe src="//player.bilibili.com/player.html?aid=39807850&cid=69927212&page=1" scrolling="no" border="0" 
frameborder="no" framespacing="0" allowfullscreen="true" style="position: absolute; width: 100%; 
height: 100%; left: 0; top: 0;"> </iframe>
</div>
</html>


### 文章置顶

1. 打开 hexo 工作目录
    ```bash
    $npm uninstall hexo-generator-index --save

Edit 文章.md:

title: xxxx
tags:
    - xxx
date: 2018-08-08 08:08:08
top: True

文章相关项

Edit _config.melody.yml:

在文章页顶部显示发表日期以及文章的分类、在文章页底部显示标签

post_meta:
    date_type: created # or updated 文章日期是创建日或者更新日
    categories: true # or false 是否显示分类
    tags: true # or false 是否显示标签

文章版权

post_copyright:
    enable: true
    license: CC BY-NC-SA 3.0 # 协议名称
    license_url: https://creativecommons.org/licenses/by-nc-sa/3.0/ # 协议说明地址

文章相关二维码

QR_code:
    - itemlist:
        img: https://xxxx1.jpg
        text: 支付宝打赏
    - itemlist:
        img: https://xxxx2.jpg
        text: 微信打赏

Edit 文章.md

为特定的文章配置特定的目录章节数字

title: Hi, theme-melody!
tags:
    - hexo
    - hexo theme
toc_number: true   # add toc_number to here. 版本v1.5.6新增
date: 2017-09-07

文章顶部图

Edit 文章.md
为特定的文章页配置特定的顶部图

title: Hi, theme-melody!
tags:
    - hexo
    - hexo theme
top_img: https://xxxxxxx.jpg   # top_img在这里插入
date: 2017-09-07

引用站内文章

Edit 文章.md

{% post_link 文章文件名（不要后缀） 文章标题（可选） %}
# {% post_link FaceNet-Configuration-and-Deployment FaceNet-Configuration-and-Deployment %}

插入数学公式

Reference: mathJax | LaTeX | mathjax-basic-tutorial-and-quick-reference | MathJax公式简介

安装插件mathJax
```
$npm install hexo-math --save
```

在站点配置文件_config.yml中添加

math:
    engine: 'mathjax' # or 'katex'
    mathjax:
        # src: custom_mathjax_source
        config:
            # MathJax config

在主题配置_config.melody.yml中将 mathJax 设为 true

# MathJax Support
mathjax:
    enable: true
    per_page: false
    cdn: //cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML

公式插入格式

$数学公式$ 行内 不独占一行
$$数学公式$$ 行间 独占一行
例如：
$f(x)=ax+b$
$$f(x)=ax+b$$

$f(x)=ax+b$

语法格式

上标与下标

使用 ^ 表示上标，使用 _ 表示下标，如果上下标的内容多于一个字符，使用大括号括起来:
$$f(x) = a_1x^n + a_2x^{n-1} + a_3x^{n-2}$$
如果左右两边都有上下标可以使用 \sideset 语法:
$$\sideset{^n_k}{^x_y}a$$

$f(x) = a_1x^n + a_2x^{n-1} + a_3x^{n-2}$
$\sideset{^n_k}{^x_y}a$

括号

在markdown语法中，, $, {, }, _都是有特殊含义的，所以需要加\转义
小括号与方括号可以使用原始的() [] 大括号需要转义\也可以使用\lbrace和 \rbrace
\{x*y\}
\lbrace x*y \rbrace
原始符号不会随着公式大小自动缩放，需要使用 \left 和 \right 来实现自动缩放：
$$\left \lbrace \sum_{i=0}^n i^3 = \frac{(n^2+n)(n+6)}{9} \right \rbrace$$
不使用\left 和 \right的效果：
$$ \lbrace \sum_{i=0}^n i^3 = \frac{(n^2+n)(n+6)}{9}  \rbrace$$

$\left \lbrace \sum_{i=0}^n i^3 = \frac{(n^2+n)(n+6)}{9} \right \rbrace$
$ \lbrace \sum_{i=0}^n i^3 = \frac{(n^2+n)(n+6)}{9} \rbrace$

分数与开方

可以使用\frac 或者 \over 实现分数的显示：
$\frac xy$
$ x+3 \over y+5 $
开方使用\sqrt:
$ \sqrt{x^5} $
$ \sqrt[3]{\frac xy} $

$\frac xy$
$ x+3 \over y+5 $
$ \sqrt{x^5} $
$ \sqrt[3]{\frac xy} $

求和与积分

求和使用\sum,可加上下标，积分使用\int可加上下限，双重积分用\iint:
$ \sum_{i=0}^n $
$ \int_1^\infty $
$ \iint_1^\infty $

$ \sum_{i=0}^n $
$ \int_1^\infty $
$ \iint_1^\infty $

极限
```
极限使用\lim:
$ \lim_{x \to 0} $
```
$ \lim_{x \to 0} $

表格与矩阵

表格样式lcr表示居中，|加入一条竖线，\hline表示行间横线，列之间用&分隔，行之间用\分隔:
$$\begin{array}{c|lcr}
n & \text{Left} & \text{Center} & \text{Right} \\\\
\hline
1 & 1.97 & 5 & 12 \\\\
2 & -11 & 19 & -80 \\\\
3 & 70 & 209 & 1+i \\\\
\end{array}$$
表格的插入也可以使用以下方式:
名称|说明
---|---|---
temperature|  室内温度
set temperature|  设定温度
height|  室内高度
矩阵显示和表格很相似:
$$\left[
\begin{matrix}
V_A \\\\
V_B \\\\
V_C \\\\
\end{matrix}
\right] =
\left[
\begin{matrix}
1 & 0 & L \\\\
-cosψ & sinψ & L \\\\
-cosψ & -sinψ & L
\end{matrix}
\right]
\left[
\begin{matrix}
V_x \\\\
V_y \\\\
W \\\\
\end{matrix}
\right] $$

$$\begin{array}{c|lcr}
n & \text{Left} & \text{Center} & \text{Right} \\
\hline
1 & 1.97 & 5 & 12 \\
2 & -11 & 19 & -80 \\
3 & 70 & 209 & 1+i \\
\end{array}$$
$$\left[
\begin{matrix}
V_A \\
V_B \\
V_C \\
\end{matrix}
\right] =
\left[
\begin{matrix}
1 & 0 & L \\
-cosψ & sinψ & L \\
-cosψ & -sinψ & L
\end{matrix}
\right]
\left[
\begin{matrix}
V_x \\
V_y \\
W \\
\end{matrix}
\right] $$

配置好后快速发布文章

$hexo new "文章标题" # 在source/_posts中会生成文章post_name.md和同名文件夹post_name
$hexo clean
$hexo g
$hexo s    # localhost:4000
$hexo d    # 或者 local d -g，发布到 https://elainexhzhong.github.io/