Hexo 博客自定义一个不使用主题模板渲染的独立页面

2024-05-14 04:46:58

Hexo 是一个轻量、快速，简单和强大的博客框架，当我们需要发布博文的时候，只需要将写好的文章（MarkDown文件）放入本地的 \source\_posts 文件夹，然后再推送上去就行了，原理就是当我们在执行 hexo g 命令时，.md 文件就会被转化成 HTML 文件，但是有时候我们需要新建一个独立的页面，这个页面不使用主题的渲染，具有自己独立的样式，可以放一些自己的作品，相册什么的，以下就介绍这种独立页面的实现方法。

方法一：

使用 Hexo 提供的跳过渲染配置，在博客根目录的配置文件 _config.yml 里找到 skip_render 关键字，在后面添加想要跳过渲染的页面，比如我们创建 \source\about\index.html，配置文件填写：skip_render: about\**，那么就表示 \source\about 里所有的文件将跳过渲染，里面的文件将会被直接复制到 public 文件夹，此时就会得到一个独立的 about 页面；官方文档：https://hexo.io/docs/configuration

方法二：

在文章头部的 Front-matter 里添加配置 layout: false 来跳过渲染配置，比如我们要使 about 页面跳过渲染，创建 \source\about\index.md，将这个页面的相关 HTML 代码写进.md文件并保存，然后在 index.md 的头部写入：

---
layout: false
---
{% raw %}
xxxxxxxxxxxxx
xx HTML代码 xx
xxxxxxxxxxxxx
{% endraw %}

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

效果以我的博客主页和关于页面为例：

Hexo 博客自定义一个不使用主题模板渲染的独立页面相关推荐

小灯泡自媒体博客Spimes4.6收费typecho主题模板无加密无授权源码
源码下载:小灯泡自媒体博客Spimes4.6收费typecho主题模板无加密无授权源码-小程序文档类资源-CSDN下载 Spimes主题专为博客.自媒体.资讯类的网站设计开发,自适应兼容手机.平板设备 ...
Windows下使用GitHub Pages搭建hexo博客详细教程以及Next主题超全配置
根据下面的教程搭建的博客见这里前言马上要进入研究生了,不能再过浑浑噩噩的日子了,搭建一个小网站,用于记录自己所学的东西.其实,之前在腾讯云1元乞丐版上也搭建过博客,但是呢,只用来扯淡了.这次使用 ...
Hexo博客进阶：为Next主题添加Valine评论系统
文章目录前言根据读者反馈,Valine 评论系统在 Next 主题高版本 (7.+) 以上没有内置,且 Valine 已经很久没有更新维护了.如果想要配置体验 Valine 的,建议使用 Next ...
向Hexo博客添加微博秀（pug模板）
目的本文是一个详细的教程,告诉大家如何在Hexo博客中嵌入微博秀或者微博直播组件. 为什么要向博客中添加微博秀/微博直播组件? 微博秀是什么新浪微博秀,可以放置在你的博客.网站,或是其它支持htm ...
Hexo博客优化：在Next主题中设置进阶版Live2D看板娘————拒绝踩坑！！！！
最初级的用法使用官方包安装,安装非常简单,但效果一般 hexo live-2d地址:https://github.com/xiazeyu/live2d-widget-models git命令行中输入 ...
WordPress博客|自定义一个可爱的鼠标样式
挑选自己心仪的鼠标样式首先打开custom-cursor,里面有老多有趣的鼠标样式点我去我的博客查看设置效果! 戳我戳我! 挑选一个你喜欢的鼠标样式因为我们不是给电脑设置,所以我们得获取两张透明 ...
hexo博客添加标签、分类、归档、关于等页面
写在前面在使用主题后,顶部导航多出了标签页.分类页.归档页和关于页等界面,点击之后出现了"Cannot GET /XXX/"问题,这是因为我们没有添加对应的页面,本文章主要描述了 ...
小灯泡自媒体博客Spimes4.6/收费typecho主题模板无加密无授权源码
☑️ 编号:ym353 ☑️ 品牌:typecho ☑️ 语言:php ☑️ 大小:19MB ☑️ 类型:自媒体博客 ☑️ 支持:pc+wap
Hexo 博客优化之实用功能添加系列（持续更新）
2022-01-25 更新:博客新地址:https://www.itbob.cn/,文章距上次编辑时间较远,部分内容可能已经过时! 本文将讲述一些 Hexo 博客实用功能的添加,本文以作者 luuma ...

最新文章

热门文章