Cirry's Blog

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

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

为什么会出现这个问题？

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

截取代码部分展示如下：

1
else if post.content
2

3
- var br = 0
4

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

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

9
if br<0
10

11
- break
12

13
if br >150
14

15
- break
14 collapsed lines
16

17
- }
18

19
if br < 0
20

21
.post-content
22

23
!= post.content
24

25
else
26

27
.post-content
28

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

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

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

1
<div class="post-content">
2
 <table>
3
  <thead>
4
   <tr>
5
    <th>-</th>
6
    <th>-</th>
7
</div>
8
<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来处理文档截取。