HEXO

Hexo （点击进入官网） 是一个免费的高效博客框架，通过解析 Markdown 显示静态页面，官网有中文文档，对于我们阅读非常友好。同时打包与发布网站也十分轻松，只需一条指令。

准备环境

  1. Nodejs

  2. Git

我的环境

1
2
3
4
5
nodejs: 14.17.1
hexo: 5.4.0
hexo-cli: 4.3.0
Butterfly: 3.7.8
Windows10: 21H1

开始

安装 hexo-cli

1
npm install -g hexo-cli

创建一个工程

通过 hexo init <文件夹名> 创建一个hexo博客工程到<文件夹名>下

或直接 hexo init 在当前目录下创建

1
hexo init hexogo
1
INFO  Start blogging with Hexo!

image-20210623120813289


配置

通过修改 _config.yml 文件进行网站配置

参考 官方文档 说明，我的配置如下，并不需要完全按照我的，仅供参考

1
2
3
4
5
6
7
8
# Site
title: HX
subtitle: 'hi'
description: ''
keywords:
author: HydrogenX
language: zh-CN
timezone: 'Asia/Shanghai'
1
2
3
4
5
6
7
8
9
# URL
## Set your site url here. For example, set url as 'https://username.github.io/project'

url: http://example.com
permalink: :year/:month/:day/:title/
permalink_defaults:
pretty_urls:
  trailing_index: false
  trailing_html: false

运行

编译：hexo g

启动：hexo s

或者使用 & 符号将两个命令连接：hexo g & hexo s

默认地址：http://localhost:4000/

image-20210623121213053

这时候博客就搭建好了，里面有一篇默认的 Hello World 文章，分别介绍了创建新文章、运行hexo服务、生成静态文件以及部署到服务器。

image-20210623121321921


来个文章

hexo new mynewpage

文章存放在 \source_posts 目录下

image-20210623124939615

打开 Markdown 你会看到有如下标记

1
2
3
4
5
---
title: mynewpage
date: 
tags:
---
参数描述默认值
layout布局config.default_layout
title标题文章的文件名
date建立日期文件建立日期
updated更新日期文件更新日期
comments开启文章的评论功能true
tags标签（不适用于分页）
categories分类（不适用于分页）

默认为直接发布的文章 hexo new <文章名> 其实他等同于 hexo new <文章名>，原因是在 _config.yml 文件中配置了 default_layout 属性为 ‘post’

除了 hexo new <文章名> 来新建文章，文章的管理还有其他操作

新建草稿 hexo new draft <文章名>

发布草稿 hexo publish <文章名>

image-20210623130236871

图片引用

需使用插件 hexo-asset-image-for-hexo5

1
npm install hexo-asset-image-for-hexo5

image-20210623130359408

修改根目录下的 _congif.yml 的 post_asset_folder 属性为 true

1
post_asset_folder: true

图片存放在与MD文件同目录的同名文件夹下

1
2
3
├─mynewpage
├────diagram.png
└─mynewpage.md

image-20210623130634453

重启 hexo 服务，图片正常显示

image-20210623130704644


主题

选择主题

主题选择标准：简洁/好看，界面不杂乱，引导信息（交互）友好

butterfly主题 挺活力的

matery主题 很多博客在用的一款

mdui主题 也还行

fluid主题 比较常规

Annie主题 很文艺，不适合我，但是好看，马克了

更换主题

butterfly和matery是我看过比较喜欢的两款主题，butterfly相对matery更花哨一点，但是matery太多人使用了（当然butterfly也多），想有点不一样。所以最终选择butterfly。 官方教程

  1. 在博客根目录下 git clone 主题

    1
    git clone -b master https://gitee.com/iamjerryw/hexo-theme-butterfly.git themes/butterfly
    1
    2
    3
    4
    5
    6
    7
    Cloning into 'themes/butterfly'...
    remote: Enumerating objects: 4194, done.
    remote: Counting objects: 100% (4194/4194), done.
    remote: Compressing objects: 100% (2378/2378), done.
    remote: Total 4194 (delta 2830), reused 2701 (delta 1779), pack-reused 0
    Receiving objects: 100% (4194/4194), 2.09 MiB | 509.00 KiB/s, done.
    Resolving deltas: 100% (2830/2830), done.

  2. 配置 _config.yml 文件，应用主题

    1
    theme: butterfly

  3. 安装渲染器

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

  1. 编译启动即可

    1
    hexo g & hexo s

