CSS/JS 中的动态 URL

发布于 2024-07-19 07:53:18 字数 685 浏览 5 评论 0原文

我正在拆分我的一个较大的应用程序，并引入一个“cdn”url 来容纳 CSS、javascript 和图像等常见对象，以避免重复。不过，我需要做的是为我们的开发环境提供单独的 URL，所以我可能有：

http://cdn-dev.example.com
http://cdn-qua.example.com
http://cdn.example.com

取决于我们工作的环境。我可以让它适用于由我们的 PHP 代码生成的东西，但我我对将要调用的 .css 和 .js 文件感到困惑。例如，我如何做类似的事情：

.cool-button { background-image: url('http://cdn.example.com/images/button.png'); }

在不同域之间切换？

处理这个问题的最佳方法是什么？

[编辑]

大家都清楚，CDN 地址与网站是不同的域。因此，开发站点可能是 http://www-dev.domain.com ，它将使用 http://cdn-dev.domain.com

原文

I'm splitting up one of my larger apps and introducing a 'cdn' url to house common objects like CSS, javascript, and images to avoid duplication. What I need to do, though, is have separate URLs for our dev environments, so I may have:

http://cdn-dev.example.com
http://cdn-qua.example.com
http://cdn.example.com

depending on what environment we're working in. I can get this to work for things that are generated by our PHP code, but I'm at a loss for the .css and .js files that will be called. For example, how do I make something like:

.cool-button { background-image: url('http://cdn.example.com/images/button.png'); }

switch between the different domains?

What's the best way to deal with that?

[EDIT]

Just so everyone is clear, the CDN address is a different domain that the site. So, the dev site might be http://www-dev.domain.com which would use http://cdn-dev.domain.com

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

落在眉间の轻吻 2024-07-26 07:53:18

使用相对路径，而不是绝对路径。当位于 CSS 文件内时，路径是相对于 CSS 文件而不是 HTML 页面的。

如果你的CSS文件在这里

http://cdn.example.com/css/style.css

并且你的类是

.cool-button { background-image: url('../images/button.png'); }

那么浏览器将尝试从以下位置加载图像

http://cdn.example.com/images/button.png

Use relative paths, not absolute paths. When inside a CSS file, the path is relative to the CSS file and not the HTML page.

If your CSS file is here

http://cdn.example.com/css/style.css

And your class is

.cool-button { background-image: url('../images/button.png'); }

Then the browser will attempt to load the image from

http://cdn.example.com/images/button.png

回复收藏 0 原文

ㄖ落Θ余辉 2024-07-26 07:53:18

只使用域相对 url 吗？

.cool-button { background-image: url('/images/button.png'); }

然后浏览器会在当前域名下查找。

Just use domain-relative url's?

.cool-button { background-image: url('/images/button.png'); }

Then the browser will look under the current domain.

回复收藏 0 原文

千秋岁 2024-07-26 07:53:18

您还可以有一个构建过程并使用模板来生成特定于环境的文件

，例如文件中

