解决 WordPress 微信小程序文章内代码显示、图片非 CDN 地址、图片附带链接的问题

代码显示

首先说一下代码显示的问题吧，我博客用的是修改后的 PureHighlightJs 插件来语法高亮的，因此代码使用的是“

”标签。结果经过 wxParse 解析后在小程序中变为一行。经过一段时间的调试分析后发现应该是把“

”作为一层，里面的所有内容就变为这一层里的了，因此换行啥的也都不起作用了。当时想到直接修改文章，可是这样成本太大了，一修改代码语法高亮就没了；然后又想到修改 API，让微信获取到不带“

”标签的文章内容，这样就要修改 WordPress 自带的 REST 功能了，有点复杂，像我这种小白搞不了；接着就想能不能修改 wxParse 工具呢，看了 GitHub 上该项目后发现作者已经不再支持了，文档啥的也都不全面，这条也不行；最后呢，我想可不可以修改微信请求 API 后获取到的响应呢？研究了一波模板后发现得到的响应就是一个字符串，然后将该字符串传递给 wxParse 解析为 json，这就给修改提供了可能。原来的函数（在pages/detail/detail.js中）是这样的：

其中第10行的代码就是将得到的响应中的文章内容部分（）传递给 wxParse ，我的思路呢，就是用 replace 函数将字符串中的“

”标签给替换掉。怎么得到响应的具体内容呢？可以用微信开发者工具调试界面的“Network”部分，当小程序进入某一篇文章时，会有一个以文章 ID 为名的请求（例如“https://blog.sunriseydy.top/wp-json/wp/v2/posts/1055”），得到的响应就是文章的相关数据，在“content”的“rendered”中就是文章的内容，这里我以刚才的那个请求为例，响应内容其中一部分是这样的：

重点就是文章代码部分：

可以看到代码是在“

”标签中的，其中某些特殊字符被转义掉了，接下来就是要用正则表达式来匹配“

”了，具体的写法如下：

经过这两次替换，不论你“

”和“”中的属性是啥，都会被匹配并被替换为空字符。

可是呀，将“

”标签去掉后在小程序中代码还是显示为一行，“”标签中的换行并没有被解析，因此，我们还要做一次替换，将“”标签中的“\r\n”替换为“

\n

”，为什么要替换为这个呢？观察之前的响应内容中发现文章中所有的换行都是“

\n

”，而代码中的换行都是“\r\n”。因此要在之前的替换语句后再加一个：

后面的“(?!)”主要是防止代码最后一行和“”之间的换行也被替换，避免了在小程序中代码最后一行和下面的内容隔了两行（因为“”后面紧跟着一个换行，不需要“”前的换行了）。

还有要注意的是，如果你文章代码中的换行不是“\r\n”的话要对上面的正则表达式进行修改。

这样子修改之后小程序中的代码显示效果就是这样的：

虽然不能做到横向滑动，不过这样子也勉强可以，毕竟要引导用户到原文阅读。

图片问题

图片问题有点多，最主要的就是小程序文章中获取到的图片地址是博客地址而不是 CDN 的，我原本想更改原作者的插件 API ，将图片的地址换为 CDN 的，研究了几天 PHP 和 WordPress 的函数也没搞懂，最后还是在小程序端做文章，同样是替换响应的文章内容，在上一部分代码问题的替换代码中后面再加上一个 replace 函数：

这里我说明一下，我原来的图片地址是 src=“https://blog.sunriseydy.top/*******”，而 CDN 地址是“https://cdn.sunriseydy.top”，因此我的只要将“blog”替换为“cdn”就行了。你的不一定是这样，要更改为相应的正则表达式，提醒一下，注意观察响应内容中的地址是什么样子的。

还有一个问题就是 WordPress 文章添加图片时默认附带了一个链接，链接到图片地址，在守望轩微信小程序模板中链接是有点击复制或者点击打开的动作的，对于图片，如果附带了链接，那么用户在点击的时候不仅预览了图片，也复制或者打开了图片地址。为了避免这个问题，就要去掉图片附带的链接。方法呢，还是用正则表达式替换：

这样子就将“”标签前的“

”和后面的“

”给去掉了。

总结

这里给出我最终修改后的函数：

记住，不要直接复制，我写这篇文章的原因就是想说清其中的原理，我也是照着正则表达式的教程折腾了好几个晚上，要一点一点地去测试。

好啦，结束啦