javascript

A collection of 4 posts
Improved blog search page
algolia

Improved blog search page

このブログの内容は Algolia にインデックスし Algolia API を使って検索できるようにしています。 自分の記事を見返すタイミングがしばしばあるので、その時はこれを使い Alfred ワークフローからインクリメンタルサーチして目的の記事を開いたり、あと地味にブログ内の静的ページとして検索ページを用意したりしています。 * algolia - ゆるふわキャンパー 今回はそのブログ内の検索ページを改善してみました! Before: After: 検索ページを設定してから長いこと (3 年くらい) 素朴な見た目のままだったのですが、しばらくみない間に Algolia のドキュメントが充実してきてフロントエンドさっぱりわからないマンでもなんとかチュートリアルを元にそれっぽいものができるような状態になっていたので (ありがたい 🙏) 今回検索ページの改修に踏み切ってみたのでした。 主に以下の点で改善されています。 😊 * 検索結果が大きく、見やすく表示されるようになった。 * 記事の概要を出すようにした。 * 記事のサムネイル画像を出すようにした。
2 min read
highlight.js with Ghost
ghost

highlight.js with Ghost

今までコードブロックに書いたコードのシンタックスハイライトはPrismを使っていました。 * Add syntax highlight to Ghost Prismを使うには以下の手順が必要でした。 1. テーマとハイライトしたい言語を選択して、ダウンロードボタンでprism.jsとprism.cssをダウンロードする 2. content/themes/casper/assets/js/、content/themes/casper/assets/css/以下に設置する 3. default.hbsのヘッダでファイルを読み込む このテーマのファイルをいじらなくてはいけない点に不満を持っていました(テーマをアップグレードしたり、別のテーマに変えると消失してしまうので)。 また、ハイライトを有効にする際、language-*と書かなければいけないのも若干面倒でした。 Prism自体は、見た目もきれいで好きなんですけどね...。 といわけで、少なくともヘッダに外部から読み込んで使えるようなもの(CDNでjsを提供しているところ)は無いか探したところ、hig
2 min read
Completion of Algolia in-site search box
algolia

Completion of Algolia in-site search box

Trying out Algoliaで敗北しInstall Algolia Search on Ghostで中途半端ながらにAlgoliaを使ったサイト内検索ボックスを設置してきました。 Install Algolia Search on Ghostで書いたように検索結果を強調表示してしまうがゆえに、urlにemタグが挿入されてしまうのが問題でした。 今回それが解決できたので書く! 解決方法 正規表現でemタグを除去。思いつきでjsの文字列置換があるか調べたらあった!ので、それを使った。 * String.prototype.replace() - JavaScript | MDN このように書いていたのを、 suggestion: function(suggestion) { document_root = "https://ghost.ponpokopon.me/"; slug = suggestion._highlightResult.slug.value; url = document_roo
1 min read
Install Algolia Search on Ghost
algolia

Install Algolia Search on Ghost

Trying out Algoliaでは大敗北しましたが、今回無理やり検索結果に一致したページに飛べるように半分なった!のでメモ。 やりたいこと! 検索ボックスで検索した結果としてタイトルの文字列を返したい。またそのタイトルはタイトルの記事へのリンクになって欲しい。 検索ボックスの見た目を変えたい。トップページの記事一覧のように画面に合わせてボックスの大きさを伸縮したい。また、Free版を使っているので、algoliaのロゴを検索ボックス付近に設置しなければならない。 やったこと JS * suggestion._highlightResult..valueで検索したときに返すattributeを決定できるみたいなので、検索結果に表示する文字列はsuggestion._highlightResult.title.valueで良い * ある文字列をリンクにするためにはlink()メソッドが使えそう * link先のurlはhttps://ghost.ponpokopon.me/とsuggestion._highlightResul
3 min read