在名为 yoursite.template.css .cool-button { background-image: url('@@URL@@/images/button.png'); 的创建

yoursite.css 文件，然后将 @@URL@@ 替换为您想要的域。

回复收藏 0 原文

献世佛 2024-07-26 07:53:18

根据您的服务器配置，您还可以将 .php 扩展名附加到文件名中，并将它们也视为 PHP 脚本：

I.E.: style.css.php would contain:

.cool-button { background-image url(<?php echo $bgImgUrl;?>); }

这也适用于 JavaScript 文件。

Depending on your server configuration, you can also append the .php-extension to your filenames and have them treated as PHP scripts too:

I.E.: style.css.php would contain:

.cool-button { background-image url(<?php echo $bgImgUrl;?>); }

This also works for JavaScript-files.

回复收藏 0 原文

与酒说心事 2024-07-26 07:53:18

事实上，我今天一直在做同样的事情，这就是我的想法。

将其粘贴到站点根目录下的 .htaccess 文件中。这显然依赖于 Apache 和 Mod_rewrite。

RewriteEngine on
RewriteBase /

# Redirect content to the CDN

RewriteCond %{HTTP_HOST} !^cdn\.server\.com$    [NC]
RewriteRule .*\.(jpg|gif|png|flv|css|js|swf)$   http://cdn.server.com/$0    [R=301,L]

这会将括号中的文件类型的请求发送到您的 CDN，并将其他类型的请求保留在您的主服务器上。

I've literally just been working on the same thing today and here's what I came up with.

Stick this in your .htaccess file in the root of your site. This obviously relies on Apache and Mod_rewrite.

RewriteEngine on
RewriteBase /

# Redirect content to the CDN

RewriteCond %{HTTP_HOST} !^cdn\.server\.com$    [NC]
RewriteRule .*\.(jpg|gif|png|flv|css|js|swf)$   http://cdn.server.com/$0    [R=301,L]

This will send requests for the file types in the brackets to your cdn and keep requests for other types on your primary server.

回复收藏 0 原文

甜是你 2024-07-26 07:53:18

在寻找这个问题的答案时，我看到了一个简单的方法：使用重复的类创建 css 文件，一个用于场景 1（从同一域加载图像），另一个用于场景 2（从 CDN 加载图像）。

例如

.container {background-image:url(my/site/image.png;)}
.container-CDN {background-image:url(http://my.site.cdn.com/image.png;)}

然后在你的index.php中引入PHP来调用正确的类

，例如

<body class="container<?PHP if ($whatever) {echo "-CDN";} ?>">

Searching for an answer to this too, I saw a simple one: create your css file with duplicate classes, one for scenario 1 (images load from same domain) and another for scenario 2 (images load from CDN).

e.g.

.container {background-image:url(my/site/image.png;)}
.container-CDN {background-image:url(http://my.site.cdn.com/image.png;)}

Then on your index.php introduce PHP to call the correct class

e.g.

<body class="container<?PHP if ($whatever) {echo "-CDN";} ?>">

回复收藏 0 原文

笑，眼淚并存 2024-07-26 07:53:18

如果服务器相同，则可以使用相对路径。像 /http/blah/test/images/button.png 或 ../images/button.png

回复收藏 0 原文

拧巴小姐 2024-07-26 07:53:18

使用相对 URL 时，您可以强制使用“基本”URL。
在<头部>中标签，使用

。然后，每个相对链接“/style.css”将指向“http://cdn-dev .example.com/style.css"

参考：http://www.example.com/style.css " w3schools.com/TAGS/tag_base.asp

回复收藏 0 原文

把时间冻结 2024-07-26 07:53:18

嗯...我想出的解决方案是...有点...老套、丑陋和愚蠢。但是，天哪，它成功了：

<?php
    if ($_SERVER['SERVER_NAME'] == "www.domain.tld") {

        $incs_path  = "/usr/local/psa/home/vhosts/domain.tld/non-web-root-folder/private-files";

    }
    else {
        $incs_path  = "incs";
    }

require_once "$incs_path/$file-to-be-called.inc";

?>

正如所指出的，这很糟糕而且丑陋，而且可以做得更漂亮。但它至少允许您根据主机为特定文件组定义特定位置。

Well...the solution I came up with was...sorta...hackish, ugly and dumb. But, hell, it worked:

<?php
    if ($_SERVER['SERVER_NAME'] == "www.domain.tld") {

        $incs_path  = "/usr/local/psa/home/vhosts/domain.tld/non-web-root-folder/private-files";

    }
    else {
        $incs_path  = "incs";
    }

require_once "$incs_path/$file-to-be-called.inc";

?>

This is, as noted, hacky and ugly and could be done far more prettily. But it does, at least, allow you to define specific locations for specific groups of files depending on the host.

回复收藏 0 原文

~没有更多了~