24

我一直在尝试将我的 octopress 网站（基于 jekyll）加载到我的本地网络。没有服务器，我只希望它在本地共享文件夹中可用。

每次我将它部署到本地文件夹时，css 和 js 以及背景图像链接都会被破坏。

rsync、github 和 heroku 等可用选项都需要 ssh 和密码。这可以在这里找到：http: //octopress.org/docs/deploying/

有没有可以帮助解决这个问题的 rake 选项？

解决了：

Kikito，非常感谢您的指导。

我刚刚实现了它并分叉了一个 git 存储库。不过，有一个问题。我已经使用这种技术在 Dropbox Public、本地目录和网络主机上托管了同一个站点。我不得不添加一个额外的 / 并且在单击链接时斜杠加起来。这是回购和保管箱链接：

https://github.com/originalsurfmex/jekyll-relative-bootstrap

一切都如你所说，但我认为如果你或其他人看一眼布局中的部分和链接，你会有一个更好的主意。

4

6 回答 6

20

自动方式：

对于 css/js 文件：

{% assign lvl = page.url | append:'X' | split:'/' | size %}
{% capture relative %}{% for i in (3..lvl) %}../{% endfor %}{% endcapture %}

<link href="{{ relative }}css/main.css" rel="stylesheet" />
<script src="{{ relative }}scripts/jquery.js"></script>

对于其他文件：

在 _config.yml 集中

url: http://www.yourdomain.com

添加规范链接元素：

<link rel="canonical" href="{{ site.url }}{{ page.url }}" />

在您的一个 js 文件中，添加：

var relative = null;
if (location.protocol==='file:') {
    relative = Array($('link[rel="canonical"]').attr('href').match(/\//g).length-2).join('../');
    if (relative == '') relative = './';
}
function to_relative(link, index) {
    if (!relative) return link;
    var hash = link ? link.match(/#.*$/) : null;
    if (hash) link = link.replace(/#.*$/, '');
    return link?(link.replace(/^\//, relative)+(index?(link.substr(-1)=='/'?'index.html':''):'')+(hash?hash[0]:'')):null;
}

$(function(){
    if (relative) {
        $('a').attr('href', function(a,b){return to_relative(b, true);});
        $('img').attr('src', function(a,b){return to_relative(b, false);});
    }
});

对于其他方面，使用 jQuery 来操作它们。

于 2013-01-10T09:49:47.890 回答
16

问题是您正在使用绝对路径来获取某些资源。如果您想将站点部署在网络中的任何位置，那么您需要使这些相对。

就我而言，我所做的是定义root在需要它的页面/帖子中调用的（可选）设置，指向项目的“相对根”。例如，在位于 的页面上about/index.html，根将是../，因为只有一层“上”：

---
title: My Page title
root: "../"
---

目录中较远的页面将需要更多点：../../、、../../../等等。根文件夹中的页面（如 index.html）不需要根。

然后我使用该设置生成所有路径。

如果我在页面上或自行发布，并且我需要引用本地图像或其他页面，请使用page.rootor post.root：

<img src="{{ post.root }}images/happy.png" />
<a href="{{ post.root }}2010/01/01/another_post>Relative link to another post</a>

可以直接进行引用 ( ../images/happy.png)，但在创建站点时效果更好，并且您仍然不确定每个页面的最终路径。

我将所有 css 和 js 包含在 _includes 内的一个部分文件中。它创建一个名为的变量root，以确保它适用于页面和帖子：

{% capture root %}{% if page.root %}{{ page.root }}{% else %}{{ post.root }}{% endif %}{%endcapture%}

<script type="text/javascript" src="{{ root }}js/jquery-min.js"></script>
<link rel="stylesheet" type="text/css" href="{{ root }}/css/style.css" />

差不多就是这样。

于 2011-11-28T23:48:29.043 回答
5

如果您可以忍受必须为特定文件夹生成站点，则使用 html<base />标记可能更直接。使用相对于您的根文件夹的所有资产路径，将以下内容添加到您的默认布局中：

<base href="{{ site.baseurl }}" />

然后使用正确的设置jekyll --base-url <folder> <folder>来部署你的 jekyll 站点。<folder>baseurl

请注意，这也可以在不更改内置 WEBrick 服务器的情况下工作。从jekyll --server并且不指定自定义--base-url.

更新：正如 gimpf 在评论中指出的那样，这对于锚链接将无法正常工作。这些将指向基本 URL 而不是当前页面。有使用 JavaScript 的变通方法，例如用 jQuery 重写锚点 href：

$().ready(function() {
  $("a[href^='\#']").each(function(){
    this.href=location.href.split("#")[0]+'#'+this.href.substr(this.href.indexOf('#')+1);
  });
});
于 2012-05-06T12:13:12.657 回答
3

Jekyll 的 github 上有一个问题可以解决这个问题。放_config.yml：

url: "<your domain>"

然后使用{{ site.url }}将返回网址。例如，/css/styles.css要从页面标题中引用文件：

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us">  
  <head>
      <...>
      <link rel="stylesheet" href="{{ site.url }}/css/style.css" type="text/css" />
      <...>
  </head>
  <body>
     ...
  </body>
</html>
于 2013-04-03T20:00:37.700 回答
2

替代答案-

我对本地托管的静态 html 有类似的要求，这样我就可以在没有 Web 服务器的情况下将其分发到其他计算机，并通过常规浏览器从文件系统中读取它。

而不是在各个地方摆弄神秘的路径语法 - 尽管可以通过这个线程中的其他答案来证明它 - 我选择了一种解决方法，将站点发布到我的 localhost:4000 由 Jekyll 照常提供服务，然后使用该wget实用程序下载静态网站的静态副本，然后可以使用标准 Web 浏览器从文件系统打开和导航。wget将努力为您制作相对的路径。

这是wget我使用的命令 -

wget \
 --recursive \
 --no-clobber \
 --page-requisites \
 --html-extension \
 --convert-links \
 --restrict-file-names=windows \
 --domains localhost http://localhost:4000
于 2016-09-16T02:28:43.953 回答
-1

听起来您的图像/JS/CSS 的路径需要稍作调整。尝试使用指向生成文件夹的路径。

例如：

<img src="/_site/images/foobar.jpg" />
于 2011-11-08T16:24:17.850 回答