HTML 处理利器 PostHTML 入门教程
发布网友
发布时间：2024-09-17 03:38
共1个回答
热心网友
时间：2024-09-30 21:00
先来尝试一下PostHTML的基本功能。以下是一个HTML文档的例子：
段落中包含了一些emoji表情的文本表示，如:speak_no_evil:等。如何将其转换成网页上可以直接显示的表情呢？我们可以借助PostHTML的插件PostHTML-Retext来实现：
执行以上代码后，原始的HTML将被替换成如下样式：
如果看不到表情，可能是你的系统不支持。点击看图。原来是知乎不支持 ~~~~(>_<)~~~~
现在应该明白PostHTML的功能了——它是一个HTML处理器，输入HTML，经过一系列修改，输出新的HTML。
你可能想知道，这种替换功能我也能用正则表达式完成，那PostHTML的优势在哪里呢？
PostHTML之于HTML，就像PostCSS之于CSS，Uglify之于JavaScript，除了插件体系还不够成熟以外。
PostHTML相当于一个汽车翻新工厂，而PostHTML插件就像一个个流水线车间：
可见，PostHTML并不提供具体的功能，仅仅实现了HTML和PostHTMLTree之间的互相转化，并提供通用的API和插件模型，让插件操作PostHTMLTree。这与PostCSS如出一辙。具有以下优点：
如何使用PostHTML？安装PostHTMLAPI
posthtml([Array(plugin)])：调用posthtml装载插件，获取PostHTML实例；
posthtml().use(Array(plugin))：也可以通过PostHTML实例的use方法来装载插件；
posthtml().use(…).process(html[, options])：插件装载好之后，就可以使用process来处理HTML文档了。
实例
以下是来自官方的例子。
通过use方法装载了posthtml-custom-elements插件，就可以将自定义组件myComponent转换为。
gulp插件
posthtml也可以在gulp中使用。安装gulp插件gulp-posthtml：
使用：
如何编写PostHTML插件？
PostHTML的插件本质上就是一个函数，接受一个参数，即PostHTML工厂处理好的PostHTMLTree，插件要做的就是对这个tree进行修改。
PostHTML提供了两个方法来遍历tree：
下面是一个简单的插件：
这个插件会对影响HTML中的img标记产生影响，例如，有段HTML为：
使用了这个插件后：
很简单不是，是时候发挥你的聪明才智了，动手写一个插件来满足自己的需求吧！
提示：在使用match或者walk方法遍历tree时，如果callback没有返回值的话，当前的node就相当于被删除了。也就是说，如果你想移除某些节点，只需让callback不返回值或者返回undefined即可。暂时不能返回null，报错，为此我提交了一个PR。
如何与模板引擎结合使用？
PostHTML作为HTML处理器，自然可以与jade或者ejs之类的模板引擎结合使用。jade和ejs在处理业务逻辑、拼装业务数据方面有自己的优势，而PostHTML可以更多地用来处理这些模板引擎产生的HTML，比如压缩HTML代码等等。
下面这个例子来自PostHTML上的一个PR：
后记
PostHTML初出茅庐，在Github star也只有214，但相信不久的将来PostHTML也会像PostCSS一样横扫整个HTML处理器的世界。我也着手编写一个PostHTML插件posthtml-web-component，用来实现服务器端的动态化组件。欢迎关注。
热心网友
时间：2024-09-30 20:56
先来尝试一下PostHTML的基本功能。以下是一个HTML文档的例子：
段落中包含了一些emoji表情的文本表示，如:speak_no_evil:等。如何将其转换成网页上可以直接显示的表情呢？我们可以借助PostHTML的插件PostHTML-Retext来实现：
执行以上代码后，原始的HTML将被替换成如下样式：
如果看不到表情，可能是你的系统不支持。点击看图。原来是知乎不支持 ~~~~(>_<)~~~~
现在应该明白PostHTML的功能了——它是一个HTML处理器，输入HTML，经过一系列修改，输出新的HTML。
你可能想知道，这种替换功能我也能用正则表达式完成，那PostHTML的优势在哪里呢？
PostHTML之于HTML，就像PostCSS之于CSS，Uglify之于JavaScript，除了插件体系还不够成熟以外。
PostHTML相当于一个汽车翻新工厂，而PostHTML插件就像一个个流水线车间：
可见，PostHTML并不提供具体的功能，仅仅实现了HTML和PostHTMLTree之间的互相转化，并提供通用的API和插件模型，让插件操作PostHTMLTree。这与PostCSS如出一辙。具有以下优点：
如何使用PostHTML？安装PostHTMLAPI
posthtml([Array(plugin)])：调用posthtml装载插件，获取PostHTML实例；
posthtml().use(Array(plugin))：也可以通过PostHTML实例的use方法来装载插件；
posthtml().use(…).process(html[, options])：插件装载好之后，就可以使用process来处理HTML文档了。
实例
以下是来自官方的例子。
通过use方法装载了posthtml-custom-elements插件，就可以将自定义组件myComponent转换为。
gulp插件
posthtml也可以在gulp中使用。安装gulp插件gulp-posthtml：
使用：
如何编写PostHTML插件？
PostHTML的插件本质上就是一个函数，接受一个参数，即PostHTML工厂处理好的PostHTMLTree，插件要做的就是对这个tree进行修改。
PostHTML提供了两个方法来遍历tree：
下面是一个简单的插件：
这个插件会对影响HTML中的img标记产生影响，例如，有段HTML为：
使用了这个插件后：
很简单不是，是时候发挥你的聪明才智了，动手写一个插件来满足自己的需求吧！
提示：在使用match或者walk方法遍历tree时，如果callback没有返回值的话，当前的node就相当于被删除了。也就是说，如果你想移除某些节点，只需让callback不返回值或者返回undefined即可。暂时不能返回null，报错，为此我提交了一个PR。
如何与模板引擎结合使用？
PostHTML作为HTML处理器，自然可以与jade或者ejs之类的模板引擎结合使用。jade和ejs在处理业务逻辑、拼装业务数据方面有自己的优势，而PostHTML可以更多地用来处理这些模板引擎产生的HTML，比如压缩HTML代码等等。
下面这个例子来自PostHTML上的一个PR：
后记
PostHTML初出茅庐，在Github star也只有214，但相信不久的将来PostHTML也会像PostCSS一样横扫整个HTML处理器的世界。我也着手编写一个PostHTML插件posthtml-web-component，用来实现服务器端的动态化组件。欢迎关注。
