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