Skip to content

AutoRelativePath

Benedikt Hensen edited this page Jan 17, 2020 · 1 revision

The project contains a useful snippet that returns the root path of the book's URL as a relative path.

Relative Paths

It is generally recommended to use relative links instead of absolute addresses to reference internal resources. If absolute URLs are used and the host address of the book is changed, all internal links, e.g. to images or other pages of the book, need to be updated manually. With relative URLs, the host address does not matter. It is only important how two files are positioned relatively to each other. A path can reach a parent directory with the address "../".

Example: An image should be inserted on the page "sampleChapter.md". "sampleChapter.md" is located at the URL http://www.example.com/ar-for-eu-book/chapter/sampleChapter/. The image is saved in the projects asset folder and can be reached under http://www.example.com/ar-for-eu-book/assets/figures/exampleImage.png. To reference the image with a manually written relative path, one can add the following line of Markdown to "sampleChapter.md":

![Image Alt Text](../../assets/figures/exampleImage.png)

With the automatic relative path, authors do not need to worry about counting the "../" to return to the root level of the website.

Usage of the Automatic Relative Path

At the top of the page, underneath the infomation block, the autoRelativePath reference needs to be inserted:

{% include autoRelativePath.html %}

After that, links can contain the command {{pathToRoot}} to return to the topmost level of the URL. In the compiled HTML version of the book {{pathToRoot}} is replaced by the according number of "../" which are necessary to reach the top-level.

Example: An image should be inserted on the page "sampleChapter.md". "sampleChapter.md" is located at the URL http://www.example.com/ar-for-eu-book/chapter/sampleChapter/. The image is saved in the projects asset folder and can be reached under http://www.example.com/ar-for-eu-book/assets/figures/exampleImage.png. To reference the image with an automatically generated relative path, one can add the following line of Markdown to "sampleChapter.md":

![Image Alt Text]({{pathToRoot}}/assets/figures/exampleImage.png)

Clone this wiki locally