介绍

网上有很多有趣的 html 特效网页，一般由index.html+js+css组成，且只能本地预览，下面介绍一种方法将html源码整合后添加到博客里面。

具体方法

1. 新建HTML文件夹

首先在博客根目录的 source 文件夹下，新建一个文件夹用于存放要部署的 HTML 文件。

我这里建了一个叫HTML的文件夹，里面的子文件夹可以存放各个HTML文件，当然也可以只创建一个主文件夹，直接在里面放 HTML 文件。

2. 跳过hexo渲染

然后在博客根目录的配置文件_config.yml 文件里，设置跳过渲染：

1
2
3
# 跳过渲染
skip_render: 
  - "xxxx.html"
1
2
3
4
# 跳过文件夹下所有文件
skip_render: 
  - "文件夹名/*"
如果父文件夹下还有子文件夹，就写：
1
2
3
4
# 跳过子文件夹
skip_render: 
  - "文件夹名/子文件夹名/*"
或更简单粗暴的方式：
1
2
3
# 跳过文件夹下所有子文件夹和文件
skip_render: 
  - "文件夹名/**"

3. 整合css、js文件

因为 hexo 部署的是静态文件，所有文章的 md 文件会被渲染成 html 文件，
hexo 会帮我们把所有 css、js 文件都加到文章里，我们之前跳过了渲染，所以就需要手动把 css、js 整合到 html 文件里

下面处理分两部分：

css：找到 index.html 文件里的语句，如：

1
<link rel="stylesheet" href="css/xxx.css">

然后在 css 文件夹中找到对应的文件 xxx.css，复制文件内容，把上面的代码改为：

1
<style> css代码内容 </style>

js：找到 index.html 文件里的语句，如：

1
<script src="js/xxx.js"></script>

然后在 js 文件夹中找到对应的文件 xxx.js，复制文件内容，把上面的代码改为：

1
<script> js代码内容 </script>

4. 验证效果

1
2
3
hexo clean
hexo g
hexo d

部署后来到 https://xxxxx.github.io/ 存放 html 文件的文件夹 /xxx.html

即可查看到你的自定义 html 页面了！

建议在部署前先试试在本地能否打开，如果不行再按上文修改一次。

5. 添加到导航菜单栏

如果想将这些 html 的界面放到导航菜单栏上，修改主题配置文件_config.butterfly.yml 对应的导航菜单栏代码即可，这里将我的代码放出：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
menu:
   主页: / || fas fa-home
   时间轴: /archives/ || fas fa-archive
   标签: /tags/ || fas fa-tags
   分类: /categories/ || fas fa-folder-open
   Demo||fas fa-file-code:
     - all html demo || /Demo/ || far fa-file-code
     - 圈小猫 || /HTML/圈小猫.html || fas fa-code
     - 撕渔网 || /HTML/撕渔网.html || fas fa-code
     - 纸飞机 || /HTML/纸飞机.html || fas fa-code
     - 彩虹雨 || /HTML/彩虹雨.html || fas fa-code
     - 方块穿梭 || /HTML/方块穿梭.html || fas fa-code
     - 碰撞小球 || /HTML/碰撞小球.html || fas fa-code
     - 烟花效果 || /HTML/烟花效果.html || fas fa-code
     - 骇客帝国 || /HTML/骇客帝国.html || fas fa-code
   娱乐||fas fa-list:
     - 音乐 || /music/ || fas fa-music
     - 电影 || /movies/ || fas fa-video
   友链: /link/ || fas fa-link
   关于: /about/ || fas fa-heart