Home / Questions / 42297
Accepted
J. Mick
Asked: 2020-01-05 02:30:22 +0800 CST 2020-01-05 02:30:22 +0800 CST

Friendly urls without losing css/js/image styles

  • 772

I have a website that is too large to edit the URLs of the styles cssand files js, imágenesit would take too much time.

I am testing working on localhost

localhost/project/index.php

The friendly URLs I want:

localhost/project/index/

If the user modifies the URLs like this:localhost/project/index

redirect to:localhost/project/index/

Redirect any modified URLslocalhost/project/online/video/hd/free without a slash to URLs with a trailing slashlocalhost/project/online/video/hd/free/

from plain urls

localhost/project/online.php

Show it like this:

localhost/project/online/video/hd/free/

I have tried with these Examples: .htaccess

Note: in these first few examples .htaccessthe styles css, and files js, imágenesare shown without any problem.

#Eliminar la extensión php/html
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME}.php -f
RewriteRule ^(.*)$ $1.php
#RewriteRule ^([a-zA-Z0-9-/]+)$ index.php

RewriteRule ^online-video-en-hd-gratis$ online.php [L,NC,QSA]

Result:

http://www.example.com/index
http://www.example.com/online-video-en-hd-gratis

The problem is to use a trailing slash /or several additional ones /../when using the slashes the styles are lost css, among the other files js, imágenes.

Example one: (adding a trailing slash /)

http://www.example.com/index/

Example two: (adding multiple bars /)

RewriteEngine on
RewriteRule ^online/video/hd/aventuras/$ online.php [L,NC,QSA]

Result:

http://www.example.com/online/video/hd/aventuras/

Important:

I have looked at this website http://crazycafe.net/demos/seo/ and it's source code, the styles cssare kept like this: <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">without adding an absolute url to the styles cssand their files jsand they imagenesload without problem.

I found this question on Stack Overflow on Inlges, how to preserve CSS styles.

Some of his examples were:

RewriteRule ^images/(.+)?$ images/$1 [NC,L]
RewriteRule ^js/(.+)?$ js/$1 [NC,L]
RewriteRule ^topnav/(.+)?$ topnav/$1 [NC,L]
RewriteRule ^common-style\.css$ common-style.css
RewriteRule ^jquery\.js$ jquery.js
RewriteRule ^script/js/(.+)?$ script/$1 [NC,L]

But I really don't quite understand the secrets of .htaccess

My file directory( folder ) is:

assets/css/style.css
assets/js/app.js
assets/fonts/icons/image.png
assets/fonts/ttf/roboto.ttf
assets/img/system/image.png
assets/img/logo.png

Now my question is?

There is a possibility to fix these errors directly from the .htaccess file without having to change the files path css, js, imágenesto an ( absolute ) path.

I hope this question is not considered too long, please edit my question to MCVE recommendations

php

1 Answers

  1. Best Answer

    The solution could be to redirect everything that exists in the last level subdirectories to those files directly, instead of trying to get them from their real paths (the ones that generate the use of slashes in friendly URLs) or send them to a PHP ( if you use a generic redirect rule).

    Here are the rules .htaccessyou should use to detect any "assets" path that follows a directory named "css", "js", "fonts", or "img":

    # Activamos mod_rewrite
RewriteEngine on

# Definimos la ruta base, por facilidad, una única vez
SetEnvIf RUTA_BASE ^(.*)$ RUTA_BASE=/project/

# Aquí nos evitamos comprobar que sea un archivo (agrego comprobación
# para detectar también directorio) en cada conjunto de reglas
RewriteCond %{REQUEST_FILENAME} -d [OR]
RewriteCond %{REQUEST_FILENAME} -f
RewriteRule ^(.*)$ $1 [QSA,L]

# Obtenemos todo lo que vaya tras "assets/"
RewriteCond %{REQUEST_URI} assets/(.+)$
# Y éstos coinciden con un archivo existente..
RewriteCond %{DOCUMENT_ROOT}%{ENV:RUTA_BASE}assets/%1 -f
# Entonces (si se cumplen todas las condiciones) redirigimos (R)
# y dejamos de evaluar el resto de reglas (L)
RewriteRule ^(.*)$ %{ENV:RUTA_BASE}assets/%1 [L,R]

# Tu/s regla/s
RewriteRule ^online-video-en-hd-gratis/?$ online.php [L,NC,QSA]
RewriteRule ^online/video/hd/free/?$ online.php [L,NC,QSA]

    I have done the following tests to verify its correct operation:

    • The URL http://localhost/project/online/video/hd/free/accesses the php script called online.php.
    • The URL http://localhost/project/online/video/hd/free/assets/css/style.csscauses a header to be sent Location: http://localhost/project/assets/css/style.cssthat redirects the browser to the existing resource.

    The rules have been complicated by being contained in an arbitrary directory. They could have been manually typed in wherever needed, to make it easier to migrate or change the directory in the future, you can easily define the base path at the beginning of the .htaccess, thus avoiding having to change it in multiple places in the file (and possibly , forget about any change).

    If the rules had been in the root, everything would have been easier (and that is what my previous rules were based on) because we used the variable %{DOCUMENT_ROOT}without adding anything else. We could have used %{ENV:BASE}, but in the redirection we would also have had to add that same string, and there we no longer have any Apache environment variable that could help us (or at least I don't know about it).

    I hope now the solution works for you.

    I forgot the second option, although it can generate false positives because I can't (I don't know) check the existence of the file, but to minimize them I make the rule stricter:

    # Activamos mod_rewrite
RewriteEngine on

# Seleccionamos el directorio base para el RewriteRule
RewriteBase /project/

# Aquí nos evitamos comprobar que sea un archivo (agrego comprobación
# para detectar también directorio) en cada conjunto de reglas
RewriteCond %{REQUEST_FILENAME} -d [OR]
RewriteCond %{REQUEST_FILENAME} -f
RewriteRule ^(.*)$ $1 [QSA,L]

# Obtenemos todo lo que vaya tras "assets/" y subdirectorios previstos
RewriteCond %{REQUEST_URI} assets/(css|fonts|js|img)/(.+)$
# Entonces (si se cumplen todas las condiciones) redirigimos (R)
# y dejamos de evaluar el resto de reglas (L)
RewriteRule ^(.*)$ assets/%1/%2 [L,R]

# Tu/s regla/s
RewriteRule ^online-video-en-hd-gratis/?$ online.php [L,NC,QSA]
RewriteRule ^online/video/hd/free/?$ online.php [L,NC,QSA]
    • 5