I have a website where I keep my posts. and I used pagination for this. When I click on page 2, css, javascript and images are not loaded on the new page.
page1:
page2:
It gives an error like this:
[2021-05-16 14:42:16] ERROR /post-5/imgs/sprite.svg' not found. [2021-05-16 14:42:16] ERROR
/post-5/imgs/favicon.png’ not found.
[2021-05-16 14:42:24] ERROR /page2/scripts/index.js' not found. [2021-05-16 14:42:25] ERROR
/page2/imgs/blog.png’ not found.
[2021-05-16 14:42:25] ERROR /page2/imgs/sprite.svg' not found. [2021-05-16 14:42:25] ERROR
/page2/imgs/favicon.png’ not found.
I found the cause of the error. Since the links(css,js imgs) in the index.html file in the page2 folder created in the _site folder are prepared according to the index file in the main directory. but i don’t know the solution
Start your links/URLs with a ‘/’.
Indeed.
Do some research on absolute vs relative URLs.
If you right click and view source you can see the path to CSS and images requested and if you click on a link you can see where it goes.
Or view the JS console in inspect mode and you’ll see errors logged and where the attempted URL points.
Absolute path
/imgs/sprite.svg
It will work when loaded on any of these
/
/about.html
/foo/bar.html
Relative path
imgs/sprite.svg
Same as ./imgs/sprite.svg
It will work when loaded on any of these
/
/about.html
But…
On /foo/bar.html
or any subdirectory, whether created by paging or not, it will break
It will become this effectively if you view in the DOM or the JS console.
/foo/imgs/sprite.svg
Which will of course break.
Jekyll solution
Start URLs with /
img src="/imgs/sprite.svg"
And if you use GitHub Pages for sites on /my-repo/
as home use the relative URL filter. So like this
img src="{{ '/imgs/sprite.svg' | relative_url }}"
Which becomes
`/my-repo/imgs/sprite.svg`
Oh and for convention, you can do img rather than imgs
The common style of naming is this. In Jekyll these are all under assets usually too.
assets/
img/
foo.png
css/
styles.css
js/
main.js