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

技术

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

前言

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

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

一、如何配置

  1. 方法一

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

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

    多篇文章

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

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

    设置某一页面跳过渲染:

    1
    COPYskip_render: "Login/**"

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

    更多内容请查看官方文档

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

  2. 方法二

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

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

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

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

二、如何引入css、js文件

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

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

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

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

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

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

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

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

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

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

最后再一键三连就可以了

可以先hexo s先本地预览预览方式localhost:4000

本文作者:Konger

本文链接: https://blog.ninglans.top/posts/33197/

评论