抱歉,您的浏览器无法访问本站
本页面需要浏览器支持(启用)JavaScript
了解详情 >

当我们想在自己用Hexo搭建的博客页上展示前端代码的效果时,总会遇到麻烦:有时候hexo的主题样式会优先显示。如果我们能写完全的html网页多好呢!

文件夹准备

在hexo的source文件夹下创建一个存放这些html页面的文件夹,如我创建的是HTML文件夹,如图。

创建文件夹

在该文件夹里编写html文件。

编写html文件

使hexo对该文件夹下的文件不进行渲染

在主题的或hexo的_cofig.yml中修改skip_render项(若(主题的)_config.yml中没有这一项,在合适的地方添加即可)。在skip_render:后面加上要跳过渲染的文件夹名称(这里还是以文件夹名称为HTML为例)。

修改方式有几种:

skip_render: HTML/xxxx.html
只跳过该文件的渲染

skip_render: HTML/*
单个文件夹下的全部文件

skip_render: HTML/*.html
该文件夹下某一类型的全部文件

skip_render: HTML/**
该文件夹下的全部子文件夹和文件

skip_render:
- 'HTML1/*.html'
- 'HTML2/**'
多个文件夹或其它复杂情况

以上修改中,若写为单行(1~4的情况),则不需要加引号。写为多行(5)的情况,则需要加引号,单引号双引号均可。

另外,单行的也可以写成多行的便于以后增添或删除,注意添加引号,如情况2也可以写作:

skip_render:
- 'HTML1/*'

查看效果

使用hexo clean,hexo s命令开启本地服务器。地址栏输入相应的网址打开网页查看效果。在本例中,html文件在source文件夹下HTML文件夹下,因此网址是http://localhost:4000/HTML/test.html。

使用

首先明确,这样做完以后,hexo d部署以后,在互联网上只能通过输入url的方式打开这个页面(将http://localhost:4000替换成你相应的域名),为了更便于阅读,以前端代码为例,我大致总结出几种使用方式。

1.在一篇文章写原理和代码,插入超链接展示效果

2.在一篇文章中,使用iframe标签展示效果

请参考iframe标签

效果大致是这样的:

3.在hexo顶端栏目中添加传送门

就像首页、归档、友链这些东西一样

评论

评论区不是无人区喵