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

Question

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

所以我在我的机器和github上创建了一个新的存储库，将本地存储库连接到远程github上，创建了一个孤立的gh-pages分支，然后将自由职业者主题分叉并将其克隆到新的文件夹中我在gh-pages分支上创建的存储库。我使用命令将所有文件（我认为git init除外）移动到新存储库的父文件夹中。我删除了freelancer-theme fork文件夹并使用gem install jekyll安装了最新版本的Jekyll。然后我运行jekyll服务，该网站在我的机器上完美呈现。做了一些修改，仍然可以通过新的修改呈现。在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

由于你的github pages网站是一个项目网站，他的默认网址看起来像 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 中成功找到它

这也将解决你的问题。

如果您计划将页面设置为 about / index.html 等不同级别，或者使用post的永久链接，例如，您还应该在图片上使用 site.baseurl > somefolder /

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

Answer 2

这是我修复错误的方法 -

在_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>

简而言之，我们会从所有链接中删除/。为什么我删除了这个在David的答案中解释。

Answer 3

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

Jekyll Logo Jekyll Version

Answer 4

请注意，自2016年12月起，您有了一个新的主题选择器，可以更轻松地切换 themes 。
请参阅＆＃34; New theme chooser for GitHub Pages ＆＃34;：

  

现在，您只需点击几下即可构建一个包含Jekyll主题的GitHub页面网站。

     

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

请参阅＆＃34; Creating a GitHub Pages site with the Jekyll Theme Chooser＆＃34;