前言

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

具体步骤

存放文件

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

image-20220422073434614

  1. 将自己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渲染

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

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

  2. 添加以下代码

    • 跳过单个文件

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

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

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

1
2
3
4
5
6
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，更改生成目录

    1
    2
    3
    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

    1
    2
    // var publicDir = this.public_dir;
    var publicDir = pathFn.join(baseDir, 'public');
    • 注销掉原有路径，设置根路径为public, public_dir = public/bog

  3. 修改url_for，更改翻页

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

    1
    2
    // path = path || '/'; 
    path = path || '';

最后

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