以前、このテーマを使用していると、記事の先頭にコードブロックを挿入すると、レンダリング時にホームページ全体のスタイルが崩れることがわかりましたが、その問題については深く追求せず、記事の最初の行にコードブロックを書くことは確かにエレガントではないと考えました。
今、少し時間があるので、テーマのバグを修正しようと思い、この問題を調べてみました。
なぜこの問題が発生するのか？#
適当なindex.mdドキュメントを作成し、マークダウンのテーブル構文をランダムに挿入すると、ページのレンダリングにスタイルの問題が発生します。コンソールを開き、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' を切断点として、5 行のコードを切り取りますが、これにより 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 タグをアルゴリズムを使用して補完します。この機能は、バグ修正中に既に実装しましたが、想像していたほどうまくいきませんでした。たとえば、table タグは、内容が一行も表示されない場合にも閉じられる可能性があります。また、5 行の table リストの場合、1 行しか表示されず、クリックして中を確認すると、まだいくつかの行があることがわかります。良い視覚効果は、画像やコードブロックが要約として表示されることです。
閉じられていない場合は次の行と一致させる#
このアイデアは、現在の切り取り行においてタグが正しく閉じられていない場合、次の行に一致させ続け、記事全体が閉じられたタグに一致するまで続けるというものです。この機能は、バグ修正中にほぼ実装しましたが、さらに多くの問題が発生することがわかりました。たとえば、img、br、a タグは単一のタグであるか、または記事の終わりまで一致させる必要があるかもしれません。また、HTML タグを正規表現で一致させるのは非常に面倒ですが、正規表現では HTML を一致させることはできないと言われています。
最終的な解決策#
後で他のテーマの方法を参考にすると、テキストのみ表示するのが比較的良い方法かもしれません。strip_htmlという hexo が提供するヘルパー関数を使用してドキュメントを切り取ることができます。