之前在使用这个主题的时候，就发现如果在文章开头插入代码块，在渲染的时候会让整个首页样式异常，但是当时没有深究这个问题，也认为在文章第一行就写代码块确实不太优雅。
现在有点空闲时间了准备给主题修修 bug，又发现有人提这个问题，就正好研究一下。
为什么会出现这个问题？#
随意新建一个index.md文档，在文章开头随意插入一段 markdown 的表格语法后，渲染页面就会出现样式问题。打开控制台，在 source 中，查看 index.html 页面，可以看到，关于表格的 html 的标签没有被正确的封闭。
截取代码部分展示如下：
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 网页内容部分展示如下：
<div class="post-content">
<table>
<thead>
<tr>
<th>-</th>
<th>-</th>
</div>
<p class="readmore"><a href="/2020/01/21/hexo/hexo/">Read More</a></p>
解决思路#
关于这个问题，我想了几个方案。
只展示文字#
将博文处理成文字，遇到代码块，或者图片都直接忽略。然后截取部分文字作为摘要展示。
封闭未完全封闭的标签#
将被截断的 html 标签通过算法补齐。这个功能我在修改 bug 的时候已经实现了这个功能，但是发现并没有想象中的那么好用。比如 table 标签可能会在一行内容都没有展示的时候就被封闭起来。也有可能一个五行的 table 列表，只能展示一行出来，点进去之后发现还有好几行。不错的视觉效果就是图片、代码块都可以作为摘要展示出来了。
未封闭则继续向下匹配#
这个思路是，如果一个标签在当前截取行没有正确的封闭，就往下一行继续匹配，一直到文章完全匹配到封闭标签。这个功能，我在改 bug 的时候也基本上实现了，但是发现了更多的问题，比如 img，br，a 标签是单标签，或者可能会一直匹配到文章结尾才能正确的封闭标签。另外，用正则来匹配 html 标签相当麻烦，我还没有找到一个正确的规则，可能还需要继续学习，不过也有人说正则没办法匹配 html。
最终解决办法#
后来我在参考其他主题的做法的时候，可能真的只展示文字是个比较不错的做法。使用 hexo 提供辅助函数strip_html来处理文档截取。