当我们想在自己用Hexo搭建的博客页上展示前端代码的效果时,总会遇到麻烦:有时候hexo的主题样式会优先显示。如果我们能写完全的html网页多好呢!
文件夹准备
在hexo的source文件夹下创建一个存放这些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标签展示效果
效果大致是这样的:
3.在hexo顶端栏目中添加传送门
就像首页、归档、友链这些东西一样