前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >hexo 添加自定义单静态页面 跳过hexo渲染

hexo 添加自定义单静态页面 跳过hexo渲染

作者头像
匿名用户的日记
发布2021-12-14 11:21:21
1.3K0
发布2021-12-14 11:21:21
举报
文章被收录于专栏:匿名用户的日记

前言

Hexo默认会对/source/里的所有页面应用主题模板渲染,但有一些前端作品或demo页我们不希望经过渲染,而是能保持完全自定义的样子

例如:

  1. 主题内渲染,添加的模块仍在主题内,主题头部信息依然存在,仅仅是在特定区域进行渲染(适合添加 about 页面)
  2. 完全页面渲染,在主题内点击对应链接跳转到一个完全崭新的页面(我需要的)

hexo 的执行逻辑

source 文件夹下存放了待被转化的 markdown 文件,在执行hexo g命令时,source 目录下的文件将被转化为 html 文件。

介绍两种方法:

使用Hexo提供的跳过渲染配置,适用单个文件或整个目录的设置。

具体步骤,打开博客根目录_config.yml,找到其中skip_render项,这个项目用来配置/source/中需要跳过渲染的文件或目录,

例如希望跳过/source/navi/里的所有文件渲染(这样我们就可以将自己的作品放在这个文件夹中,然后可以通过自己的网址/navi/…访问了)

可以配置为:

代码语言:javascript
复制
skip_render: navi/**
  • source/navi/目录下添加「工具盒」源文件
  • 在站点配置文件_config.yml中配置skin_render项,如:skip_render: navi/**,这样projects文件夹下的所以文件内容将不会转化为 html,直接被 copy 到 public 文件夹
  • 在「工具盒」文件夹下添加 index.html 文件用于渲染自定义页面

完成以上步骤即可点击「工具盒」菜单导航,完成自定义页面的展示。

多个文件

代码语言:javascript
复制
skip_render:
  - 'xxxxx'
  - 'xxxx'

支持正则语法

代码语言:javascript
复制
skip_render:
  - '*.html'
  - 'demo/**'

修改了配置但生成出来的内容不一定及时应用了新配置,最好在生成之前执行一下hexo clean命令,清除掉旧的生成文件和缓存。

给单个文件添加不应用模板的标记,适用于个别特殊文件的处理。

例如我们要使 about 页面跳过渲染,创建 /source/about/index.md,将这个页面的相关 HTML 代码写进.md文件并保存,然后在 index.md 的头部写入:,

避免渲染的办法就是在文件头部Front-matter 里添加如下内容:

代码语言:javascript
复制
---
layout: false
---
{% raw %}
xxxxxxxxxxxxx
xx HTML代码 xx
xxxxxxxxxxxxx
{% endraw %}

PS:Front-matter.md 文件最上方以 — 分隔的区域,用于指定个别文件的变量,官方文档:https://hexo.io/docs/front-matter .md文件中的 HTML 代码要用 ` 和 ` 包起来,使其能正确编译里面的代码  

这样,这个文件就不会经过模板渲染,最终发布到/public/里的文件就是去掉标记后的文件的样子。

但是这种未尝试! 推荐第一种

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020-08-13,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前言
    • hexo 的执行逻辑
    • 介绍两种方法:
      • 使用Hexo提供的跳过渲染配置,适用单个文件或整个目录的设置。
        • 多个文件
          • 支持正则语法
            • 给单个文件添加不应用模板的标记,适用于个别特殊文件的处理。
            领券
            问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档