jekyll - Jekyllのトップナビゲーションバーに画像ロゴを追加するにはどうすればよいですか?

Question

Jekyll を使用していくつかの基本的なページを生成し始めたばかりで、ナビゲーション バーの上部のブランド領域にイメージ ロゴを追加したいと考えていました。Jekyllのテーマをいじらずにこれを行う標準的な方法はありますか?

Answer 1

テーマを少しカスタマイズしなければ、これを行うことはできないと思います。

ただし、Jekyll-BootstrapのデフォルトのTwitterテーマを使用しているため、これらの変更はかなり簡単に行うことができます。

あなたのlogo.pngを入れてくださいassets/themes/twitter

あなたの中であなたは次のように要素の下にあなたのロゴで_includes/themes/twitter/default.htmlを追加したいと思うでしょう：<li><ul class="nav">

<li><a class="brand-image" href="{{ HOME_PATH }}"><img class="brand-image" src="{{ASSET_PATH}}/logo.png"/></a></li>

次に、brand-image編集してクラスを定義しassets/themes/twitter/css/style.css、以下を追加します。

.navbar .nav > li > a.brand-image {
      padding: 4px 0px 0px 0px;
}
.navbar .nav > li > a > img.brand-image {
    -webkit-border-radius: 0px;
       -moz-border-radius: 0px;
            border-radius: 0px;

}

画像にぴったり合うようにするには、おそらくパディングをいじる必要があります。