安装hexo

1、建立一个文件夹 Blog（自取名字），进入文件夹标右键打开 Git Bush Here，输入npm命令安装Hexo：

1
npm install -g hexo-cli

2、安装完成后，输入 hexo init 命令初始化博客：

1
hexo init

3、静态部署

1
2
hexo g  #静态部署
hexo s  #启动

访问 http://localhost:4000 查看

安装butterfly主题、应用

1、在hexo项目根目录下执行操作clone主题

1
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

修改 Hexo 根目录下的 _config.yml，把主题改为 butterfly

2、如果沒有 pug 以及 stylus 的渲染器，还需要下载，否则在项目运行时会报错：

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

后续安装插件、引入文件后，请用

1
hexo clean && hexo g && hexo s

更新完再查看。

创建页面

分类页

1
2
# 输入以下命令创建
hexo new page categories

找到 source/categories/index.md 这个文件，在开头修改这个文件：添加 type: “categories”，页面以中文显示则修改 title 为中文名 分类，top_img: 添加顶部图片，具体如下：

1
2
3
4
title: 分类
date: 2023-06-01 14:23:42
type: "categories"
top_img: /img/categories.png

标签页

1
hexo new page tags

找到 source/tags/index.md 这个文件，在开头修改这个文件：添加 type: “tags”，页面以中文显示则修改 title 为中文名 标签，具体如下：

1
2
3
title: 标签
date: 2023-06-01 14:25:46
type: "tags"

关于页

1
hexo new page about

找到 source/about/index.md 这个文件，页面以中文显示则修改 title 为中文名 关于，top_img: 添加顶部图片，具体如下：

1
2
3
title: 关于
date: 2023-06-01 14:28:05
top_img: https://w.wallhaven.cc/full/3l/wallhaven-3l9zwd.jpg

魔改

https://blog.anheyu.com/posts/e62b.html

display: flex;
flex-direction: column;
background: url(/img/920220.jpg) no-repeat top;

链接库

1
hexo new page link

找到 source/link/index.md 这个文件，添加 type: “link”，页面以中文显示则修改 title 为中文名 链接库，top_img: 添加顶部图片，具体如下：

1
2
3
4
title: 链接库
date: 2023-06-13 18:27:01
top_img: img/link.jpg
type: "link"

在Hexo博客目录中的 source/_data（如果没有 _data 文件夹，请自行创建），创建一个文件 link.yml，添加以下内容：

1
2
3
4
5
6
- class_name: 网站
  link_list:
    - name: Weibo
      link: https://www.sina.com.cn/
      avatar: https://i.loli.net/2020/05/14/TLJBum386vcnI1P.png
      descr: 中国最大社交分享平台

导航栏展示配置如下：

1
2
3
4
5
6
7
8
9
10
11
# Menu 目錄
menu:
   主页: / || fas fa-home
   时间轴: /archives/ || fas fa-archive
   标签: /tags/ || fas fa-tags
   分类: /categories/ || fas fa-folder-open
  # List||fas fa-list:
  #   Music: /music/ || fas fa-music
  #   Movie: /movies/ || fas fa-video
   关于: /about/ || fas fa-heart
   链接库: /link/ || fas fa-link

https://akilar.top/posts/57291286/

音乐

https://www.qcqx.cn/article/3322c8a8.html

生活

主题配色

在Hexo 根目录下的 _config.yml修改

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
theme_color:
  enable: true
  main: "#5585b5"  #背景
  paginator: "#845F9C" #页码
  button_hover: "#d5ab9c" #按钮
  text_selection: "#845F9C" #页码

  link_color: "#3282b8" # 链接
  meta_color: "#1d97c1" #时间颜色
  hr_color: "#80558c"  #分割线条
  code_foreground: "#29c6cd"
  code_background: "rgba(27, 31, 35, .05)"
  toc_color: "#3282b8" #目录选中
  blockquote_padding_color: "#5585b5"
  blockquote_background_color: "#0f4c75"
  scrollbar_color: "#5585b5" #滚动条
  meta_theme_color_light: "#f1f0cf"
  meta_theme_color_dark: "#0d0d0d"

