algolia

Install Algolia Search on Ghost

Lorentzca

Sep 23, 2016 • 3 min read

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しないメソッドだか関数だかはなさ気…。

autocomplete.js

CSS

max-widthを記事タイトルと同じ幅にした
widthでmax-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を真似した。

Casper/screen.css at master · TryGhost/Casper · GitHub

デモ

コード全体

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

{{!-- 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理解する