Mar 19, 2020/mod: May 4,2020 - 3 min read - プログラミング
【Hugo】Hugoショートコードとaws lambdaでブログカード埋め込み
aws lambdaの記事で指定したブログのメタタグをjson形式で取得できるようになりました。今回は、このjson情報を利用してブログカードをこのブログに埋め込んでみたいと思います。
好きなブログをいつでも埋め込めるようになる
人の記事で人気取りしようとしてるの？
Hugoとショートコード
Hugoは静的サイトジェネレータと呼ばれるアプリケーションの一種で、「マークダウン形式」でかかれたテキストファイルをhtmlファイルに変換してくれるブログ生成アプリです。
The world’s fastest framework for building websites
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" >}}"http….” : パラメータ(貼り付けたいブログのurl)
注：上のコードはHugoにショートコードと認識されないように{{の後に全角スペースを入れています
ショートコード作成場所
ショートコードを書く場所ですが、layoutディレクトリの下のshortcodeディレクトリになります。
ファイル名は呼び出す時のコード名と同じにします。(今回はbcard)
.
└─layout
└─ shortcodes
└─ bcard.htmlbcard.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>ブログカード貼り付け
もう最初の方で貼り付けてしまいましたが、一応実験です。
【初めてのaws】aws lambdaでウェブサイトのmetaタグ取得APIを作る ｜ enjoyall
前回、Amazon Web Service(AWS)に登録したので、今回は早速サービスを作ってみたいと思います。 awsへの登録がまだの場合は前回の記
前回、Amazon Web Service(AWS)に登録したので、今回は早速サービスを作ってみたいと思います。 awsへの登録がまだの場合は前回の記
成功！
Hugo使ってる人が増えるといいな
enjoy!
投げ銭していただける場合は、amazonで15円からできます。宛先はheisakuあっとcomichi.comで。
マイナスは入れられないの？
comments powered by Disqus