Forum PHP.pl > Zmienne ścieżki w CSS i JS

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: Zmienne ścieżki w CSS i JS

Forum PHP.pl > Forum > Po stronie przeglądarki

ncmpcpp

10.07.2014, 22:49:04

Witajcie mam taki problem

Używam framework kohana i jest tam jakaś centralizacja konfiguracji, tzn. w głównym kontrolerze zrobiłem stałe i na tym to w moim przypadku polega. Ale w tych stałych jako konfiguracja zapisana jest względna ścieżka do katalogu z aplikacją (np. /cms/ albo /). Mam z tym taki problem, że tych stałych nie mogę wykorzystać w plikach CSS i muszę to zmieniać wszystko ręcznie gdy wrzucam pliki na serwer do jakiegoś innego katalogu. Na pewno da się to zrobić łatwiej. Tylko jak?

404

10.07.2014, 23:00:22

Pokaż swój przykładowy plik CSS i strukturę katalogów.

Sephirus

11.07.2014, 07:39:02

Zawsze możesz podejść do problemu inaczej i ustawiać w HTML znacznik BASE na ścieżkę główną dla danego "modułu".

Jeśli masz np. strukturę:

Kod

- www
     - css
     - js
     - cms
          - css
          - js

albo podobną to w przypadku zwykłej strony ustawiasz BASE na "/" a w przypadku strony z CMS na "/cms/" dzięki czemu przeglądarką będzie korzystać z odpowiednich plików.

proszek

11.07.2014, 09:48:56

Zainteresuj się SASSem, tam masz możliwość używania zmiennych w cssie. Nie wiem czy da się jakoś prościej przerzucić dane z Twojego configa do scss ale pierwsze co przychodzi mi do głowy to użycie do tego Grunta.

http://sass-lang.com/
http://gruntjs.com/

ncmpcpp

11.07.2014, 13:50:39

Struktura w moim przypadku wygląda tak: http://wklej.org/id/1414581/ (uwzględniłem tylko katalogi dotyczące tego problemu).

@Sephirus: czy ten znacznik BASE będzie także obowiązywał wewnątrz dołączonych plików CSS i JS?

W mojej aplikacji dołączam CSS tak:

[HTML] pobierz, plaintext 
<link rel="stylesheet" href="/media/templates/bs/css/style.min.css" type="text/css" />
[HTML] pobierz, plaintext

A później CSS wygląda tak:

Kod

@media (min-width:1200px)
{
.container{width:960px}
}
body
{
background-image:url('/media/templates/bs/bg.png');
background-repeat:repeat
}
...

I tak dalej, czyli chodzi właśnie o te względne ścieżki w CSS głównie do obrazków.

404

11.07.2014, 17:43:27

Nie próbowałeś tak:

Kod

body
{
background-image:url('../../bs/bg.png');
background-repeat:repeat
}

ncmpcpp

11.07.2014, 20:49:14

Ten sposób nie działa. Załóżmy, że aktualnie moja aplikacja znajduje się w localhost/ja/public_html. W CSS ten kawałek kodu:

Kod

body{background-image:url('/media/templates/bs/bg.png');background-repeat:repeat}

szuka pliku w

Kod

http://localhost/media/templates/bs/bg.png

Gdy użyję twojego pomysłu, czyli

Kod

body{background-image:url('/../../bs/bg.png');background-repeat:repeat}

przeglądarka szuka pliku w

Kod

http://localhost/bs/bg.png

--

Oczywiście powinno być

Kod

http://localhost/ja/public_html/media/templates/bs/bg.png

404

11.07.2014, 21:10:31

To nie jest mój pomysł. Mój pomysł wyglądałby tak:

Kod

body{background-image:url('../../bs/bg.png');background-repeat:repeat}

ncmpcpp

11.07.2014, 21:58:07

W takim razie ten pomysł jest dobry, ponieważ działa

Na początku go odrzuciłem, a nie pomyślałem o tym, że ten slash na początku tak wiele zmienia.

--
W każdym razie pozostał jeszcze problem JS. Mam taki kod w dołączonym pliku js:

Kod

$(function () {
     $("#submit").click(function () {
         var message = $("#message").val();
         var data = 'message=' + message;
         $.ajax({
             type: "POST",
             url: "/index.php/shoutbox",
             data: data,
             success: function (html) {
                 $("#message").val("");
             }
         });
         return false;
     });
});

Najważniejsza jest ta linijka z url. URL zawsze ma wskazywać na kontroler shoutbox, ale wiadomo on może być w /index.php/shoutbox albo w /ja/public_html/index.php/shoutbox. I tu jest cały problem. Jak to zrobić, żeby dla każdego z tych przypadków działało?

404

11.07.2014, 22:38:21

Korzystasz z Kohana framework. Nie możesz za jego pośrednictwem wygenerować URL do tej akcji i wstawić np. w kod HTML jak zmienną?

ncmpcpp

13.07.2014, 12:05:49

Przepraszam, nie bardzo rozumiem o co ci chodzi. Jak mam wstawić zmienną w kod HTML żeby dało się ją odczytać w dołączonym pliku js?

Znalazłem rozwiązanie:

Kod

Przed dołączeniem pliku js, w którym chcemy używać tej zmiennej. Dzięki temu można "przesłać" do pliku js zmienną, która zawiera ścieżkę względną

Temat do zamknięcia.

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.