Web猫ブログ
外部リンクの表現をリッチにします
外部リンクの表現をリッチにします
06月 25日

Web猫ブログとは

フロントエンドにVue.jsのフレームワークの一つNuxt.jsを、Headless CMSの一つであるContentfulを採用しています。見えない裏側で Travisを使った自動化、Graphcool (GraphQL)やFirestoreも入っています。

https://webneko.info/

@microlink/vanilla をインストール

Markdown中のリンクをリッチな表現として使える @microlink/vanillaです。

@microlink/vanilla

# @microlink/vanilla
yarn add @microink/vanilla

Dependency Injectionを利用します

Nuxtでは Dependency Injectionを使えるので、以下のような Pluginを利用できるように準備します。

const microlink = require('@microlink/vanilla/umd/microlink');

export class MicrolinkPlugin {
  microlinkjs: string = '';

  constructor() {
    this.microlinkjs = microlink
  }
}

export default ({ app }, inject) => {
  inject('microlinkjs', (selector => microlink(selector)))
};

nuxt.config.tsで事前に準備したファイルを設定します。

module.export = {
    plugins: [
        '~plugins/microlink.ts'
    ]
};

ライフサイクルからアプローチします。

リッチな表現を使う前提として、データを読み込んだ後に装飾されます。

export default Vue.extend ({
    mounted() {
        this.$microlinkjs('.link-preview')
    }
})

Markdown中でこう使う!

指定のリンクに link-preview タグを設定するとリッチな表現として表示されるようになります。

<a class="link-preview" href="#"></a>

microlink-demo

コメントを残す