Hexo 引用本地Html使用自定义页面

前言

hexo 在部署时会渲染md文件，将md文件转换为html文件。
本地html文件不需要再次渲染，所以只需要在根目录将html跳过渲染即可。

具体步骤

存放文件

在[ROOT]\source\创建一个文件夹，用于存放自己的html文件，可以放一个或者多个文件

将自己js、css和用到的资源放到相应的文件里面，引用方式
1
2
3
4
# js引用
<script src="js/xxx.js"></script>
# css引用
<link rel="stylesheet" href="css/xxx.css">
处理Js、Css文件
1. Js处理
  - 在index.html文件中找到引用语句进行修改，例如：
    1
    <script src="js/xxx.js"></script> //xxx.js为自己的文件
  - 在js文件中找到对应的xxx.js文件，在文件前后加上<srupt>命令
    1
    <script> xxx.js </script> //xxx.js为为自己的js代码
2. css处理
  - 在index.html文件中找到引用语句进行修改，例如：
    1
    <link rel="stylesheet" href="css/xxx.css">
  - 在css文件中找到对应的xxx.css文件，在文件前后加上<style>命令
    1
    <style> xxx.css </style> //xxx.css为自己的css代码

配置文件，设置跳过渲染

法一，添加`skip_render`，跳过hexo渲染

找到下面目录文件 _config.yml，设置跳过渲染
1
[ROOT]\_config.yml //根目录下 _config.yml 文件

添加以下代码

跳过单个文件

1
2
3

# 跳过渲染
skip_render: 
  - "xxxx.html"

跳过单个文件夹下所有文件

1
2
3

# 跳过文件夹下所有文件
   skip_render: 
     - "文件夹名/*"

跳过单个文件下内的子文件夹

1
2
3

# 跳过子文件夹
   skip_render: 
  - "文件夹名/子文件夹名/*"

跳过文件内的所有文件

1
2
3

# 跳过文件夹下所有子文件夹和文件
   skip_render: 
  - "文件夹名/**"

法二，添加`layout: false`，跳过hexo渲染

在自定义页面开头添加：
1
2
3
---
layout: false
---

扩展：将自定义页面添加至导航栏

根据自己的导航栏进行变更修改

menu:
   主页: / || fas fa-home
   测试||fas fa-file-code:
     - test || /test/index.html || fas fa-code
     - test2 || /test/index2.html || fas fa-code
     - test3 || /test/index3.html || fas fa-code

将自定义页面设置为主页

修改_config.yml，更改生成目录

1
2
3

url: https://like977.vercel.app/blog #在网址后加上“/blog”
root: /blog/ #设置blog为网站的根目录
public_dir: public/blog #将blog所需的文件生成到blog文件内

修改deployer.js，更改部署目录
文件地址：[ROOT]/node_modules/hexo-deployer-git/lib/deployer.js
1
2
// var publicDir = this.public_dir;
var publicDir = pathFn.join(baseDir, 'public');
- 注销掉原有路径，设置根路径为public, public_dir = public/bog
修改url_for，更改翻页
文件地址：[ROOT]/node_modules/hexo/lib/plugins/helper/url_for.js
1
2
// path = path || '/';
path = path || '';