Dodawanie własnych plików JavaScript i CSS w bluetronix CMS

Wymagania i cel

Aby przejść przez ten poradnik, potrzebujesz dostępu dewelopera do CMS bluetronix i powinieneś znać struktury układów i folderów dewelopera. Nauczysz się, jak dodać własne pliki JavaScript i CSS obok już istniejących plików CMS, nie zmieniając oryginalnych plików systemowych.

Używamy plików pokazanych na zrzutach ekranu BxHeadScript_own.js i BxStyle_own.css. Oba pliki są wyraźnie dodawane w układzie, aby CMS brał je pod uwagę podczas ładowania strony.

1. Otwórz układ

Otwórz w CMS sekcję Układ i wybierz Układ - HTML. Następnie otwórz układ, do którego chcesz dodać swoje pliki JavaScript i CSS. W tym przykładzie używamy domyślnego układu.

W definicji układu znajdziesz już dodania dla podstawowych plików CMS, takich jak BxHeadScript.js i BxStyle.css. Dodatkowe własne pliki możesz dodać obok.

2. Utwórz własny plik JavaScript w menedżerze plików

Otwórz Menadżera plików i przejdź do oznaczonego na czerwono folderu systemowego bx_script. Znajdziesz tam centralne pliki JavaScript CMS bluetronix oraz, jeśli to konieczne, zależne od języka warianty.

Utwórz tam własny plik BxHeadScript_own.js lub wybierz go, jeśli już istnieje. Możesz skopiować odpowiedni istniejący plik jako wzór.

Wybierz Edytuj, aby otworzyć kod JavaScript swojego własnego pliku w edytorze tekstu.

W pokazanym przykładzie plik zawiera własny kod JavaScript do wyboru między trybem ciemnym a trybem jasnym. W edytorze tekstu możesz zarządzać swoim projektem kodem JavaScript i zapisać go.

Nie zmieniaj oryginalnego BxHeadScript.js dla własnych rozszerzeń. Pliki w folderze systemowym bx_ mogą być zastępowane podczas aktualizacji CMS. Oznaczaj swoje pliki tam jako _own.

3. Dodaj własny plik JavaScript do układu

Wróć do Układ - HTML. Dodaj swój własny plik JavaScript obok istniejącego pliku CMS. Jeśli chcesz, aby Twój skrypt był ładowany wczesniej, dodaj go jak na zrzucie ekranu w sekcji head po istniejącym skrypcie nagłówka.

<script src="__FV_/bx_script/BxHeadScript_own_min.js__"></script>
<script src="__FV_/bx_script/BxHeadScript_own.js__"></script>

Dodatkowa linia ładuje Twój własny kod JavaScript. Oryginalny BxHeadScript.js pozostaje niezmieniony. Ścieżka do pliku i pisownia własnego pliku muszą zgadzać się z plikiem w menedżerze plików.

4. Utwórz własny plik CSS w menedżerze plików

Otwórz w Menadżerze plików folder systemowy bx_style. Znajduje się tam między innymi centralny arkusz stylów BxStyle.css. Do własnych modyfikacji używamy osobnego pliku o nazwie BxStyle_own.css.

Utwórz plik BxStyle_own.css lub otwórz istniejący własny plik. Plik systemowy BxStyle.css pozostaje nienaruszony.

Przez Edytuj możesz w tym pliku przechowywać i zapisywać własne zasady CSS.

5. Dodaj własny plik CSS do układu

Otwórz ponownie Układ - HTML. W sekcji head dodaj swój własny plik CSS po istniejącym arkuszu stylów. Kolejność ma znaczenie, jeśli własne reguły mają nadpisywać domyślne formatowanie.

<link rel="stylesheet" href="__FV_/bx_style/BxStyle_own_min.css__">
<link rel="stylesheet" href="__FV_/bx_style/BxStyle_own.css__">

Domyślny plik CSS pozostaje, podczas gdy dodatkowe lub odmienne formatowanie zarządzasz osobno w BxStyle_own.css.

6. Użyj JavaScriptu w nagłówku lub na końcu strony

Pliki JavaScript mogą być dodawane w zależności od swojego zadania w sekcji head lub na końcu strony przed zamykającym tagiem body. Pokazana BxHeadScript_own.js jest ładowana w nagłówku. Dla innych skryptów możesz również użyć własnego folderu projektu i później dodać plik w układzie.

Przykład dodatkowego pliku z własnego folderu na końcu strony:

<script src="__FV_/bx_script/BxScript_own_min.js__"></script>
<script src="__FV_/script/MyScript.js__"></script>

Ten przykład pokazuje dodatkowy plik. Jeśli zamiast tego chcesz zastąpić plik systemowy własną wersją, musisz świadomie dostosować odpowiednie wywołania w wybranym układzie i upewnić się, że żadne niezbędne funkcje CMS nie znikają.

7. Rozróżnij foldery systemowe i własne foldery projektu

Oznaczone na czerwono foldery bx_ należą do CMS bluetronix. Własne pliki w tych folderach muszą być oznaczone jako _own, aby podczas regularnych aktualizacji CMS nie były traktowane jak pliki systemowe.

Możesz również przechowywać własne pliki JavaScript i CSS w stworzonych własnoręcznie folderach projektowych bez przedrostka bx_, na przykład /script/ lub /my_scripts/. W tym przypadku oznaczenie _own nie jest konieczne. Rzeczywistą ścieżkę musisz następnie użyć w swojej definicji układu.

Oznaczenie _own nie zastępuje osadzenia w układzie: Osobny plik jest ładowany dopiero wtedy, gdy jest osadzony za pomocą odpowiedniej linii script lub link.

8. Automatyczna wersjonowanie plików

W pokazanych wstawkach layoutu system bluetronix CMS używa oznaczenia __FV_…__. Dzięki temu CMS może dodać parametr wersji na podstawie daty zmiany. Po dokonaniu zmiany przeglądarka ładuje aktualny plik JavaScript lub CSS, zamiast ponownie używać starszej wersji z pamięci podręcznej.

Przykład: Początkowa ścieżka, taka jak /script/MyScript.js, może zostać wzbogacona o parametr wersji po przetworzeniu. Nie musisz ręcznie aktualizować numeru wersji w odpowiednich osadzonych plikach przy każdym układzie.

9. Zapisz i sprawdź zmiany

Najpierw zachowaj własne pliki JavaScript i CSS, a następnie edytowany układ. Odśwież swoją stronę internetową i sprawdź, czy Twoje funkcje JavaScript są wykonywane, a własne reguły CSS są zastosowane.

Jeśli plik nie jest ładowany, sprawdź najpierw nazwę pliku, wielkość liter, ścieżkę do folderu i osadzenie w układzie. Jeśli używasz wielu układów, sprawdź także, czy edytowałeś układ przypisany do danej strony.

Podsumowanie

Dla własnych rozszerzeń możesz na przykład stworzyć BxHeadScript_own.js w folderze bx_script i BxStyle_own.css w folderze bx_style. Następnie oba pliki osadzasz w Layout - HTML oprócz oryginalnych plików CMS. W ten sposób pliki standardowe pozostają niezmienione, podczas gdy projektowy kod JavaScript i CSS zarządzasz oddzielnie.