主题自定义

菜单

添加标签页

运行 hexo new page tags

运行完毕后在 source/tags/index.md 文件下添加参数

1
type: "tags"

添加分类页

运行 hexo new page categories

运行完毕后在 source/categories/index.md 文件下添加参数

1
type: "categories"

添加友链页

运行 hexo new page link

运行完毕后在 source/link/index.md 文件下添加参数

1
type: "link"

图标

默认使用的是 FontAwesome 的库 https://fontawesome.com 在这里可以搜索你想要的图标进行使用，格式为 fas fa-<图标名称>

1
2
3
4
5
6
7
8
9
menu:
  主页: / || fas fa-home
  文章||fas fa-list:
    归档: /archives/ || fas fa-archive
    标签: /tags/ || fas fa-tags
    分类: /categories/ || fas fas fa-folder-open
  日志: /timeline/ || fas fa-database
  友链: /link/ || fas fa-link
  关于: /about/ || fas fa-info-circle

使用阿里 IconFont 的图标

FontAwesome 的图标较少，很多图标都找不到，不能满足我的需求，所以使用阿里的 IconFont 矢量图标库。

首先进入 IconFont ，登录账号后直接搜索你需要的图标。

image-20210621155900813

将喜欢的图标添加入库

image-20210621155930529

添加完毕后点击右上方购物车，在弹出侧边栏中选择 “添加至项目”

image-20210621160154127

若还没有创建过项目，会提示添加项目。点击添加按钮，输入你的项目名即可。

image-20210621160253667

添加完毕后会跳转页面，选择 ”Font class“，然后再点击 “查看在线链接”

image-20210621160624777

打开生成的在线链接，右键另存为此 CSS 文件，将文件命名好并存放到 \themes\butterfly\source\css 文件夹下。或直接复制到 自定义的 CSS样式中。

image-20210621161003080

可以单独配置图标的颜色与大小

1
2
3
4
5
.icon-QQ:before {
  content: "\e698";
  color: blue;
  font-size: 24px;
}

如果你跟我一样使用了这个原本就是彩色的QQ图标，你会发现他出现了问题

image-20210621162334105

这种图标需要使用 symbol 引入

  • 未研究出，待续

自定义CSS / JS

在主题 _config.yml 文件中引入

1
2
3
4
5
6
7
inject:
  head: 
    - <link rel="stylesheet" href="/css/hx.css">
    # - <link rel="stylesheet" href="/xxx.css">
  bottom:
   - <script src="/js/hx.js"></script>
    # - <script src="xxxx"></script>

hx.css

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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
/* 鼠标样式*/
* {
    cursor: url(/css/arrow.cur),default;
}
a,i,img{
    cursor: url(/css/hand.cur),pointer;
}

body{
    line-height: 2.5;
}


/* 背景处理 */
#web_bg {
    background: url(../img/top_pic.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}


/* 主标题 */
#site-info>#site-title{
    letter-spacing: 1vw;
    text-transform: uppercase;
    text-shadow: 2px 2px 5px rgb(83, 83, 83);
}
/* 副标题 */
#subtitle{
    letter-spacing: 0.3vw;
    text-shadow: 1px 1px 5px rgb(83, 83, 83);
}
/* 其他页面标题 */
#page-site-info>#site-title{
    letter-spacing: 2vw;
    font-size: 2.5rem;
    text-shadow: 2px 2px 5px rgb(83, 83, 83);
}


