Cirry's Blog

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

2022-09-23
hexo
最后更新:2024-03-29
4分钟
740字

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

现在有点空闲时间了准备给主题修修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来处理文档截取。

本文标题:关于maupassant主题显示文章异常的一些思考
文章作者:Cirry
发布时间:2022-09-23
版权声明:本作品采用「署名-非商业性使用-相同方式共享 4.0 国际」许可协议进行许可。
感谢大佬送来的咖啡☕
alipayQRCode
wechatQRCode