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

前言

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

具体步骤

存放文件

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

2. 将自己js、css和用到的资源放到相应的文件里面，引用方式

    # js引用
    <script src="js/xxx.js"></script>
    # css引用
    <link rel="stylesheet" href="css/xxx.css">
   

处理Js、Css文件

1. Js处理

   • 在index.html文件中找到引用语句进行修改，例如：

     <script src="js/xxx.js"></script> //xxx.js为自己的文件
     

   • 在js文件中找到对应的xxx.js文件，在文件前后加上<srupt>命令

     <script> xxx.js </script> //xxx.js为为自己的js代码
     

2. css处理

   • 在index.html文件中找到引用语句进行修改，例如：

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

   • 在css文件中找到对应的xxx.css文件，在文件前后加上<style>命令

     <style> xxx.css </style> //xxx.css为自己的css代码
     

配置文件，设置跳过渲染

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

1. 找到下面目录文件 _config.yml，设置跳过渲染

   [ROOT]\_config.yml //根目录下 _config.yml 文件
   

2. 添加以下代码

   • 跳过单个文件

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

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

跳过文件夹下所有文件

 skip_render: 
   - "文件夹名/*"
 ```

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

跳过子文件夹

 skip_render: 
- "文件夹名/子文件夹名/*"
 ```

• 跳过文件内的所有文件

跳过文件夹下所有子文件夹和文件

 skip_render: 
- "文件夹名/**"   
 ```

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

• 在自定义页面开头添加：

  ---
  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

将自定义页面设置为主页

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

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

2. 修改deployer.js，更改部署目录

   文件地址：[ROOT]/node_modules/hexo-deployer-git/lib/deployer.js

   // var publicDir = this.public_dir;
   var publicDir = pathFn.join(baseDir, 'public');
   

   • 注销掉原有路径，设置根路径为public,

3. 修改url_for，更改翻页

   文件地址：[ROOT]/node_modules/hexo/lib/plugins/helper/url_for.js

   // path = path || '/'; 
   path = path || '';
   

最后

直接访问自己设置页面目录即可，[ROOT]即为网站根目录地址。