/ algolia

Install Algolia Search on Ghost

Trying out Algoliaでは大敗北しましたが、今回無理やり検索結果に一致したページに飛べるように半分なった!のでメモ。

やりたいこと!

検索ボックスで検索した結果としてタイトルの文字列を返したい。またそのタイトルはタイトルの記事へのリンクになって欲しい。

検索ボックスの見た目を変えたい。トップページの記事一覧のように画面に合わせてボックスの大きさを伸縮したい。また、Free版を使っているので、algoliaのロゴを検索ボックス付近に設置しなければならない。

やったこと

JS

  • suggestion._highlightResult.<attribute>.valueで検索したときに返すattributeを決定できるみたいなので、検索結果に表示する文字列はsuggestion._highlightResult.title.valueで良い
  • ある文字列をリンクにするためにはlink()メソッドが使えそう
  • link先のurlはhttps://ghost.ponpokopon.me/suggestion._highlightResult.slug.valueを足せば作れそう
suggestion: function(suggestion) {
  document_root = "https://ghost.ponpokopon.me/";
  slug          = suggestion._highlightResult.slug.value;
  url           = document_root + slug;
  return suggestion._highlightResult.title.value.link(url);
}

上のやり方だと1つ問題がある。suggestion._highlightResult.title.valueはその名の通り検索結果に一致する文字を強調表示してくれるのだが、リンクを生成する際これが邪魔になる。具体的にはhttps://ghost.ponpokopon.me/use-map-of-<em>terra</em>form/のようにリンクにemタグが入ってしまう。

highlightしないメソッドだか関数だかはなさ気…。

CSS

  • max-widthを記事タイトルと同じ幅にした
  • widthmax-widthを下回った時の幅を指定した
    • 画像を繰り返し表示しないようにするのと、位置を右端にした
  • backgroundでalgoliaのロゴファイルを指定し、background-sizeで要素の中に画像が収まるようにした
  • 検索ボックスの角を丸くした
.algolia-autocomplete {
  max-width: 710px;
  width: 80%;
}
.aa-input {
  border-radius: 20px;
  background: url(./powered-by-algolia/Algolia_logo_bg-dark.jpg) right top no-repeat;
  background-size:contain;
}

幅の指定の仕方はghostのテーマ内の記事タイトル(articleタグ)の大きさを指定するcssを真似した。

デモ

コード全体

正しい書き方とかわからんので無理やりやった。

{{!-- algolia --}}
<style type="text/css">
  .algolia-autocomplete {
    max-width: 710px;
    width: 80%;
  }
  .algolia-autocomplete .aa-input, .algolia-autocomplete .aa-hint {
    width: 100%;
    min-height: 30px;
    text-indent: 10px;
  }
  .aa-input {
    border-radius: 20px;
    background: url(./powered-by-algolia/Algolia_logo_bg-dark.jpg) right top no-repeat;
    background-size:contain;
  }
  .algolia-autocomplete .aa-hint {
    color: #999;
  }
  .algolia-autocomplete .aa-dropdown-menu {
    width: 100%;
    background-color: #fff;
    border: 1px solid #999;
    border-top: none;
  }
  .algolia-autocomplete .aa-dropdown-menu .aa-suggestion {
    cursor: pointer;
    padding: 5px 4px;
  }
  .algolia-autocomplete .aa-dropdown-menu .aa-suggestion.aa-cursor {
    background-color: #B2D7FF;
  }
  .algolia-autocomplete .aa-dropdown-menu .aa-suggestion em {
    font-weight: bold;
    font-style: normal;
  }
</style>

<div style="text-align: center;">
  <input type="search" placeholder="Search posts" id="search-input" />
</div>
<script src="https://cdn.jsdelivr.net/algoliasearch/3/algoliasearch.min.js"></script>
<script src="https://cdn.jsdelivr.net/autocomplete.js/0/autocomplete.min.js"></script>
<script>
  var client = algoliasearch('アプリケーションID', 'APIキー')
  var index = client.initIndex('作成したIndex名');
  autocomplete('#search-input', { hint: false }, [
    {
      source: autocomplete.sources.hits(index, { hitsPerPage: 7 }),
      templates: {
        suggestion: function(suggestion) {
          document_root = "https://ghost.ponpokopon.me/";
          slug          = suggestion._highlightResult.slug.value;
          url           = document_root + slug;
          return suggestion._highlightResult.title.value.link(url);
        }
      }
    }
  ]).on('autocomplete:selected', function(event, suggestion, dataset) {
    console.log(suggestion, dataset);
  });
</script>

今後の目標

  • 検索結果のリンクにemタグが入らないようにする
  • algoliaのデータをcronとかで自動更新できるようにする
  • 検索結果をスクロールするようにしたい
  • ちゃんとjavascript理解する

参考リンク