Ghost 0.8.0の新機能Twitter/Facebooサポートを試す

Ghost 0.8.0の新機能のTwitter / Facebook supportを、利用しているPurusテーマに適用してみました。

Subscribeへの適用

PurusテーマではナビゲーションバーにTwitterやFacebookのSubscribeボタンがすでに配置されているのでこれを修正します。

今まではこれらのプロパティがなかったので、 Purusテーマではpartials/customフォルダ内にあるsubscribe.hbsを直接編集して自分のTwitterなどのURLを埋め込む方式でした。

今回のTwitter / Facebookのプロパティがサポートされたので、以下のように書き換えました。

<a href="{{twitter_url @blog.twitter}}">
  <i class="fa fa-twitter"></i>
  <span class="hidden_purus">Twitter</span>
</a>
<a href="https://alpha.app.net/yostos">
  <i class="fa fa-font"></i><span class="hidden_purus">App.Net</span>
</a> 
<a href="{{facebook_url @blog.facebook}}">
  <i class="fa fa-facebook"></i>
  <span class="hidden_purus">Facebook</span>
</a>
<a href="{{@blog.url}}/rss/">
  <i class="fa fa-rss"></i><span class="hidden_purus">Subscribe</span>
</a>

Twitter/Facebookは、ブログ全体と各執筆者ごとでそれぞれ別の設定を行う形になっています。{{twitter_url @blog.twitter}}としているのは、ブログ全体の設定を持ってきています。

Authorページ修正

個人なのでブログ全体も個人もTwitter/Facebookは同じなのですが、折角なのでAuthorページにも追加してみました。

こちらは、Teamの執筆者ごとに設定できるTwitter/Facebookのプロパティを持ってきています。以下は抜粋です。

{{#author}}
  {{#if twitter}}
    <h5><a href="{{twitter_url}}"><i class="fa fa-twitter-square fa-lg" aria-hidden="true"></i></a></h5>
  {{/if}}
  {{#if facebook}}
    <h5><a href="{{facebook_url}}"><i class="fa fa-facebook-square fa-lg" aria-hidden="true"></i></a></h5>
  {{/if}}
{{/author}}

Subscribeページと異なるのは全体が authorブロックになっているので、twitter_urlで引っ張ってこられるURLがTeamの執筆者ごとに設定できるTwitter/Facebookのプロパティを参照します。

この時autor.twitterには@ユーザー名が入っています。author.facebookも同様です。

他人のTwitterを参照する

Ghostの管理画面で設定したプロパティだけでなく、ユーザー名を指定してTwitter/FacebookのURLを生成することもできるようになっています。

<p>このブログは<a href="{{twitter_url @TryGhost}}">Ghost</a>を応援します。</p>

まぁ、テーマのテンプレートでしか使えませんから、使いどころはよくわかりませんが。

関連リンク


Comments !