【Hugo】Hugoショートコードとaws lambdaでブログカード埋め込み

thumbnail for this post

aws lambdaの記事で指定したブログのメタタグをjson形式で取得できるようになりました。今回は、このjson情報を利用してブログカードをこのブログに埋め込んでみたいと思います。

好きなブログをいつでも埋め込めるようになる

人の記事で人気取りしようとしてるの?

Hugoとショートコード

Hugoは静的サイトジェネレータと呼ばれるアプリケーションの一種で、「マークダウン形式」でかかれたテキストファイルをhtmlファイルに変換してくれるブログ生成アプリです。

og_title
The world’s fastest framework for building websites
The world’s fastest framework for building websites

さっそくブログカード使ってみた!

調子にのってんな

このHugoには「ショートコード」というプラグイン機能があって自作も可能になってます。例えば「twitter xxxx」って書いてあるところをツイッターの画面に書き換える機能などがショートコードで実装されています。

今回はこのショートコード機能を使って「bcard url」と書くとurlのページをブログカードとして貼り付けてくれるようなショートコードを作ります。

Hugoショートコードプログラミング

ショートコードの呼び出し方、作り方を順に見ていきましょう。

ショートコード呼び出し側の書き方

例えば以下のように記事のファイルに書いて呼び出します。

{{ < bcard "https://enjoyall.comichi.com/access_up3/index.html" >}}
bcard : ショートコード名
"http….” : パラメータ(貼り付けたいブログのurl)

注:上のコードはHugoにショートコードと認識されないように{{の後に全角スペースを入れています

ショートコード作成場所

ショートコードを書く場所ですが、layoutディレクトリの下のshortcodeディレクトリになります。
ファイル名は呼び出す時のコード名と同じにします。(今回はbcard)

.
└─layout 
      └─ shortcodes
             └─ bcard.html

bcard.html

このコード内で前回のaws lambdaの記事で作ったAPIを呼び出して、取得したjsonをhtmlにフォーマットしています。

{{ $aws_api_url := "前回のaws APIのアクセスポイントURL&url=" }}
{{ $req_url := .Get 0 }}
{{ $meta_data := getJSON $aws_api_url $req_url }}

<style type="text/css">
.heisakuCard {min-height:90px;width:auto;border: solid 1px #aaa;padding: 10px;box-sizing:content-box;position: relative;}
.heisakuCard:after {content:"";clear:both;display:block;}
.heisakuCard a {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
.heisakuCard_content {float:left;padding:0px 10px;box-sizing:border-box;width: calc(100% - 200px);}
.heisakuCard_title {font-weight: bold;font-size: 16px;}
.heisakuCard_desc {;font-size: 16px;}
</style>
<div class="heisakuCard">
        <img alt="og_title" height="90" width="180" src="{{ $meta_data.og_image}}" style="float:left;" />
        <div class="heisakuCard_content">
                <span class="heisakuCard_title">{{$meta_data.og_title}}</span><br />
                <span class="heisakuCard_desc">{{$meta_data.og_desc}}</span>
        </div>
        <a href="{{ $meta_data.og_url }}" target="_blank"></a>
</div>
getJSON にurlを渡すとそのurlを呼び出してデータを取ってきてくれる(jsonフォーマット)というのがポイントになります。

ブログカード貼り付け

もう最初の方で貼り付けてしまいましたが、一応実験です。

og_title
【初めてのaws】aws lambdaでウェブサイトのmetaタグ取得APIを作る | enjoyall
前回、Amazon Web Service(AWS)に登録したので、今回は早速サービスを作ってみたいと思います。 awsへの登録がまだの場合は前回の記


成功!

Hugo使ってる人が増えるといいな

enjoy!

投げ銭していただける場合は、amazonで15円からできます。宛先はheisakuあっとcomichi.comで。

マイナスは入れられないの?

comments powered by Disqus