之前在使用這個主題的時候，就發現如果在文章開頭插入程式碼區塊，在渲染的時候會讓整個首頁樣式異常，但是當時沒有深究這個問題，也認為在文章第一行就寫程式碼區塊確實不太優雅。
現在有點空閒時間了準備給主題修修 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來處理文件截取。