重定向用户退出浏览器时出现CSS问题';s的语言


CSS issue when redirecting user deppending on browser's language

当试图根据浏览器的语言将用户重定向到同一网站的不同版本时,我遇到了一个愚蠢的问题。

事实上,用户似乎被正确地重定向到了语言网站版本,问题是网站没有正确地加载CSS和JS文件(我认为这是由于它的文件夹结构(,我不确定如何解决它。

为了执行重定向,我设置了一个名为"index.php"的文件,该文件位于根文件夹中,它有以下php代码:

<?php
  header("Location: " . getLanguage());
  function getLanguage(){
    $availableLanguages = array('es', 'en');
    $defaultLanguage = 'en';
    $token = strtok($_SERVER['HTTP_ACCEPT_LANGUAGE'], ",;");
    while ($token !== false) {
      $language = substr($token, 0, 2);
      if (in_array($language, $availableLanguages)) {
        return $language;
      }
      $token = strtok(",;");
    }
    return $defaultLanguage;
  }
?>

正如你所看到的,只有两种语言(英语和西班牙语(。

下一步是放置两个不同的文件夹,上面分别有"index.html"文件:

/西班牙语index.html版本的es-->/en-->针对英文index.html版本

因此,我们可以在服务器上看到以下文件夹结构示例:

  • http://img/picture.jpg
  • js/script.js
  • http://style.css
  • http://en/index.html(该网站的英文版(
  • http://es/index.html(该网站的西班牙语版本(
  • http/index.php

当用户进入网站时,php文件会根据浏览器语言将他重定向到"/en"或"/es"文件夹。。。然后用户加载带有以下html结构的"index.html"文件:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>my site in english</title>
    <link rel='icon' href='img/favicon.png'>
    <!--Styles-->
    <link href="css/styles.css" type="text/css" rel="stylesheet">
</head>
<body>
<p>this is an example</p>
<!--Styles-->
<script src="js/script.js"></script>
</body>
</html>

正如你所看到的,"index.html"定义了css、img和js文件的路径,这些文件位于"root/css"、"root/img"answers"root/js"文件夹中,但网站不会加载它们。。。我不知道为什么?

索引文件现在位于/en或/es内,因此:

<link href="css/styles.css" type="text/css" rel="stylesheet">

应该是:

<link href="../css/styles.css" type="text/css" rel="stylesheet">

注意添加的../以返回文件夹。js和其他资源也是如此。

我建议使用绝对路径,这样你就不会面临类似的问题:

<link href="/css/styles.css" type="text/css" rel="stylesheet">

请注意URI开头的/

您需要调整对外部文件的引用,以"升级"目录(例如../css/styles.css(或从根目录(例如,/css/styles.css(开始。我推荐后者,因为它允许您在目录结构中的任何位置移动,而无需更改任何引用。

例如,如果您正在查看英文页面,则您所拥有的引用正在http://yourdomain.tld/en/css/styles.css中查找一个不存在的文件。