Improved blog search page
このブログの内容は Algolia にインデックスし Algolia API を使って検索できるようにしています。
自分の記事を見返すタイミングがしばしばあるので、その時はこれを使い Alfred ワークフローからインクリメンタルサーチして目的の記事を開いたり、あと地味にブログ内の静的ページとして検索ページを用意したりしています。
今回はそのブログ内の検索ページを改善してみました！
Before:
After:
検索ページを設定してから長いこと (3 年くらい) 素朴な見た目のままだったのですが、しばらくみない間に Algolia のドキュメントが充実してきてフロントエンドさっぱりわからないマンでもなんとかチュートリアルを元にそれっぽいものができるような状態になっていたので (ありがたい 🙏) 今回検索ページの改修に踏み切ってみたのでした。
主に以下の点で改善されています。 😊
- 検索結果が大きく、見やすく表示されるようになった。
- 記事の概要を出すようにした。
- 記事のサムネイル画像を出すようにした。
- 記事の投稿日時を出すようにした。
- 検索結果の数、検索にかかった時間を出すようにした。
以前よりはだいぶ使いやすくなったと思うのですが、PC やタブレット環境のようにある程度画面が広い場合は良いのですがスマホ等画面が小さい場合は表示が崩れる場合がありよくわからん。あと日本語入力する場合は変換確定前に検索が終了してしまい微妙な検索結果になる場合もあり、ページネーションの挙動も怪しい等細かい問題はまだある。
単体の HTML ファイルでまずは作ってみていて、そこでは何も問題ないのですが Ghost の静的ページに埋め込む際にタグか何かと競合して？おかしくなるっぽい。
でもとりあえずは満足したのでしばらくはこのままかな…。 😇