Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>The problem is that you are using absolute paths to get to some of your resources. If you want to deploy the site anywhere in the network, then you need to make those relative.</p> <p>In my case, what I do is to define an (optional) setting called <code>root</code> in the pages/posts that need it, pointing to the "relative root" of the project. For example, on a page located in <code>about/index.html</code>, the root will be <code>../</code>, since there is only one level "up":</p> <pre><code>--- title: My Page title root: "../" --- </code></pre> <p>Pages further away in the directories will need more dots: <code>../../</code>, <code>../../../</code>, and so on. Pages in the root folder (like index.html) don't need a root.</p> <p>Then I use that setting to generate <em>all</em> the paths.</p> <p>If I'm on the page or post itself, and I need to refer to a local image or another page, use <code>page.root</code> or <code>post.root</code>:</p> <pre><code>&lt;img src="{{ post.root }}images/happy.png" /&gt; &lt;a href="{{ post.root }}2010/01/01/another_post&gt;Relative link to another post&lt;/a&gt; </code></pre> <p>It's possible to make the reference directly (<code>../images/happy.png</code>) but this works better when you are creating the site, and you are still unsure about the definitive paths of each page.</p> <p>I have all the css and js included in one partial file inside _includes. It creates a variable called <code>root</code> to make sure it works with both pages and posts:</p> <pre><code>{% capture root %}{% if page.root %}{{ page.root }}{% else %}{{ post.root }}{% endif %}{%endcapture%} &lt;script type="text/javascript" src="{{ root }}js/jquery-min.js"&gt;&lt;/script&gt; &lt;link rel="stylesheet" type="text/css" href="{{ root }}/css/style.css" /&gt; </code></pre> <p>That's pretty much it.</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload