Fluid+自定义html

本文最后更新于：2020年6月29日 中午

写在前面

Hexo博客通常都是用markdown来编辑内容，当然使用html和css来输出页面也没多大问题，但通常都是不带主题样式的，这样的页面与博客不搭，下面我给出一种简单的折中方法。

html文件设置

.html只保留body内容，去掉head部分。如：

<body>
  <h1 class="main"> 一级标题 </h1>
  ......
  <link rel="stylesheet" href="main.css">
</body>
  • 这样的html文件经过hexo g渲染后得到的页面与markdown渲染得到的页面相似。
  • 如果需要加入css或js，需要在结尾部分添加，若在开头部分添加会被吞掉（不知道为什么）。
  • 文件不要放在post文件夹下，后面会提到这一个问题。在source文件夹新建一个文件夹，下面以html-file文件夹为例。
  • 在配置文件下如果对html-file文件夹设置skip_render，即
skip_render: 
  - html-file/*.html

那么hexo g渲染就会跳过html-file文件夹下所有的html文件，public\html-file文件夹下的源码是原格式输出，那么页面就不会带有Hexo的主题样式。

  • 如果不进行上一步，对html-file文件夹的html文件渲染，如果不存在冲突或问题下，得到的页面会带有主题，不过标题不会设置。
  • Fluid主题中每个页面的标题是通过打字机typing显示，这个没法在body里设置，所以渲染后页面标题是默认的page.title。

展示

  • 渲染
  • 未渲染

html添加head

开始步骤里的仅保留body部分，如果不按照这一设置，会出现双重叠加的效果，例如直接将上面demo的渲染html再进行渲染一遍，出现了bug

在post文件夹下

设置post_asset_folder:true后，通常post文件夹下markdown的同名文件存放图片、pdf等相对引用文件，如果加入html文件，会出现惊喜。下面以demo.html为例。

  • html会作为新的post出现在主页上，标题是.md+/+.html的组合。
  • 设置链接形式permalink: posts/:abbrlink/后，渲染后会自动生成一个新的链接来访问这个demo.html。
  • 直接访问和短链接的区别与未渲染和已渲染的区别一致。
  • 以短链接访问demo.html
  • 相对路径访问demo.html

所有展示的链接

自定义html的Front-matter设置

之前提到无法在html里设置类似于markdown的配置（见html文件设置），突然发现，html的和markdown的配置一样，在html文件首部添加类似于Front-matter，如下

---
urlname: html-in-Fluid-demo
title: 自定义html-demo
date: 2020-06-19 22:00:00
excerpt: 博客『自定义html』下的demo。
---

其中第一条urlname是permalink里设置的，如果用的abbrlink则改为相应的配置。这样，渲染后html会显示手动设置的标题、时间、摘要、分类、标签等等信息。

小结

  • 将html文件放在post文件夹下渲染存在很多没必要的麻烦。

  • 个人推荐第一种方式进行渲染html，除了标题没法在body里设置。（也可以手动设置）

  • <iframe></iframe>里展示未渲染的页面效果更佳，因为渲染的叠在post里看着很突兀。

博客技术
Fluid

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！