样式表不适用于 Jekyll 主题 Freelancer bootstrap

Question

我已经为我的个人博客创建了一个 username.github.io 存储库，现在我的目标是使用我找到的完全不同的主题创建另一个 github 托管的 jekyll 页面。这是我正在使用的主题的链接：https://github.com/jeromelachaud/freelancer-theme

于是我在我的机器上和github上新建了一个仓库，将本地仓库连接到远程github上，创建了一个孤儿gh-pages分支，然后fork freelancer-theme并克隆到新的文件夹中我在 gh-pages 分支上创建的存储库。我使用命令将所有文件（我认为除了 git init 之外）移动到新存储库的父文件夹中。我删除了 freelancer-theme fork 文件夹并使用 gem install jekyll 安装了最新版本的 Jekyll。然后我运行了 jekyll serve，网站在我的机器上完美呈现。做了一些修改，新的修改仍然可以很好地渲染。将这些更改推送到我在 github 上的存储库的 gh-pages 分支后，我现在转到 username.github.io/nameofmynewrepository 并获得一个包含主题所有组件的站点，但 css 似乎没有工作。

有没有人使用过这个主题，他们知道可能的原因吗？文档很少。
这是我的 github 页面的 url，其中样式表不起作用：http://mpron.github.io/mybrotheriswrong/

这是我在 gh-pages 分支上的新仓库： https://github.com/mpron/mybrotheriswrong/tree/gh-pages

Answer 1

请注意，自 2016 年 12 月起，您有了一个新的主题选择器，这将使 themes 的切换更加容易。
见“New theme chooser for GitHub Pages ”：

您现在只需单击几下即可构建一个带有 Jekyll 主题的 GitHub Pages 网站。

1. 创建new GitHub repository 或转到现有的。
2. 在存储库设置的 GitHub Pages 部分中打开主题选择器。
3. 选择一个主题。

在“Creating a GitHub Pages site with the Jekyll Theme Chooser”查看更多信息

Answer 2

您需要下载官方替代版本：

Jekyll Logo Jekyll Version

Answer 3

这就是我修复错误的方法 -

在_includes/head.html改-

<!-- Custom CSS & Bootstrap Core CSS - Uses Bootswatch Flatly Theme: http://bootswatch.com/flatly/ -->
<link rel="stylesheet" href="{{ "/style.css" }}">

<!-- Custom Fonts -->
<link rel="stylesheet" href="{{ "/css/font-awesome/css/font-awesome.min.css" }}">

到

<!-- Custom CSS & Bootstrap Core CSS - Uses Bootswatch Flatly Theme: http://bootswatch.com/flatly/ -->
<link rel="stylesheet" href="{{ "style.css" }}">

<!-- Custom Fonts -->
<link rel="stylesheet" href="{{ "css/font-awesome/css/font-awesome.min.css" }}">

在_includes/js.html 中更改-

改变 -

<!-- Bootstrap Core JavaScript -->
<script src="{{ "/js/bootstrap.min.js" }}"></script>

<!-- Plugin JavaScript -->
<script src="{{ "/js/jquery.easing.min.js" }}"></script>
<script src="{{ "/js/classie.js" }}"></script>
<script src="{{ "/js/cbpAnimatedHeader.js" }}"></script>

<!-- Contact Form JavaScript -->
<script src="{{ "/js/jqBootstrapValidation.js" }}"></script>
{% if site.contact == "static" %}
<script src="{{ "/js/contact_me_static.js" }}"></script>
{% else %}
 <script src="{{ "/js/contact_me.js" }}"></script>
{% endif %}

<!-- Custom Theme JavaScript -->
<script src="{{ "js/freelancer.js" }}"></script>

到

<!-- Bootstrap Core JavaScript -->
<script src="{{ "js/bootstrap.min.js" }}"></script>

<!-- Plugin JavaScript -->
<script src="{{ "js/jquery.easing.min.js" }}"></script>
<script src="{{ "js/classie.js" }}"></script>
<script src="{{ "js/cbpAnimatedHeader.js" }}"></script>

<!-- Contact Form JavaScript -->
<script src="{{ "js/jqBootstrapValidation.js" }}"></script>
{% if site.contact == "static" %}
<script src="{{ "js/contact_me_static.js" }}"></script>
{% else %}
 <script src="{{ "js/contact_me.js" }}"></script>
{% endif %}

<!-- Custom Theme JavaScript -->
<script src="{{ "js/freelancer.js" }}"></script>

简而言之，我们从所有链接中删除/。大卫的回答解释了为什么我删除了这个。

Answer 4

由于你的 github pages 站点是一个项目站点，他的默认 url 看起来像 user.github.io/projectrepository。

这意味着当您在 /resourcefolder/ressource.css 中查找资源（css、js 或 img）时，它会在 user.github.io/resourcefolder/ressource 中查找它.css。

缺少 /projectrepository 部分，这就是您必须在 _config.yml

中使用 baseurl 参数的原因

在你的情况下，你只需要添加：

baseurl: /mybrotheriswrong

在您的 _config.yml 中。

标签会将其添加到您的 css href 中，并在 /mybrotheriswrong/css/font-awesome/css/font-awesome.min.css 处成功找到它.

这也将解决你的js问题。

如果您打算在不同级别的页面（例如 about/index.html）或使用帖子的永久链接（例如 ），您还应该在图像上使用 site.baseurl >somefolder/

<img src="{{ site.baseurl }}/img/portfolio/{{ post.img }}" class="img-responsive" alt="{{ post.alt }}">