CSS and Javascript files do not load when I use Amigavel URL

Question

Hello,

I’m trying to create URL Amigavel and even worked in some pages only in some is not working CSS, JS etc..

I’m using this in . htaccess:

<IfModule mod_rewrite.c>
  RewriteEngine On

  RewriteRule ^home/?$ /index.php?p=home [NC,L]

  RewriteRule ^sign_in/?$ /index.php?p=sign_in&action=get-in [NC,L]

  RewriteRule ^sign_up/?$ /index.php?p=sign_up&action=new-user [NC,L]

  RewriteRule ^ranking/([0-9]+)/?$ /index.php?p=ranking&c=$1 [NC,L]

  RewriteRule ^item/([0-9]+)/?$ /index.php?p=topic&id=$1 [NC,L]

</IfModule>

The home pages, Sign in and Sign up worked right the CSS the JS etc loaded.. now on the ranking page and item did not load the CSS and JS, so I gave an Inspect element and the CSS and JS did not work because it is not in the folder 'ranking', ai I ask you, I’ll have to create a folder 'ranking' and 'item' and add all the files that already exist again in this folder (all the files I speak the css folder that contains the files and the js folder that is the javascript)?

Answer 1

The simplest way to resolve static links is to define the HTML tag

<base href="http://endereço.base-do-seu.site/">

Another way is to set the absolute path on all links (href, src) or the correct path to the base path if you want to keep relative paths.

Example of absolute path (Absolute path): http://endereço.base-do-seu.site/css/styles.css

Example of relative path (relative path): /css/styles.css

Note the difference in mounting relative paths

When starting with bar (/), the base will be the root folder, that is, it is the same as pointing to http://endereço.base-do-seu.site/.

If you do not specify the base, the links will point to several base paths. Example:

Suppose the page is on http://endereço.base-do-seu.site/pasta. If the CSS is pointing to css/styles.css, is like linking to http://endereço.base-do-seu.site/pasta/css/styles.css.

For this example case, you can solve by retreating the directory or by explicitly defining a base by the HTML tag or absolute path.

Obs: We’re talking about links to CSS and JS, but this applies to all kinds of links.