如何使用css,js和背景图片在本地部署jekyll站点?

我一直在试图加载我的octopress网站(基于jekyll)到我的本地网络。没有服务器,我只想在共享文件夹上本地可用。

每次我将其部署到本地文件夹时,css和js和背景图像链接都将被破坏。

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

有没有耙子选项可以帮助这个?

解决了:

Kikito,非常感谢您的指导。

我刚刚实现了它,并分派了一个git仓库。但是有一个问题。我已经使用这种技术在DropBox Public,本地目录和Web主机上托管同一个站点。我必须添加一个额外的/和斜杠加起来,因为链接被点击。这是repo和dropBox链接

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

一切都按照你的说法工作,但是我认为,如果你或他人看到布局中的部分和链接,你会有一个更好的主意。

解决方法

自动方式:

对于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',false);});
    }
});

对于其他方面,使用jQuery来操纵它们。

相关文章

Css3如何实现鼠标移上变长特效?(图文+视频)
css3怎么实现鼠标悬停图片时缓慢变大效果?(图文+视频)
jquery如何实现点击网页回到顶部效果?(图文+视频)
css3边框阴影效果怎么做?(图文+视频)
css怎么实现圆角边框和圆形效果?(图文+视频教程)
Css3如何实现旋转移动动画特效