検索結果ページで該当キーワードをハイライト表示させる

a-blog cmsでは、cmsでの検索結果ページで検索キーワードにマッチしている文字列をハイライト表示する設定が標準で実装されています。（v1.2.1より）
この設定をおこなうと、検索キーワードにマッチした文字列に独自のスタイルを設定することができるため、検索結果内のどこに検索キーワードがマッチしているのかが分かりやすいというメリットがあります。

---

---

検索結果ページで該当キーワードをハイライト表示させる

1. 設定の編集

この機能の設定は、/js/acms/config.jsの以下の箇所にあります。設定を変更する場合は、適用しているテーマ内にJavaScriptファイルを別途作成してください。詳しくは「組み込みのJavaScriptの設定を編集する」を参照してください。

    // 検索ワードのハイライト
    searchKeywordHighlightMark  : '.entry, .entryTitle',
    searchKeywordMatchClass     : 'highlight',

searchKeywordHighlightMark	検索結果ページで、ここで指定したセレクタ内に検索ワードが含まれているときに、該当部分がハイライトします。「.entry」の場合は、class="entry" の要素内に検索ワードが含まれていたらハイライトします。
searchKeywordMatchClass	ハイライト部分に付与されるclass名です。ドット「.」なしで指定します。

2. HTMLとCSSの編集

HTML

config.jsで指定したクラスをHTMLに記述します。

例）「.entry」を指定した場合
検索対象：

<div class="entry"><p>いろはにほへと</p></div>

検索キーワード：「いろ」「ほへ」
検索結果：

<div class="entry">
<p><span class="highlight1">いろ</span>はに<span class="highlight2">ほへ</span>と</p></div>

項目1の内容で指定した場合、class="entry"のあるdivが検索対象となり、検索キーワードにマッチしている文字列がある部分に自動でハイライト表示のスタイルが付与されます。

CSS

ハイライト表示のスタイル指定はCSSで以下のように記述します。

例）

/* ハイライト */
.highlight1 {
    color: #000;
    background: #ffff66;
}
.highlight2 {
    color: #000;
    background: #a0ffff;
}
.highlight3 {
    color: #000;
    background: #99ff99;
}
.highlight4 {
    color: #000;
    background: #ff9999;
}
.highlight5 {
    color: #000;
    background: #ff66ff;
}
.highlight6 {
    color: #000;
    background: #880000;
}

検索結果から移動したページにもハイライト表示をする

検索結果でマッチしたページへのリンクに、「/keyword/%{KEYWORD}/」と記述するとURLコンテキストに検索キーワードの情報が引き継がれ、移動した先のページにも該当キーワードをハイライトすることができます。

例）検索結果ページのエントリーサマリーの一部分

<h3><a href="{url}/keyword/%{KEYWORD}/">{title}</a></h3>
<p>{summary}[trim(171, '...')]</p>
<p><a href="{url}/keyword/%{KEYWORD}/">{url}[trim(60, '...')]</a></p>

---