前言
- hexo 在部署时会渲染md文件,将md文件转换为html文件。
- 本地html文件不需要再次渲染,所以只需要在
根目录
将html跳过渲染即可。
具体步骤
存放文件
- 在
[ROOT]\source\
创建一个文件夹,用于存放自己的html文件,可以放一个或者多个文件
![image-20220422073434614](https://cdn1.tianli0.top/npm/like977/changyong/202204220734726.webp)
-
将自己
js
、css
和用到的资源放到相应的文件里面,引用方式# js引用 <script src="js/xxx.js"></script> # css引用 <link rel="stylesheet" href="css/xxx.css">
处理Js
、Css
文件
-
Js处理
-
在
index.html
文件中找到引用语句进行修改,例如:<script src="js/xxx.js"></script> //xxx.js为自己的文件
-
在
js
文件中找到对应的xxx.js
文件,在文件前后加上<srupt>
命令<script> xxx.js </script> //xxx.js为为自己的js代码
-
-
css处理
-
在
index.html
文件中找到引用语句进行修改,例如:<link rel="stylesheet" href="css/xxx.css">
-
在
css
文件中找到对应的xxx.css
文件,在文件前后加上<style>
命令<style> xxx.css </style> //xxx.css为自己的css代码
-
配置文件,设置跳过渲染
法一,添加skip_render
,跳过hexo渲染
-
找到下面目录文件
_config.yml
,设置跳过渲染[ROOT]\_config.yml //根目录下 _config.yml 文件
-
添加以下代码
-
跳过单个文件
# 跳过渲染 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
将自定义页面设置为主页
-
修改
_config.yml
,更改生成目录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
// var publicDir = this.public_dir; var publicDir = pathFn.join(baseDir, 'public');
- 注销掉原有路径,设置根路径为
public
,
- 注销掉原有路径,设置根路径为
-
修改
url_for
,更改翻页文件地址:
[ROOT]/node_modules/hexo/lib/plugins/helper/url_for.js
// path = path || '/'; path = path || '';
最后
直接访问自己设置页面目录即可,[ROOT]即为网站根目录地址。
标签:文件夹,文件,自定义,Hexo,html,js,Html,跳过,css From: https://www.cnblogs.com/lmzq/p/17140535.html