以下の記事で、Hugo制のサイトにブログカードリンクを埋め込む方法について紹介しました。

HugoのShortcodesでブログカードリンクを作る

先の記事に書いたとおり、Hugoは静的サイトということもあって、ブログカードに利用しているOpen Graphの情報は記事に埋め込むことにしま

ここで紹介した方法は、記事を書いた時点のOpenGraph情報を利用して静的に埋め込む方法でした。

私はEmacsで記事を書いているので、リンクしたい記事のURLからOpenGraph情報を取得し、Orgシンタックスでそれを記述する必要があります。 これはかなり面倒な作業なので、以下のようにコマンド化してみました。

OpenGraph情報を取得する「og.el」

まず、OpenGraph情報を取得する機能をpackageとして作成しました。

GitHub - tomoyukim/og.el: Get Open Graph data in a web page.

Get Open Graph data in a web page. Contribute to tomoyukim/og.el development by creating an account on GitHub.

やっていることはシンプルで、リンク対象のURLからHTMLを取得してスクレイピングしているだけです。 取得結果を格納するのに hash-table を利用しましたが、 alist でよかったかもしれません。

ox-hugoのShortcodesシンタックスにして挿入する

あとは、上記のpackageを使って取得したOpenGraphを使って以下のように ox-hugo のシンタックスで整えて挿入します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

(require 'og)
(defun my/og-link (url)
  "insert blog card link for ox-hugo"
  (interactive "sURL:")
  (let* ((og (og-get url))
	 (title (gethash "og:title" og))
	 (description (gethash "og:description" og))
	 (img (gethash "og:image" og)))
    (insert (mapconcat #'identity
		       `(
			 ,(concat "#+attr_shortcode: :url " url " :img " img " :title " title)
			 ,(concat "#+begin_card\n" description)
			 "#+end_card")
		       "\n"))))

これで、 M-x から my/og-link をすれば、ブログカードリンクを簡単に挿入できます。 必要ならkeybindingを設定してもいいかもしれません。

まとめ

簡単でしたが、EmacsでOpenGraph情報を使ったブログカードリンクを挿入する方法の紹介でした。

これで非常にリンク貼りやすくなったので、ブログを書くのが楽になりました。 ブログを続けるためにも、こうやって改善していくことが大事ですね。ちゃんと記事を書いていくぞー。