/* 侧边栏透明 */
#aside-content .card-widget,
/* 主页文章列表透明 */
#recent-posts>.recent-post-item, 
.read-mode .layout_post>#post,
/* 文章阅读透明*/
.layout>div:first-child:not(.recent-posts)
/* .layout_post>#page,.layout_post>#post */
{
    background: rgba(255,255,255,.8);
}

/* 边框外发光 */
#aside-content .card-widget:hover,
#recent-posts>.recent-post-item:hover,
.layout>div:first-child:not(.recent-posts):hover
{
    box-shadow: 0px 0px 1.5vw #d1d9e6;
    transition: box-shadow .3s ease-out;
}


/* 文章字体大小 */
#article-container,
/* 文章下方打赏字体大小 */
.post-reward
{
    font-size: 0.9rem;
}


/* 社交图标距离 */
#aside-content .card-info .card-info-social-icons .social-icon{
    margin: 0 1rem;
}


/* footer去背景 */
#footer{
    background: initial;
}


hx.js

1
2
3
4
5
6
7
8
9
var full_page =document.getElementsByClassName("full_page");
if (full_page.length != 0) {
  full_page[0].style.background = "transparent";
}

var not_home_page =  document.getElementsByClassName("not-home-page");
if (not_home_page.length != 0) {
  not_home_page[0].style.background = "transparent";
}

图片懒加载

主题的 _congif.yml 文件中 lazyload 属性改为 true（图片加载处，不要改错地方）

1
2
lazyload:
  enable: true

404 页面

使用自定义 404 页面，首先创建 404 页

1
hexo new page 404

创建后在 404.md 上写上以下内容

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
---
title: 404
date: 2021-06-21 12:29:36
layout: false
---


