わいもヘッダーにIcon表示したい!

良くサイトの右上にInstagramのアイコンや、Twitterのアイコンを表示するものをGhost(このサイトテーマはRuby-Master)でも表示できるようにしたいと思ったので表示できるようにしました。

管理画面からデフォルトで追加できるようになっているのがTwitterとFacebookだけだったのとなんか知らんけどサイトの一番下にしか表示されなかったので自分的にはなんかちゃうってなってできないか試してみました。

最終的にこんな感じで右に表示できるようにはなりました。
Harukas-log

ただ、案外簡単に管理者ページで追加できなくて結局ソースコードをいじって修正したのでまた忘れて調べるのめんどくさいので書いておきます。

環境はLightsailにGhostを立てて、その中でRuby Themeを入れています。

公式のチュートリアルのやり方でできなかった

Tutorial: How to add social networks to your Ghost site
Add social networks like Instagram, LinkedIn, GitHub, Dribbble and other links to your Ghost site or blog by editing your theme.

公式にGhostのデフォルトテーマでのソーシャルリンクを追加して、アイコンに変換するチュートリアルがあります。
これでやると管理画面からsecondary navigationでリンクを追加するとアイコンに買えてくれるのでデフォルトのテーマを使ってる人は参考にしてもらえればと思います。

自分も最初これをちょっといじってできるようにしてみたかったのですが、なんか動きそうになかったのでできていません。
まぁでも所詮htmlでsvg表示していて、表示をtwitterやinstagramに切り替えるためだけに変数入れてるだけなので、多分今回のやり方を応用してやれば管理画面から表示できるようになると思います。svgもiconが多分どこかで読み込まれているのでsvgじゃなくてもいいかもめんどくさいのでやりません。

Theme側でソーシャルリンクのところ廃止されてた

もともとRubyのThemeってPremiumだったのか知らないのですが、このサイトで

Ruby Ghost Theme Documentation - IVEEL
Learn more about Ruby Ghost theme.

Social Links
Add your social links in partials/config.hbs to display social links
on your blog. All links must be full URL.

とありpartials/config.hbsのテーマを修正してリンクを書き足すだけで表示できると書いてありますが、この方法だとなぜか表示できませんでした。

オープンソースになりコードが見れるようになっているのでgithubのコードをみてみるとなんか削除されていたみたいです。(悲しみ)

Remove extra social links · TryGhost/Ruby@e614b9b
A multi-column theme with a unique card layout for Ghost - TryGhost/Ruby

あきらめかけ、気づいた

アイコン表示するためにはiconとリンクさえあれば良いやん

なんか難しく考えていたけどもうハードコーディングすればええやん。と閃きました。
このコミットログの部分のクラスさえわかればあとはこれをheaderにでも埋め込んでおけばいけるので、これをハードコーディングして埋め込みました。

やっと修正していく

  1. SSHでサーバーにアクセス
  2. GhostのThemeのとこまで移動

Lightsailで構築したGhostのテーマの場所は
/opt/bitnami/apps/ghost/htdocs/content/themesです。
なので下記コマンドでディレクトリを移動していきます。

cd /opt/bitnami/apps/ghost/htdocs/content/themes

content配下にthemesというディレクトリがあり、今回のテーマであるRuby-masterというフォルダここは入れてるテーマによって違います。

最終的にはRuby-master(テーマフォルダ)のpartialsフォルダまで移動します
3. header.hbsにリンクハードコーディング!!

元々のファイルはこんな感じでnavbar-rightってのがhiddenクラスを付けられて隠されているのでこれを消しつつこの中に入れることで右に表示していきます。

<header class="site-header">
    <div class="navbar">
    <div class="navbar-left">
      {{> logo}}
    </div>
    {{#if @site.navigation}}
    <nav class="main-menu hidden-xs hidden-sm hidden-md">
      {{navigation}}
    </nav>
    {{/if}}
    <div class="navbar-right">
        <div class="social hidden-xs hidden-sm"></div>
        {{> burger}}
      </div>
    </div>
</header>

これにlinkを追加してハードコーディングをしていきます。iconのclassもコミットログのiconに設定しているキーの奴を設定していく。最終的にはこんな感じ。

<header class="site-header">
    <div class="navbar">
        <div class="navbar-left">
          {{> logo}}
        </div>
        {{#if @site.navigation}}
        <nav class="main-menu hidden-xs hidden-sm hidden-md">
          {{navigation}}
        </nav>
        {{/if}}
        <div class="navbar-right">
          <div class="social">
            <!-- github -->
            <a class="social-item" href="linkを入れてね"
            target="_blank">
            <i class="icon icon-github-circle"></i>
            </a>
            <!-- twitter -->
            <a class="social-item" href="linkを入れてね"
            target="_blank">
            <i class="icon icon-twitter"></i>
            </a>
            <!-- instagram -->
            <a class="social-item" href="linkを入れてね"
            target="_blank">
            <i class="icon icon-instagram"></i>
            </a>
          </div>
          {{> burger}}
       </div>
    </div>
</header>

あとは自分の遷移して欲しいURLをhrefに記入すればOK。iconに関してはなんのiconなんやろ?多分themeごとの共通で呼び出すlayoutみたいなところでCDNとかで入れてると思うからそれのクラス入れればいい。というか注意点としてはnavbar-rightのクラスのところでsocialクラスでsocial-itemクラスを囲ってあげればあとは普通にhtml書くだけ。
5. Ghost再起動

Ghostの再起動をしないと反映されないので再起動します。再起動のコマンドは

sudo /opt/bitnami/ctlscript.sh restart
Start or stop services

詳しくは上記のリンクにのってます。そのままコピペしてちょっと待っておけばサーバー終了してghost、mysql終了して再起動してくれるので完了まで待ってください。

  1. 反映を確認すれば終わり!

反映が確認できたら今回の修正は終わりですー。

いつか管理画面で修正できるようにする

Ghostの管理画面DesignタブのところでURLにlabelとurlを追加できる。

----------2021-05-03-0.15.50
あとは公式のやり方を参考にして、この値を変数としてhrefにurl、iconにiconが動くようにするprefixみたいな感じでlabelを入れてnavigationで動かせば動くようになるはず。
ただ、他のnavigationとかも同様に作成されてしまうからsecondary navigationで対応とかでも良さそう。
ただ、なんかnavigationで使えるようにするのnavigation.hbsでやらないといけない?みたいな感じやからちょっと修正したりしないといけないかも。
とりあえずめんどくさいから今はベタガキで良いやー

あとGhost インラインコードとかソースコード表示したりするのハイライト効かないし対応させたいなぁー。テーマのjsでプラグイン入れて頑張れば行けるんかなぁ。
めんどくさいしええかぁ