hexo博客自定义一个不受主题渲染的独立页面

使用hexo博客时，有时候想写一个不受主题渲染的独立页面。本文将详细介绍如何制作。

前言

一、如何配置

二、如何引入css、js文件

前言

在hexo中，我们发布文章后，node.js会把我们写的md文件转化为HTML文件（在博客根目录中的public文件中可以查看）。Hexo 使用 Markdown（或其他渲染引擎）解析文章，利用我们使用的主题生成静态网页。有时候我们想自定义一个页面，它不受hexo的主题渲染。

我们可以设置某一篇文章或者某一个页面，自定义自己想要的样式。本文主要以本博客中登录页面的制作为例。

一、如何配置

1. 方法一

   使用hexo中提供配置的跳过渲染。在博客根目录中的配置文件（注意不是主题的配置问文件）_config.yml，找到“skip_render”配置。如果想设置某一篇文章跳过渲染，则可以设置为

   skip_render: "_post/test-post.md"
   

   多篇文章

   skip_render:
     - "_post/test-post1.md"
     - "_post/test-post2.md"
   

   {% noteblock bug red %}

   skip_render配置设置的是source文件中的文章，如果设置文章跳过渲染的话要指定具体路径。

   {% endnoteblock %}

   设置某一页面跳过渲染：

   skip_render: "Login/**"
   

   这个设置表示将Login文件中的所有文件都跳过渲染。

   更多内容请查看官方文档

   本文以skip_render: "Login/**"为例。

2. 方法二

   在Front-matter中（即文章最上方以 --- 分隔的区域）设置layout: false，然后这篇文章即可跳过渲染。

   例如某篇文章test，在md中设置layout配置。

   ---
   layout: false
   ---
   

制作自定义独立页面推荐使用第一种方法。

二、如何引入css、js文件

假设我们添加了一个独立页面Login，方法不必多说，在Login文件中会有一个index.md文件（如果你设置了图片路径转换的插件，则会有一个index文件夹）。将其删除，只在Login中添加一个HTML文件，这个HTML文件写的就是我们要制作的登录页面，并设置好skip_render属性。

制作页面肯定要运用到css、js等，那么这个文件该怎么引入到上面我们提到的HTML中。这个要注意几点：

1、css引用不能使用外链式

<link rel="stylesheet" type="text/css">

（或许可以，我还没有发现）

引用css样式，就使用嵌入式

<style type='text/css'>
....
</style>

2、js文件存放的路径为/themes/主题文件/source/js/src>中

src文件中存放是专为我们自己写的js地方。例如我可以在src目录下建一个文件夹Loginjs，里面放的是登录页面所需要的js文件。那么在上面所说的HTML中引入js的路径就是

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

最后再一键三连就可以了（可以先hexo s先本地预览（预览方式–localhost:4000））。