发表新帖
发表新帖

How to use relative paths for included files such as .css

后端 未结
关注
8 1246
梦如初夏
梦如初夏 2020-12-29 15:07

I have a header.php file which contains a .css file link.

When I \"include\" header.php into another php file in different fo

相关标签:
8条回答
  • 没有蜡笔的小新
    2020-12-29 15:24

    I can see one reason for wanting to have dynamic and relative path generation for href links, and that is if you run your project on multiple domains or sites that have different paths. (For example, your project is available on http://myproject.example.org/ and also on http://example.org/myprojecttest/). If this is not the case, I would suggest directly specifying your css includes relative to the root folder:

    <link href="/css/style.css" />

    If this does apply to you, try this:

    In every top-level document that requires header.php, add a $ROOT variable that indicates the top-level document's location compared to the root. e.g.:

    $ROOT = './';

    or

    $ROOT = '../';

    or

    $ROOT = '../../';

    Now, in your header.php file, you can use:

    <link href="<?php echo $ROOT; ?>css/style.css" />

    This allows you to make a header.php file that will work for any page at any relative path.

    Full Example

    Included File (/path/header.php)

    <html><body>
<head>
    <link href="<?php echo $ROOT; ?>css/style.css" />
[...]

    File 1 (/path/index.php):

    <?php
$ROOT = './';
include 'header.php';
?>

    File 1 (/path/admin/index.php):

    <?php
$ROOT = '../';
include '../header.php';
?>

    File 3 (/path/admin/test/magic.php):

    <?php
$ROOT = '../../';
include '../../header.php';
?>
    0 讨论(0)
  • 余生分开走
    2020-12-29 15:29

    Simply define your base URL and concatenate it in CSS or JavaScript reference.

    Define it as below.

    define ('host_address','http://localhost:85/grc/');
define('css', host_address.'styles/');

    I have defined base URL by host_address and CSS and used both of them as below.

    <link rel="stylesheet" href='.css.'custom.css>
    0 讨论(0)
  • 天命终不由人
    2020-12-29 15:32

    You have few options, which i've tried to gather here

    base href

    <head>
<base href="http://www.mysite.com/" />
</head>

    What it does, is sets all hrefs to point to certain path. With this set, you can use <link rel='stylesheet' href='css/mycss.css' /> and successfully load mycss.css file even if you're page is deep down in http://www.mysite.com/pages/2012/public/secret_folder/myownphpfile.php

    absolute paths

    You can always use aboslute paths such as, but it can be a pain to change folders of files later on.

    <link rel='stylesheet' href='http://www.mysite.com/css/mycss.css' />

    defined pats

    As @Discomatt told, using PHP defined paths is a easy way to keep things working. Downside; you have to use PHP. if you use it anyways, no problems ^^

    define('CSSDIR', 'http://www.mysite.com/css/);
<link rel='stylesheet' href='<?= CSSDIR ?>mycss.css' />
    0 讨论(0)
  • 南笙
    2020-12-29 15:37

    This is a reason many large applications will try to set a 'root URI' constant/variable when installing.

    While /css/style.css will work if your application is located in the root directory of the domain/subdomain, it will fail if it isn't (/appName/css/style.css)

    Store the absolute URI to the 'root' script folder along with other configuration constants/variables, and building absolute links becomes a breeze.

    define( 'SCRIPT_ROOT', 'http://localhost/yourApplication' );
// ...
echo '<link rel="stylesheet" type="text/css" href="'.SCRIPT_ROOT.'/css/style.css">';
    0 讨论(0)
  • 情歌与酒
    2020-12-29 15:42

    Based on Tom's answer I did a combination of base url and a PHP define (for less typing).

    Somewhere in PHP:

    define("HOST_BASE", "http://example.com/");

    Then in the header file:

    <base href="<?php echo HOST_BASE ?>">

    The base tag was new to me and I was worried about compatibility, but it appears to work well. There is more info about it at MDN.

    0 讨论(0)
  • 别那么骄傲
    2020-12-29 15:42

    Have a look at this answer to load css relative to the current js-file:
    https://stackoverflow.com/a/56580810/4865307

    With this trick, you just call c1CssImport() where you like to include relative-url based css files:

    c1CssImport('./ui.css');
    0 讨论(0)
 看不清?
提交回复
热议问题