avatar

Hexo大结局

如何跳过hexo的渲染

查看官方文档页面跳过hexo的渲染主要有两种方式:

Front matter

  • 新建页面,然后将你的代码直接写入index.md

  • 在Front matter中添加layout: false,例如我的Sakura樱花雨页面,此方法适用于单一的纯HTML
    css页面。

    1
    2
    3
    4
    5
    6
    ---
    title: sakura
    date: 2019-11-29 16:59:51
    type: "sakura"
    layout: false
    ---

    示例图

skip_render

  • 如果页面含有复杂的js,layout的方式可能容易报错,因此利用hexo自带的skip_render
  • 在根目录【根目录】的_config.yml,你可以看到skip_render,大致在32行。写入你想要的跳过渲染的路径,例如我的烟花-CodePen页面:
1
2
3
skip_render:
- 'fireworks/*'
- 'fireworks/**'
  • 注意缩进和空格,解释一下:'fireworks/*'表示在目录source/fireworks下的文件全部跳过渲染,'fireworks/**'表示在目录source/fireworks/文件夹下的文件全部跳过渲染(例如页面的js、css在另一个文件夹中)。这里有点重复了,只为了你能看明白。

  • Hexo最终是把md渲染为HTML页面,所以既然跳过渲染,那页面就只写入HTML。如图,将新建页面的index.md直接改为HTML(注意调整css)
    文件示例图

可以混用

  • 都是跳过渲染,当然可以混用

  • 例如我的小圆点页面,两种方法混用

  • 修改md为HTML,直接写入HTML,并在Front matter中利用layout: false
    跳过渲染
    小圆点页面示例图

  • 若采用第二种方法,在根目录【根目录】的_config.yml添加

    1
    2
    3
    skip_render:
    - 'dot/*'
    - 'dot/**'

文章中直接嵌入HTML

  • 既然md最终会被渲染为HTML,那直接写HTML当然是可以的,但只能以文章形式展示,而不是新的页面

  • 例如我在这嵌入一个颜色表,HTML代码完整,前后换行留空即可

    颜色名十六进制颜色值颜色
    CadetBlue#5F9EA0rgb(95, 158, 160)
    Chartreuse#7FFF00rgb(127, 255, 0)
    Chocolate#D2691Ergb(210, 105, 30)
    Coral#FF7F50rgb(255, 127, 80)
    CornflowerBlue#6495EDrgb(100, 149, 237)
    Cornsilk#FFF8DCrgb(255, 248, 220)
    SteelBlue#4682B4rgb(70, 130, 180)
    Tan#D2B48Crgb(210, 180, 140)
    Teal#008080rgb(0, 128, 128)
    Thistle#D8BFD8rgb(216, 191, 216)
    Tomato#FF6347rgb(255, 99, 71)
    Turquoise#40E0D0rgb(64, 224, 208)
    Violet#EE82EErgb(238, 130, 238)
    VioletRed#D02090rgb(208, 32, 144)
    Wheat#F5DEB3rgb(245, 222, 179)
    White#FFFFFFrgb(255, 255, 255)
    WhiteSmoke#F5F5F5rgb(245, 245, 245)
    Yellow#FFFF00rgb(255, 255, 0)
    YellowGreen#9ACD32rgb(154, 205, 50)

今天先写到这吧

文章作者: 雪曦
文章链接: https://xiabor.com/2020/04/21/hexo3/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Xuexi's Blog
ღ喜欢记得五星好评哦~
赞赏
  • 微信
    微信
  • 支付寶
    支付寶

评论