使用hexo时新建页面时,hexo会根据使用的主题生成对应框架模板。但有时总会是想DIY一个,hexo同样给我们提供了方法。

前言

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

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

如何配置

方法一

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

1
skip_render: "_post/test-post.md"

多篇文章

1
2
3
skip_render:
- '_post/test-post1.md'
- '_post/test-post2.md'

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

设置某一页面跳过渲染:

1
skip_render: "Login/**"

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

更多内容请查看官方文档

本文以skip_render: “Login/**”为例。

方法二

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

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

1
2
3
---
layout: false
---

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

如何引入css、js文件

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

制作页面肯定要运用到css、js等,由于我们跳过了node.js帮我们渲染的这一步,所以所使用到的css、js文件就需要我们自己导入。那么这个文件该怎么引入到上面我们提到的HTML中。这个要注意几点:

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

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

(或许可以,我还没有发现)(我是菜鸡)

引用css样式,就在HTML中使用嵌入式

1
2
3
<style type='text/css'>
....
</style>

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

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

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

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

Theme Volantis | Powered Hexo 载入天数...载入时分秒...
豫ICP备20002107