如何在Jekyll的顶部导航栏中添加图像徽标?

时间:2012-06-29 18:57:47

标签: jekyll

刚开始使用Jekyll生成一些基本页面,并希望在导航栏的顶部品牌区域添加图像徽标。有没有一种标准的方法可以做到这一点而不会搞乱Jekyll中的主题?

1 个答案:

答案 0 :(得分:4)

我不相信,如果不至少对主题进行一些定制,就可以做到这一点。

但是,由于您正在使用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;

}

您可能需要使用填充来使其适合您的图像。