Comments (1)
The nature of IPFS makes short absolute paths for website resources (like images, css and javascript files) inoperative; the easiest fix for this is to use relative paths, however the same relative path that works for the root directory (i.e. /index.html) does not work for links inside directories (i.e. /tags/), and since the site is static, while generating it, one must make the distinction between the different directory levels for the page to be rendered correctly.
At first I tried a simple (but brute force solution):
# determine the level of the current file
{% assign lvl = page.url | append:'X' | split:'/' | size %}
# create the relative base (i.e. "../")
{% capture relativebase %}{% for i in (3..lvl) %}../{% endfor %}{% endcapture %}
{% if relativebase == '' %}
{% assign relativebase = './' %}
{% endif %}
...
# Eliminate unecesary double backslashes
{% capture post_url %}{{ relativebase }}{{ post.url }}{% endcapture %}
{% assign post_url = post_url | replace: "//", "/" %}
This jekyll/liquid
code was executed in every page (or include) that needed to reference a resource hosted in the same server.
But this fix did not work for the search function, because it relies on a search.json
file (also generated programmatically to be served as a static file), therefore when generating this file one either uses the relative path for the root
directory or for a nested directory, thus the search results will only link correctly the corresponding pages if the page where the user searched for something is in the corresponding scope.
So the final solution was to make the whole site flat, meaning to live in a single directory. All pages and posts will live under the root directory, and by doing so, I can control how to address the relative paths for resources.
This solution covered almost all cases except for the 404 file when pointing to a file not found within a subdirectory, which of course brakes all relative paths, for this a javascript function was written to:
- check the directory level of the file not found
- construct a relative base, for example "../../"
- replace the relative base with the new one in all document elements required to render the page correctly.
code here
Infinite Scroll and Search javascripts had to be updated as well.
from the-mvm.github.io.
Related Issues (20)
- How to remove shaded box from the home page post-cards? HOT 2
- BUG - Sometime page can not be rander. show the "empty" page
- Any plan support **mermaid** language code block ?
- Support Github Issue Comment
- helpwanted - how to change the bottom left logo HOT 4
- Ability to swap Disqus for https://utteranc.es/ HOT 3
- BUG - Tag Limit? HOT 2
- Query - This template doesn't use the normal URL path to articles that Jekyll standardises on.
- New Feature: Request more details for setting up mailchimp HOT 1
- BUG - What is the reason why the avatar is only partially displayed? HOT 1
- BUG - wrong next page path when pages >= 3
- link to business card
- Preview shows raw math equation HOT 1
- Mastodon Links HOT 1
- Mathematical formulas cannot be rendered in all-posts page
- BUG - Table of content links not working in post page
- How can I change the text in te menu?
- BUG -
- BUG - feed.xml file not found!
- BUG - Node.js 16 actions and `set-output`deprecated HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from the-mvm.github.io.