html - 使用 Jekyll 构建的 GitHub 页面上的下拉框显示不正确

Question

我使用 Jekyll 构建的 GitHub Pages 站点在推送到 GitHub 时没有正确显示我的导航栏。当使用“jekyll serve”在本地构建时，它可以正常运行，如下所示:

然而，当推送到 github 时，标题不可见，链接似乎显示在下拉框上方:

本地我有 Jekyll 3.4.3，它与 github 上列出的相同，之前我的网站显示正常(本地与在线相同)但几个月中断后我似乎无法让它再次正确显示.我对 Jekyll 不是很有经验，因为这是我的第一个实验，但我确实有一些其他的 Web 开发经验。

如有任何建议，我们将不胜感激。

导航栏.html

<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
    <div class="container-fluid">
        <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
<!--            <form class="navbar-search pull-right" 
action="http://google.com/search" method="get">
{% if site.safe %}
            <input type="hidden" name="q" value="site:{{ site.url | remove_first:'http://' }}">
{% else %}
            <input type="hidden" name="q" value="site:{{ site.url | domain_name }}">
{% endif %}
            <input type="text" name="q" class="input-medium search-query" placeholder="Search">
        </form> -->
        <div class="nav-collapse collapse">
            <ul class="nav">
{% for node in site.navbar_list %}
{% if node.name == page.group %}{% assign active = 'active' %}
{% else %}{% assign active = nil %}{% endif %}
{% if node.dropdown %}
                <li class="dropdown dropdown-container {{ active }}">
                    <a class="dropdown-link" href="{{ site.baseurl }}{{ node.link }}">{{ node.name }}</a>
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">{{ node.name }}<b class="caret"></b></a>
                    <ul class="dropdown-menu">
    {% for sub in node.dropdown %}
                        <li><a href="{{ site.baseurl }}{{ sub.link }}">{{ sub.name }}</a></li>
    {% endfor %}
                    </ul>
                </li>
{% else %}
                <li class="{{ active }}">
                    <a href="{{ site.baseurl }}{{ node.link }}">{{ node.name }}</a>
                </li>
{% endif %}
{% endfor %}
            </ul>
        </div><!--/.nav-collapse -->
    </div>
</div>

样式.css

/* title of the site */
#header {
    height: 80px;
}
#header hgroup {
    position: absolute;
    top: 10px;
    left: 20px;
}
#header h1 {
    margin: 0;
    font-size: 1.75em;
    font-weight: bold;
}
#header h2 {
    color: #ccc;
    margin: 0 0 4px 16px;
    line-height: 0.8;
    font-size: 1.0em;
    font-weight: normal;
}
#header a,
#header a:hover,
#header a:visited {
    text-decoration: none;
}

/* header.html: navbar */
.navbar-fixed-top {
    margin-bottom: 20px;
    position: static;
}
.navbar-fixed-top .navbar-inner {
    padding: 0;
    border-top: 1px solid #d4d4d4;
    border-bottom: 1px solid #d4d4d4;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.067);
}
.navbar .nav > .active > a,
.navbar .nav > .active > a:hover,
.navbar .nav > .active > a:focus {
    box-shadow: none;
}
.navbar .btn-navbar {
    margin-bottom: 5px;
}
.lt-ie9 .collapse {
    overflow: visible; /* removed from 2.1.1, but still IE need this */
}

/* header.html: dropdown container */
.navbar .nav > li.dropdown-container {
    position: relative !important;
}
.navbar .nav > li.dropdown-container .dropdown-link {
    position: absolute !important;
    top: 0;
    left: 0;
    z-index: 1;
}
.navbar .nav > li.dropdown-container .caret {
    margin-left: 1.5em;
}
.navbar .nav > li.dropdown-container .dropdown-link + .dropdown-toggle {
    z-index: 0;
}

Answer 1

要解决您的问题，您需要将 style.css 文件从 _includes\css 复制到 assets\css 并将其重命名为 site.css(因为您在assets\css 文件夹中已经有style.css)然后您必须将链接添加到_includes\head。 html如下:

{% endcase %}
<link rel="stylesheet" href="{{ site.baseurl }}/assets/css/site.css">
<link rel="stylesheet" href="{{ site.baseurl }}/assets/css/style.css">

<!-- Font Awesome -->