24

octopress サイト (jekyll に基づく) をローカル ネットワークにロードしようとしています。サーバーはありません。共有フォルダーでローカルに利用できるようにしたいだけです。

ローカル フォルダーにデプロイするたびに、css と js と背景画像のリンクが壊れます。

rsync、github、heroku などの利用可能なオプションにはすべて、ssh とパスワードが必要です。これはここにあります: http://octopress.org/docs/deploying/

これに役立つレーキオプションはありますか?

解決済み:

ききとさん、ご指導ありがとうございました。

私はそれを実装し、git リポジトリをフォークしました。ただし、1 つ問題があります。この手法を使用して、ローカル ディレクトリと Web ホストである 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 ファイルの 1 つに、次を追加します。

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必要なページ/投稿で呼び出される (オプションの) 設定を定義し、プロジェクトの「相対ルート」を指すようにします。たとえば、 にあるページでは、 「上」のレベルが 1 つしかないため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) が、サイトを作成していて、各ページの最終的なパスが不明な場合には、この方法の方がうまく機能します。

_includes 内の 1 つの部分ファイルにすべての css と js が含まれています。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 --servercustom を指定しないでください--base-url。

更新:コメントで gimpf が指摘しているように、これはアンカー リンクでは期待どおりに機能しません。これらは、現在のページではなくベース URL を指します。JavaScript を使用した回避策があります。たとえば、アンカー href を jQuery で書き換えます。

$().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 }}すると、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 に答える
-1

画像/JS/CSSへのパスを少し調整する必要があるようです。生成されたフォルダを指すパスを使用してみてください。

例えば：

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