鼠标样式

鼠标点击特效

主题文件修改

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# Mouse click effects: fireworks (鼠標點擊效果: 煙火特效)
fireworks:
  enable: false
  zIndex: 9999 # -1 or 9999
  mobile: false

# Mouse click effects: Heart symbol (鼠標點擊效果: 愛心)
click_heart:
  enable: true
  mobile: true

# Mouse click effects: words (鼠標點擊效果: 文字)
ClickShowText:
  enable: false
  text:
    # - I
    # - LOVE
    # - YOU
  fontSize: 15px
  random: false
  mobile: false

鼠标移动特效

在 \themes\butterfly\source\js 中创建一个js文件，将以下代码复制进去：

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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
(function fairyDustCursor() {

  var possibleColors = ["#FBF3C7","#FAD54D","#c83c23","#2e4e7e","#4c8dae"]
  var width = window.innerWidth;
  var height = window.innerHeight;
  var cursor = {x: width/2, y: width/2};
  var particles = [];

  function init() {
    bindEvents();
    loop();
  }

  // Bind events that are needed
  function bindEvents() {
    document.addEventListener('mousemove', onMouseMove);
    document.addEventListener('touchmove', onTouchMove);
    document.addEventListener('touchstart', onTouchMove);

    window.addEventListener('resize', onWindowResize);
  }

  function onWindowResize(e) {
    width = window.innerWidth;
    height = window.innerHeight;
  }

  function onTouchMove(e) {
    if( e.touches.length > 0 ) {
      for( var i = 0; i < e.touches.length; i++ ) {
        addParticle( e.touches[i].clientX, e.touches[i].clientY, possibleColors[Math.floor(Math.random()*possibleColors.length)]);
      }
    }
  }

  function onMouseMove(e) {
    cursor.x = e.clientX;
    cursor.y = e.clientY;

    addParticle( cursor.x, cursor.y, possibleColors[Math.floor(Math.random()*possibleColors.length)]);
  }

  function addParticle(x, y, color) {
    var particle = new Particle();
    particle.init(x, y, color);
    particles.push(particle);
  }

  function updateParticles() {

    for( var i = 0; i < particles.length; i++ ) {
      particles[i].update();
    }

    for( var i = particles.length -1; i >= 0; i-- ) {
      if( particles[i].lifeSpan < 0 ) {
        particles[i].die();
        particles.splice(i, 1);
      }
    }

  }

  function loop() {
    requestAnimationFrame(loop);
    updateParticles();
  }

  function Particle() {

    this.character = "*";
    this.lifeSpan = 120; //ms
    this.initialStyles ={
      "position": "fixed",
      "top": "0", //必须加
      "display": "block",
      "pointerEvents": "none",
      "z-index": "10000000",
      "fontSize": "20px",
      "will-change": "transform"
    };

    this.init = function(x, y, color) {

      this.velocity = {
        x:  (Math.random() < 0.5 ? -1 : 1) * (Math.random() / 2),
        y: 1
      };

      this.position = {x: x - 10, y: y - 20};
      this.initialStyles.color = color;
      console.log(color);

      this.element = document.createElement('span');
      this.element.innerHTML = this.character;
      applyProperties(this.element, this.initialStyles);
      this.update();

      document.body.appendChild(this.element);
    };

    this.update = function() {
      this.position.x += this.velocity.x;
      this.position.y += this.velocity.y;
      this.lifeSpan--;

      this.element.style.transform = "translate3d(" + this.position.x + "px," + this.position.y + "px,0) scale(" + (this.lifeSpan / 120) + ")";
    }

    this.die = function() {
      this.element.parentNode.removeChild(this.element);
    }

  }

  function applyProperties( target, properties ) {
    for( var key in properties ) {
      target.style[ key ] = properties[ key ];
    }
  }

  init();
})();

接着，在的主题配置中 引入：

1
2
bottom:
   - <script type="text/javascript" src="/js/fairyDustCursor.js"></script>

https://www.cnblogs.com/MoYu-zc/p/14395965.html

网站速度优化

1
npm install markdown-it-named-headings --save