Hugo(AMP対応)にTwitterのツイートを埋め込む時のメモ
このブログはRobustを使わせて頂いております。
AMPに対応してますし素敵なThemeで、すごく気に入っています！
開発者の @dim0627 さん、本当にありがとうございます！
ということで、タイトルの通りAMPに対応しているThemeにおいて、Twitterのツイートを埋め込むときのメモです。
今回は、shortcodeにて実装しました。簡単なので、ぜひともチャレンジして貰えればと思います。
ドキュメントを確認する
まずはドキュメントを確認する。
以下のスクリプトを追加して。
1<script async custom-element="amp-twitter" src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js"></script>
以下のHTMLで表示できます。
1<amp-twitter width="375"
2 height="472"
3 layout="responsive"
4 data-tweetid="885634330868850689">
5</amp-twitter>
Placeholders & fallbacksについて
一応、英語を翻訳してみました。
An element marked with a placeholder attribute displays while the content for the Tweet or Moment is loading or initializing. Placeholders are hidden once the AMP component’s content displays. An element marked with a fallback attribute displays if amp-twitter isn’t supported by the browser or if the Tweet or Moment doesn’t exist or has been deleted.
こんな感じになりました。
TweetまたはMomentのコンテンツの読み込み中または初期化中に、プレースホルダ属性でマークされた要素が表示されます。 AMPコンポーネントのコンテンツが表示されると、プレースホルダは非表示になります。 amp-twitterがブラウザでサポートさ れていない場合、またはTweetまたはMomentが存在しないか削除されている場合は、fallback属性でマークされた要素が表示されます。
こんな感じで指定できるようです。
今回作成するshortcodeでは、Placeholdersを考慮してません…
Source
1<amp-twitter width="375"
2 height="472"
3 layout="responsive"
4 data-tweetid="638793490521001985">
5 <blockquote placeholder>
6 <p>I only needed to change some CSS.
7 <a href="http://t.co/LvjLbjgY9F">pic.twitter.com/LvjLbjgY9F</a>
8 </p>— Malte Ubl (@cramforce)
9 <a href="https://twitter.com/cramforce/status/638793490521001985">September 1, 2015</a>
10 </blockquote>
11</amp-twitter>
Previw
Source
1<amp-twitter width="390"
2 height="330"
3 layout="responsive"
4 data-tweetid="855178606556856320">
5 <blockquote placeholder>
6 <p>What are 5 common misconceptions people often have about AMP? Find out on today's installment of Amplify:
7 <a href="https://t.co/kaSvV8SQtI">https://t.co/kaSvV8SQtI</a>
8 <a href="https://t.co/Cu9VYOmiKV">pic.twitter.com/Cu9VYOmiKV</a>
9 </p>— AMP Project (@AMPhtml)
10 <a href="https://twitter.com/AMPhtml/status/855178606556856320">April 20, 2017</a>
11 </blockquote>
12 <div fallback>
13 An error occurred while retrieving the Tweet. It might have been deleted.
14 </div>
15</amp-twitter>
Previw
scriptを追加する
早速、scriptを追加します。
まずは私の環境を…
1(ins) ~/go/src/github.com/hoge/trhrkmk.github.io [master *%=] $ pwd
2/home/teruhiro/go/src/github.com/hoge/trhrkmk.github.io
3
4(cmd) ~/go/src/github.com/hoge/trhrkmk.github.io [master *%=] $ tree ./layouts/
5./layouts/
6├── _default
7│ ├── baseof.amp.html
8│ ├── baseof.html
9│ ├── summary.amp.html
10│ └── summary.html
11├── partials
12│ ├── addthis.html
13│ ├── addthis-script.html
14│ ├── adsense.amp.html
15│ ├── adsense.body.amp.html
16│ ├── adsense.html
17│ ├── ads.html
18│ ├── drift.html
19│ ├── favicon.html
20│ ├── sidebar.html
21│ └── styles.css
22└── shortcodes
23 ├── img.amp.html
24 ├── img.html
25 └── twitter.amp.html
26
273 directories, 17 files
./layouts/_default/baseof.amp.htmlに追加する。
vimで編集する。
1(ins) ~/go/src/github.com/hoge/trhrkmk.github.io [master *%=] $ vim ./layouts/_default/baseof.amp.html
先程のscriptを追加します。
1<!DOCTYPE html>
2<html ⚡>
3 <head>
4 {{ partial "meta.html" . }}
5
6 <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
7 <script async src="https://cdn.ampproject.org/v0.js"></script>
8 <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
9 <script async custom-element="amp-twitter" src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js"></script>
10
11 {{ with .Site.Params.googlefonts }}
12 <link href="{{ . }}" rel="stylesheet">
13 {{ else }}
14 <link href="https://fonts.googleapis.com/css?family=Roboto+Slab:400,700" rel="stylesheet">
15 {{ end }}
16 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">
17 <title>{{ block "title" . }}{{ end }}{{ .Site.Title }}</title>
18 {{ block "meta" . }}{{ end }}
19 <style amp-custom>
20 {{ replaceRE " +" " " (replaceRE "\n" "" (partial "styles.css" .)) | safeCSS }}
21 {{ replaceRE " +" " " (replaceRE "\n" "" (partial "custom.css" .)) | safeCSS }}
22 {{ with .Site.Params.fontfamily }} body { font-family: {{ . | safeCSS }}; } {{ end }}
23 {{ with .Site.Params.logofontfamily }} .h-logo { font-family: {{ . | safeCSS }}; } {{ end }}
24 .l-container { max-width: 40rem; margin: 0 auto; }
25 </style>
26 {{ partial "adsense.amp.html" . }}
27 </head>
28 .
29 .
30 .shortcodeを作る
shortcodeを作る。
1(ins) ~/go/src/github.com/hoge/trhrkmk.github.io [master *%=] $ vim ./layouts/shortcodes/twitter.amp.html
1twitter.amp.html
2
3{{ $id := .Get 0 }}
4
5<amp-twitter
6 data-tweetid="{{$id}}"
7 width="800"
8 height="600"
9 layout="responsive">
10</amp-twitter>
markdownに書く
これで設定は終わりなので、markdownにて書いてみます。
実際の記事の感じです。
1### 更新(2019-01-09)
2
3Twitterで「`ftp.debian.org`ではなく`ftp.jp.debian.org`がいいですよ。」と教えて頂いたので、修正しました。
4
5{{% twitter 1082100466261979138 %}}
表示を確認する
実際の表示はこんな感じです。
あとがき
どこかのタイミングで、Hugoについても、もっと勉強したいなー
comments powered by Disqus