Nadrzędne i podrzędne motywy projektowe

Jak korzystać z plików jednego motywu projektu w motywach innych aplikacji.

Sekcje strony internetowej utworzone przez różne aplikacje wykorzystują oddzielne motywy projektu, ponieważ każdy motyw dotyczy tylko swojej aplikacji. Na przykład strony "Witryny" używają jednego motywu graficznego, a strony "Blog" innego.

Strony w różnych sekcjach mogą mieć różne lub podobne motywy graficzne. Istnieją dwa podstawowe sposoby uzyskania podobnego wyglądu stron w różnych sekcjach witryny:

• Kopiowanie kodu projektu z motywu jednej aplikacji do plików motywu innej aplikacji. To podejście jest najłatwiejsze na początku, ale bardziej kłopotliwe, gdy pojawiają się aktualizacje motywu projektu, ponieważ ten sam zaktualizowany kod musiałby zostać skopiowany z jednego motywu do drugiego.
• Przechowywać typowe fragmenty projektów w jednym motywie i podłączać je w razie potrzeby do innych motywów. Takie podejście pozwala uniknąć dodatkowej pracy i błędów przy kopiowaniu. Wszystko, co musisz zrobić, to określić, które pliki mają być przechowywane w motywie nadrzędnym i jak inne motywy (motywy podrzędne) mają z nich korzystać.

Różnice motywów nadrzędnych i podrzędnych

Motyw nadrzędny motywu projektowego nie korzysta z plików innych motywów i działa jako samodzielny motyw. Jest to najprostszy motyw graficzny.

Motyw podrzędny wykorzystuje niektóre pliki motywu nadrzędnego. Na przykład style CSS lub szablony dla typowych elementów, takich jak nagłówki, paski boczne i stopki.

Plik theme.xml motywu podrzędnego musi zawierać następujące elementy:

• Atrybut parent_theme_id elementu theme zawierający ID motywu nadrzędnego i jego aplikacji w formacie app_id:theme_id.

  Przykład dla motywu aplikacji "Zdjęcie", który jest motywem podrzędnym w stosunku do motywu nadrzędnego "Witryny":

  <theme id="mytheme" vendor="123456" author="ThemeDeveloper" app="photos" parent_theme_id="site:mytheme" version="1.0.0">

• (opcjonalnie) Atrybut parent="1" dla tych plików, które muszą być dołączone do motywu podrzędnego z projektu motywu nadrzędnego. Przykład dla pliku index.html, który istnieje tylko w motywie nadrzędnym i jest dołączany przez motyw podrzędny:

  <file path="index.html" parent="1">
  </file>

  Pliki te mogą być edytowane przez użytkownika backendu w edytorze projektu zarówno motywu nadrzędnego, jak i podrzędnego.

W przeciwnym razie motywy nadrzędny i podrzędny są traktowane podobnie.

Zmienne Smarty do podłączania plików

Pliki motywów graficznych nadrzędnego i podrzędnego można łączyć w kodzie szablonu HTML za pomocą zmiennych. Zmienne mogą być używane tylko w plikach HTML - ich wartości nie są dostępne w innych plikach.

Jeśli motyw projektowy zostanie przywrócony do pierwotnego stanu, wówczas wymienione tutaj zmienne odnoszą się do katalogu wa-apps/[app_id]/themes/[theme_id]/ lub jego adresu URL.

Jeśli użytkownik zapisał ustawienia motywu projektu lub jeśli motyw został pobrany ręcznie jako archiwum za pomocą edytora projektów, wówczas zmienne w tym miejscu odnoszą się do katalogu wa-data/public/apps/[app_id]/themes/[theme_id]/ lub jego adresu URL.

Włącznie z plikami JavaScript, CSS i czcionek

Zmienne te zwracają adres URL katalogu motywu, dzięki czemu można dołączyć tylko pliki dostępne przez przeglądarkę, takie jak pliki CSS lub JS.

$wa_theme_url

Względny adres URL katalogu tematycznego, do którego należy plik HTML. Jeśli włączona jest sieć CDN, ta zmienna zawiera abstrakcyjny adres URL kopii CDN motywu.

Jeśli motyw potomny używa pliku motywu nadrzędnego z atrybutem parent="1", to zmienna ta będzie zawierać adres URL katalogu motywu nadrzędnego.

We własnych plikach motywu podrzędnego zmienna zawiera adres URL motywu podrzędnego.

W plikach motywów nadrzędnych zmienna ta zawiera adres URL motywu nadrzędnego.

Przykład

<link href="{$wa_theme_url}extra.css" rel="stylesheet" type="text/css">

$wa_real_theme_url

Względny adres URL katalogu motywu, do którego należy bieżący plik HTML - jako $wa_theme_url. Zawsze zawiera adres URL katalogu motywu na serwerze, na którym zainstalowany jest system Web-systems.pro - ignorując ustawienia CDN.

Przykład

<link href="{$wa_real_theme_url}extra.css" rel="stylesheet" type="text/css">

$wa_active_theme_url

Względny adres URL katalogu motywu projektu, który jest używany w bieżącym pliku HTML na stronie witryny.

Jeśli motyw podrzędny używa pliku motywu nadrzędnego z atrybutem parent="1", zmienna w tym pliku zawiera adres URL bieżącego motywu: nadrzędnego lub podrzędnego.

We własnych plikach motywu podrzędnego zmienna zawiera adres URL motywu podrzędnego.

W plikach motywów nadrzędnych zmienna ta zawiera adres URL motywu nadrzędnego.

Przykład

<link href="{$wa_active_theme_url}extra.css" rel="stylesheet" type="text/css">

$wa_parent_theme_url

Względny adres URL motywu nadrzędnego.

Ta zmienna powinna być używana w plikach HTML motywu podrzędnego tylko wtedy, gdy chcesz dołączyć plik motywu nadrzędnego zamiast swojego własnego.

Przykład

<link href="{$wa_parent_theme_url}mytheme.css" rel="stylesheet" type="text/css">

Dołączanie plików HTML

$wa_active_theme_path

Pełna ścieżka do katalogu motywu projektu, który używa bieżącego pliku HTML na stronie witryny.

Jeśli bieżący plik HTML jest dołączony do motywu podrzędnego za pomocą atrybutu parent="1", zmienna w tym pliku zawiera ścieżkę do katalogu motywu podrzędnego lub nadrzędnego bieżącej strony witryny.

Przykład

{include file="`$wa_active_theme_path`/sidebar.html"}

$wa_parent_theme_path

Pełna ścieżka do nadrzędnego katalogu motywu.

W plikach motywów podrzędnych ma sens tylko łączenie plików projektu motywu nadrzędnego.

Przykład

{include file="`$wa_parent_theme_path`/home.html"}