{% raw %}
<!DOCTYPE html><html lang="en"><head><meta http-equiv="Content-Type"content="text/html; charset=UTF-8"><title>404:NOT_FOUND</title><meta name="viewport"content="width=device-width, initial-scale=1"><link rel="stylesheet"href="https://cdn.jsdelivr.net/gh/xingjiahui/beautiful/404/bootstrap.min.css"><link rel="stylesheet"href="https://cdn.jsdelivr.net/gh/xingjiahui/beautiful/404/style.css"></head><body><main><div class="container"><div class="row"><div class="col-md-6 align-self-center"><svg version="1.1"xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"viewBox="0 0 800 600"style="visibility: visible;"><g><defs><clippath id="GlassClip"><path d="M380.857,346.164c-1.247,4.651-4.668,8.421-9.196,10.06c-9.332,3.377-26.2,7.817-42.301,3.5
                s-28.485-16.599-34.877-24.192c-3.101-3.684-4.177-8.66-2.93-13.311l7.453-27.798c0.756-2.82,3.181-4.868,6.088-5.13
                c6.755-0.61,20.546-0.608,41.785,5.087s33.181,12.591,38.725,16.498c2.387,1.682,3.461,4.668,2.705,7.488L380.857,346.164z"></path></clippath><clippath id="cordClip"><rect width="800"height="600"></rect></clippath></defs><g id="planet"transform="matrix(0.9994,-0.0336,0.0336,0.9994,-3.315,19.1486)"style="transform-origin: 0px 0px;"><circle fill="none"stroke="#0E0620"stroke-width="3"stroke-miterlimit="10"cx="572.859"cy="108.803"r="90.788"></circle><circle id="craterBig"fill="none"stroke="#0E0620"stroke-width="3"stroke-miterlimit="10"cx="548.891"cy="62.319"r="13.074"transform="matrix(1,0,0,1,2.892,0)"style="transform-origin: 0px 0px;"></circle><circle id="craterSmall"fill="none"stroke="#0E0620"stroke-width="3"stroke-miterlimit="10"cx="591.743"cy="158.918"r="7.989"transform="matrix(1,0,0,1,-2.892,0)"style="transform-origin: 0px 0px;"></circle><path id="ring"fill="none"stroke="#0E0620"stroke-width="3"stroke-linecap="round"stroke-miterlimit="10"d="
    		M476.562,101.461c-30.404,2.164-49.691,4.221-49.691,8.007c0,6.853,63.166,12.408,141.085,12.408s141.085-5.555,141.085-12.408
    		c0-3.378-15.347-4.988-40.243-7.225"></path><path id="ringShadow"opacity="0.5"fill="none"stroke="#0E0620"stroke-width="3"stroke-linecap="round"stroke-miterlimit="10"d="
    		M483.985,127.43c23.462,1.531,52.515,2.436,83.972,2.436c36.069,0,68.978-1.19,93.922-3.149"></path></g><g id="stars"><g id="starsBig"><g transform="matrix(0.9977,-0.0677,0.0677,0.9977,-16.1382,35.6621)"style="transform-origin: 0px 0px;"><line fill="none"stroke="#0E0620"stroke-width="3"stroke-linecap="round"stroke-miterlimit="10"x1="518.07"y1="245.375"x2="518.07"y2="266.581"></line><line fill="none"stroke="#0E0620"stroke-width="3"stroke-linecap="round"stroke-miterlimit="10"x1="508.129"y1="255.978"x2="528.01"y2="255.978"></line></g><g transform="matrix(0.9991,0.0412,-0.0412,0.9991,10.1093,-6.1496)"style="transform-origin: 0px 0px;"><line fill="none"stroke="#0E0620"stroke-width="3"stroke-linecap="round"stroke-miterlimit="10"x1="154.55"y1="231.391"x2="154.55"y2="252.598"></line><line fill="none"stroke="#0E0620"stroke-width="3"stroke-linecap="round"stroke-miterlimit="10"x1="144.609"y1="241.995"x2="164.49"y2="241.995"></line></g><g transform="matrix(0.9989,-0.0471,0.0471,0.9989,-6.3996,15.236)"style="transform-origin: 0px 0px;"><line fill="none"stroke="#0E0620"stroke-width="3"stroke-linecap="round"stroke-miterlimit="10"x1="320.135"y1="132.746"x2="320.135"y2="153.952"></line><line fill="none"stroke="#0E0620"stroke-width="3"stroke-linecap="round"stroke-miterlimit="10"x1="310.194"y1="143.349"x2="330.075"y2="143.349"></line></g><g transform="matrix(0.9978,-0.0669,0.0669,0.9978,-32.5879,14.511)"style="transform-origin: 0px 0px;"><line fill="none"stroke="#0E0620"stroke-width="3"stroke-linecap="round"stroke-miterlimit="10"x1="200.67"y1="483.11"x2="200.67"y2="504.316"></line><line fill="none"stroke="#0E0620"stroke-width="3"stroke-linecap="round"stroke-miterlimit="10"x1="210.611"y1="493.713"x2="190.73"y2="493.713"></line></g></g><g id="starsSmall"><g transform="matrix(1,0,0,1,0,0)"style="transform-origin: 0px 0px;"><line fill="none"stroke="#0E0620"stroke-width="3"stroke-linecap="round"stroke-miterlimit="10"x1="432.173"y1="380.52"x2="432.173"y2="391.83"></line><line fill="none"stroke="#0E0620"stroke-width="3"stroke-linecap="round"stroke-miterlimit="10"x1="426.871"y1="386.175"x2="437.474"y2="386.175"></line></g><g transform="matrix(1,0,0,1,0,0)"style="transform-origin: 0px 0px;"><line fill="none"stroke="#0E0620"stroke-width="3"stroke-linecap="round"stroke-miterlimit="10"x1="489.555"y1="299.765"x2="489.555"y2="308.124"></line><line fill="none"stroke="#0E0620"stroke-width="3"stroke-linecap="round"stroke-miterlimit="10"x1="485.636"y1="303.945"x2="493.473"y2="303.945"></line></g><g transform="matrix(1,0,0,1,0,0)"style="transform-origin: 0px 0px;"><line fill="none"stroke="#0E0620"stroke-width="3"stroke-linecap="round"stroke-miterlimit="10"x1="231.468"y1="291.009"x2="231.468"y2="299.369"></line><line fill="none"stroke="#0E0620"stroke-width="3"stroke-linecap="round"stroke-miterlimit="10"x1="227.55"y1="295.189"x2="235.387"y2="295.189"></line></g><g transform="matrix(1,0,0,1,0,0)"style="transform-origin: 0px 0px;"><line fill="none"stroke="#0E0620"stroke-width="3"stroke-linecap="round"stroke-miterlimit="10"x1="244.032"y1="547.539"x2="244.032"y2="555.898"></line><line fill="none"stroke="#0E0620"stroke-width="3"stroke-linecap="round"stroke-miterlimit="10"x1="247.95"y1="551.719"x2="240.113"y2="551.719"></line></g><g transform="matrix(0.998,0,0,0.9982,0.3727,0.7401)"style="transform-origin: 0px 0px;"><line fill="none"stroke="#0E0620"stroke-width="3"stroke-linecap="round"stroke-miterlimit="10"x1="186.359"y1="406.967"x2="186.359"y2="415.326"></line><line fill="none"stroke="#0E0620"stroke-width="3"stroke-linecap="round"stroke-miterlimit="10"x1="190.277"y1="411.146"x2="182.44"y2="411.146"></line></g><g transform="matrix(0.941,0,0,0.9414,28.3375,24.0932)"style="transform-origin: 0px 0px;"><line fill="none"stroke="#0E0620"stroke-width="3"stroke-linecap="round"stroke-miterlimit="10"x1="480.296"y1="406.967"x2="480.296"y2="415.326"></line><line fill="none"stroke="#0E0620"stroke-width="3"stroke-linecap="round"stroke-miterlimit="10"x1="484.215"y1="411.146"x2="476.378"y2="411.146"></line></g></g><g id="circlesBig"><circle fill="none"stroke="#0E0620"stroke-width="3"stroke-linecap="round"stroke-miterlimit="10"cx="588.977"cy="255.978"r="7.952"transform="matrix(1,0,0,1,0,-1.928)"style="transform-origin: 0px 0px;"></circle><circle fill="none"stroke="#0E0620"stroke-width="3"stroke-linecap="round"stroke-miterlimit="10"cx="450.066"cy="320.259"r="7.952"transform="matrix(1,0,0,1,0,-1.928)"style="transform-origin: 0px 0px;"></circle><circle fill="none"stroke="#0E0620"stroke-width="3"stroke-linecap="round"stroke-miterlimit="10"cx="168.303"cy="353.753"r="7.952"transform="matrix(1,0,0,1,0,-1.928)"style="transform-origin: 0px 0px;"></circle><circle fill="none"stroke="#0E0620"stroke-width="3"stroke-linecap="round"stroke-miterlimit="10"cx="429.522"cy="201.185"r="7.952"transform="matrix(1,0,0,1,0,-1.928)"style="transform-origin: 0px 0px;"></circle><circle fill="none"stroke="#0E0620"stroke-width="3"stroke-linecap="round"stroke-miterlimit="10"cx="200.67"cy="176.313"r="7.952"transform="matrix(1,0,0,1,0,-1.928)"style="transform-origin: 0px 0px;"></circle><circle fill="none"stroke="#0E0620"stroke-width="3"stroke-linecap="round"stroke-miterlimit="10"cx="133.343"cy="477.014"r="7.952"transform="matrix(1,0,0,1,0,-1.928)"style="transform-origin: 0px 0px;"></circle><circle fill="none"stroke="#0E0620"stroke-width="3"stroke-linecap="round"stroke-miterlimit="10"cx="283.521"cy="568.033"r="7.952"transform="matrix(1,0,0,1,0,-1.928)"style="transform-origin: 0px 0px;"></circle><circle fill="none"stroke="#0E0620"stroke-width="3"stroke-linecap="round"stroke-miterlimit="10"cx="413.618"cy="482.387"r="7.952"transform="matrix(1,0,0,1,0,-1.928)"style="transform-origin: 0px 0px;"></circle></g><g id="circlesSmall"><circle fill="#0E0620"cx="549.879"cy="296.402"r="2.651"transform="matrix(1,0,0,1,0,-3.857)"style="transform-origin: 0px 0px;"></circle><circle fill="#0E0620"cx="253.29"cy="229.24"r="2.651"transform="matrix(1,0,0,1,0,-3.857)"style="transform-origin: 0px 0px;"></circle><circle fill="#0E0620"cx="434.824"cy="263.931"r="2.651"transform="matrix(1,0,0,1,0,-3.857)"style="transform-origin: 0px 0px;"></circle><circle fill="#0E0620"cx="183.708"cy="544.176"r="2.651"transform="matrix(1,0,0,1,0,-3.857)"style="transform-origin: 0px 0px;"></circle><circle fill="#0E0620"cx="382.515"cy="530.923"r="2.651"transform="matrix(1,0,0,1,0,-3.857)"style="transform-origin: 0px 0px;"></circle><circle fill="#0E0620"cx="130.693"cy="305.608"r="2.651"transform="matrix(1,0,0,1,0,-3.857)"style="transform-origin: 0px 0px;"></circle><circle fill="#0E0620"cx="480.296"cy="477.014"r="2.651"transform="matrix(1,0,0,1,0,-3.857)"style="transform-origin: 0px 0px;"></circle></g></g><g id="spaceman"clip-path="url(cordClip)"transform="matrix(0.9999,0.0168,-0.0168,0.9999,3.7074,1.3827)"style="transform-origin: 0px 0px;"><path id="cord"fill="none"stroke="#0E0620"stroke-width="3"stroke-linecap="round"stroke-linejoin="round"stroke-miterlimit="10"d="
    		M273.813,410.969c0,0-54.527,39.501-115.34,38.218c-2.28-0.048-4.926-0.241-7.841-0.548
    		c-68.038-7.178-134.288-43.963-167.33-103.87c-0.908-1.646-1.793-3.3-2.654-4.964c-18.395-35.511-37.259-83.385-32.075-118.817"></path><path id="backpack"fill="#FFFFFF"stroke="#0E0620"stroke-width="3"stroke-linecap="round"stroke-linejoin="round"stroke-miterlimit="10"d="
    		M338.164,454.689l-64.726-17.353c-11.086-2.972-17.664-14.369-14.692-25.455l15.694-58.537
    		c3.889-14.504,18.799-23.11,33.303-19.221l52.349,14.035c14.504,3.889,23.11,18.799,19.221,33.303l-15.694,58.537
    		C360.647,451.083,349.251,457.661,338.164,454.689z"></path><g id="antenna"><line fill="#FFFFFF"stroke="#0E0620"stroke-width="3"stroke-linecap="round"stroke-linejoin="round"stroke-miterlimit="10"x1="323.396"y1="236.625"x2="295.285"y2="353.753"></line><circle fill="#FFFFFF"stroke="#0E0620"stroke-width="3"stroke-linecap="round"stroke-linejoin="round"stroke-miterlimit="10"cx="323.666"cy="235.617"r="6.375"></circle></g><g id="armR"><path fill="#FFFFFF"stroke="#0E0620"stroke-width="3"stroke-linecap="round"stroke-linejoin="round"stroke-miterlimit="10"d="
    			M360.633,363.039c1.352,1.061,4.91,5.056,5.824,6.634l27.874,47.634c3.855,6.649,1.59,15.164-5.059,19.02l0,0
    			c-6.649,3.855-15.164,1.59-19.02-5.059l-5.603-9.663"></path><path fill="#FFFFFF"stroke="#0E0620"stroke-width="3"stroke-linecap="round"stroke-linejoin="round"stroke-miterlimit="10"d="
    			M388.762,434.677c5.234-3.039,7.731-8.966,6.678-14.594c2.344,1.343,4.383,3.289,5.837,5.793
    			c4.411,7.596,1.829,17.33-5.767,21.741c-7.596,4.411-17.33,1.829-21.741-5.767c-1.754-3.021-2.817-5.818-2.484-9.046
    			C375.625,437.355,383.087,437.973,388.762,434.677z"></path></g><g id="armL"><path fill="#FFFFFF"stroke="#0E0620"stroke-width="3"stroke-linecap="round"stroke-linejoin="round"stroke-miterlimit="10"d="
    			M301.301,347.66c-1.702,0.242-5.91,1.627-7.492,2.536l-47.965,27.301c-6.664,3.829-8.963,12.335-5.134,18.999h0
    			c3.829,6.664,12.335,8.963,18.999,5.134l9.685-5.564"></path><path fill="#FFFFFF"stroke="#0E0620"stroke-width="3"stroke-linecap="round"stroke-linejoin="round"stroke-miterlimit="10"d="
    			M241.978,395.324c-3.012-5.25-2.209-11.631,1.518-15.977c-2.701-0.009-5.44,0.656-7.952,2.096
    			c-7.619,4.371-10.253,14.09-5.883,21.71c4.371,7.619,14.09,10.253,21.709,5.883c3.03-1.738,5.35-3.628,6.676-6.59
    			C252.013,404.214,245.243,401.017,241.978,395.324z"></path></g><g id="body"><path fill="#FFFFFF"stroke="#0E0620"stroke-width="3"stroke-linecap="round"stroke-linejoin="round"stroke-miterlimit="10"d="
    			M353.351,365.387c-7.948,1.263-16.249,0.929-24.48-1.278c-8.232-2.207-15.586-6.07-21.836-11.14
    			c-17.004,4.207-31.269,17.289-36.128,35.411l-1.374,5.123c-7.112,26.525,8.617,53.791,35.13,60.899l0,0
    			c26.513,7.108,53.771-8.632,60.883-35.158l1.374-5.123C371.778,395.999,365.971,377.536,353.351,365.387z"></path><path fill="none"stroke="#0E0620"stroke-width="3"stroke-linecap="round"stroke-linejoin="round"stroke-miterlimit="10"d="
    			M269.678,394.912L269.678,394.912c26.3,20.643,59.654,29.585,93.106,25.724l2.419-0.114"></path></g><g id="legs"><g id="legR"><path fill="#FFFFFF"stroke="#0E0620"stroke-width="3"stroke-linecap="round"stroke-linejoin="round"stroke-miterlimit="10"d="
    				M312.957,456.734l-14.315,53.395c-1.896,7.07,2.299,14.338,9.37,16.234l0,0c7.07,1.896,14.338-2.299,16.234-9.37l17.838-66.534
    				C333.451,455.886,323.526,457.387,312.957,456.734z"></path><line fill="none"stroke="#0E0620"stroke-width="3"stroke-linecap="round"stroke-linejoin="round"stroke-miterlimit="10"x1="304.883"y1="486.849"x2="330.487"y2="493.713"></line></g><g id="legL"><path fill="#FFFFFF"stroke="#0E0620"stroke-width="3"stroke-linecap="round"stroke-linejoin="round"stroke-miterlimit="10"d="
    				M296.315,452.273L282,505.667c-1.896,7.07-9.164,11.265-16.234,9.37l0,0c-7.07-1.896-11.265-9.164-9.37-16.234l17.838-66.534
    				C278.993,441.286,286.836,447.55,296.315,452.273z"></path><line fill="none"stroke="#0E0620"stroke-width="3"stroke-linecap="round"stroke-linejoin="round"stroke-miterlimit="10"x1="262.638"y1="475.522"x2="288.241"y2="482.387"></line></g></g><g id="head"><ellipse transform="matrix(0.259 -0.9659 0.9659 0.259 -51.5445 563.2371)"fill="#FFFFFF"stroke="#0E0620"stroke-width="3"stroke-linecap="round"stroke-linejoin="round"stroke-miterlimit="10"cx="341.295"cy="315.211"rx="61.961"ry="60.305"></ellipse><path id="headStripe"fill="none"stroke="#0E0620"stroke-width="3"stroke-linecap="round"stroke-linejoin="round"stroke-miterlimit="10"d="
    			M330.868,261.338c-7.929,1.72-15.381,5.246-21.799,10.246"transform="matrix(0.9999,0.0168,-0.0168,0.9999,4.4214,-4.6842)"style="transform-origin: 0px 0px;"></path><path fill="#FFFFFF"stroke="#0E0620"stroke-width="3"stroke-linecap="round"stroke-linejoin="round"stroke-miterlimit="10"d="
    			M380.857,346.164c-1.247,4.651-4.668,8.421-9.196,10.06c-9.332,3.377-26.2,7.817-42.301,3.5s-28.485-16.599-34.877-24.192
    			c-3.101-3.684-4.177-8.66-2.93-13.311l7.453-27.798c0.756-2.82,3.181-4.868,6.088-5.13c6.755-0.61,20.546-0.608,41.785,5.087
