关于maupassant主题显示文章异常的一些思考

之前在使用这个主题的时候，就发现如果在文章开头插入代码块，在渲染的时候会让整个首页样式异常，但是当时没有深究这个问题，也认为在文章第一行就写代码块确实不太优雅。

现在有点空闲时间了准备给主题修修 bug，又发现有人提这个问题，就正好研究一下。

为什么会出现这个问题？

随意新建一个index.md文档，在文章开头随意插入一段 markdown 的表格语法后，渲染页面就会出现样式问题。打开控制台，在 source 中，查看 index.html 页面，可以看到，关于表格的 html 的标签没有被正确的封闭。

截取代码部分展示如下：

Copy
else if post.content

- var br = 0

- for (var i = 0; i < 5; ++i) {

- br = post.content.indexOf('\n',br+1)

if br<0

- break

if br >150

- break

- }

if br < 0

.post-content

!= post.content

else

.post-content

!= post.content.substring(0, br)

从代码中可以看出来是以 '\n' 为截断点，截取五行代码，而这五行代码正好会把 table 标签截断。

截取后的 html 网页内容部分展示如下：

Copy




-
-

Read More

解决思路

关于这个问题，我想了几个方案。

只展示文字

将博文处理成文字，遇到代码块，或者图片都直接忽略。然后截取部分文字作为摘要展示。

封闭未完全封闭的标签

将被截断的 html 标签通过算法补齐。这个功能我在修改 bug 的时候已经实现了这个功能，但是发现并没有想象中的那么好用。比如 table 标签可能会在一行内容都没有展示的时候就被封闭起来。也有可能一个五行的 table 列表，只能展示一行出来，点进去之后发现还有好几行。不错的视觉效果就是图片、代码块都可以作为摘要展示出来了。

未封闭则继续向下匹配

这个思路是，如果一个标签在当前截取行没有正确的封闭，就往下一行继续匹配，一直到文章完全匹配到封闭标签。这个功能，我在改 bug 的时候也基本上实现了，但是发现了更多的问题，比如 img，br，a 标签是单标签，或者可能会一直匹配到文章结尾才能正确的封闭标签。另外，用正则来匹配 html 标签相当麻烦，我还没有找到一个正确的规则，可能还需要继续学习，不过也有人说正则没办法匹配 html。

最终解决办法

后来我在参考其他主题的做法的时候，可能真的只展示文字是个比较不错的做法。使用 hexo 提供辅助函数strip_html来处理文档截取。