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;

}

您可能必须使用填充以使其恰好适合您的图像。