s33.181,12.591,38.725,16.498c2.387,1.682,3.461,4.668,2.705,7.488L380.857,346.164z"></path><g clip-path="url(#GlassClip)"><polygon id="glassShine"fill="none"stroke="#0E0620"stroke-width="3"stroke-miterlimit="10"points="
    				278.436,375.599 383.003,264.076 364.393,251.618 264.807,364.928 				"transform="matrix(0.866,-0.5,0.5,0.866,-33.401,203.976)"style="transform-origin: 0px 0px;"></polygon></g></g></g></g></svg></div><div class="col-md-6 align-self-center"><h1>404</h1><h2>UH OH!页面丢失</h2><p>您所寻找的页面不存在。你可以点击下面的按钮，返回主页。</p><a href="javascript:history.back(-1)"><button class="btn green">返回上一页</button></a></div></div></div></main><script src="https://cdn.jsdelivr.net/gh/xingjiahui/beautiful/404/gsap.min.js"></script><script src="https://cdn.jsdelivr.net/gh/xingjiahui/beautiful/404/script.js"></script></body></html>
{% endraw %}

鼠标点击效果

https://blog.csdn.net/qq_40590778/article/details/104662040

自定义鼠标样式

在自定义 CSS 下添加鼠标样式

1
2
3
4
5
6
7
/* 鼠标样式 Gami */
* {
    cursor: url(/css/arrow.cur),default;
}
a,i,img{
    cursor: url(/css/hand.cur),pointer;
}

这款鼠标内置3种分辨率，直接使用会使用最大的一个分辨率，显得十分突兀。

解决方法：

  1. 使用 VS 编辑
  2. Cur 转 Png 转换后将最小分辨率的样式提取，转回 Cur

部署到 Gitee

登录 Gitee ，添加仓库

image-20210621200128493

输入自己想要的路径名称，创建

image-20210621200247053

编辑 Hexo 的 _config.yml ，repo改为你的仓库 SSH 地址，当然你也可以使用 HTTP。

1
2
3
4
deploy:
  type: git
  repo: git@gitee.com:HydrogenX/hydrogenx.git
  branch: master

安装 hexo-deployer-git

1
npm install hexo-deployer-git

CMD 运行 hexo d -g 即可上传

1
INFO  Deploy done: git

成功后打开仓库，点击 “服务”，选择 Gitee Pages

image-20210621203342362

image-20210621203419132


image-20210621203509582

如果你是首次在电脑运行 Git ，你需要进行全局配置 Git user.name 和 user.email。名称和邮箱需要与 Gitee 一致。另外 SSH 连接方式需要将电脑公钥添加到 Gitee ，具体操作可以参考 Gitee 官方教程。