Hexoでブログカードリンクを有効にする

Wordpressやはてなブログなどでは内部リンク等を貼ったときにカード形式でリンクが表示されます。

こんなの
IMAGE

外部リンクも含めて、ただの文字列だけのリンクだとそっけないので、Hexoでもできないかと調べてみました。

すると、プラグインとして提供されていました。

hexo-tag-link-preview

導入方法

以下コマンドでインストールします。

1
% npm install hexo-tag-link-preview

CSS設定

デザインはCSSをいじることで好きなようにカスタムできます。

themes/icarus/source/css/style.stylを編集します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.link-preview
color: #1b1b2e
display: block
.link-area
display: flex
margin: 1em 0
padding: .5em
border: 1px solid #c2c2c2
.descriptions
margin: 0 .5em
overflow: hidden
img
max-width: 75px
.og-title
margin-bottom: .3em
line-height: 1.7em
.og-description
margin-top: .2em
font-size: .8em
line-height: 1.5em

表示してみる

1
{% linkPreview https://github.com/ppoffice/hexo-theme-icarus _blank nofollow %}

上記のように書くだけで

IMAGE

このように表示されます。

もうちょっとデザインよくしたいですね。

共有