bluetronix CMS에 나만의 JavaScript 및 CSS 파일 포함하기

조건 및 목표

이 튜토리얼을 진행하려면 개발자 접근권한이 필요하며, 레이아웃 및 개발자 폴더의 구조를 알아야 합니다. 기존 CMS 파일에 추가하여 관련 JavaScript 및 CSS 파일을 통합하는 방법을 배우게 되며, 원본 시스템 파일은 변경하지 않습니다.

스크린샷에 표시된 파일 BxHeadScript_own.js와 BxStyle_own.css를 사용합니다. 두 파일은 레이아웃에 명시적으로 포함되어, CMS가 웹 페이지 로딩 시 이를 고려하도록 합니다.

1. 레이아웃 열기

CMS에서 레이아웃 영역을 열고 레이아웃 - HTML을 선택하세요. 이후 JavaScript 및 CSS 파일을 포함할 레이아웃을 엽니다. 이 예제에서는 표준 레이아웃을 사용합니다.

레이아웃 정의에는 이미 중앙 CMS 파일에 대한 포함이 있습니다. 예를 들어 BxHeadScript.js와 BxStyle.css가 포함되어 있습니다. 추가적인 파일은 그 옆에 직접 입력할 수 있습니다.

2. 파일 관리자에서 자신의 JavaScript 파일 만들기

파일 관리자를 열고 빨간색으로 표시된 시스템 폴더 bx_script로 이동하세요. 그곳에서 bluetronix CMS의 중앙 JavaScript 파일을 찾을 수 있으며, 언어에 따라 다른 버전도 있을 수 있습니다.

거기에서 개인 파일 BxHeadScript_own.js를 생성하거나 이미 존재하는 파일을 선택하세요. 적절한 기존 파일을 템플릿으로 복사할 수 있습니다.

편집을 선택하여 텍스트 편집기에서 개인 파일의 JavaScript 코드를 엽니다.

표시된 예제에는 다크 모드와 라이트 모드 선택을 위한 개인 JavaScript 코드가 포함되어 있습니다. 텍스트 편집기에서 프로젝트 전용 JavaScript 코드를 관리하고 저장할 수 있습니다.

자체 확장을 위해 원본 BxHeadScript.js를 변경하지 마세요. bx_ 시스템 폴더 내의 파일은 CMS 업데이트 시 덮어씌워질 수 있으므로, 개인 파일은 _own으로 표시해야 합니다.

3. 레이아웃에 자신의 JavaScript 파일 포함하기

다시 레이아웃 - HTML로 돌아갑니다. 기존 CMS 파일 외에 개인 JavaScript 파일을 추가합니다. 스크립트를 빨리 로드해야 하는 경우, 기존 Head-Script 뒤에 스크린샷과 같이 head 영역에 추가합니다.

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

추가된 줄은 개인 JavaScript 코드를 로드합니다. 원본 BxHeadScript.js는 변경되지 않습니다. 파일 경로와 개인 파일의 명칭은 파일 관리자 내의 파일과 일치해야 합니다.

4. 파일 관리자에서 자신의 CSS 파일 만들기

파일 관리자에서 시스템 폴더 bx_style를 엽니다. 여기에는 중앙 스타일시트 BxStyle.css가 포함되어 있습니다. 개인 맞춤형 파일로 BxStyle_own.css라는 별도의 파일을 사용합니다.

파일 BxStyle_own.css를 생성하거나 존재하는 개인 파일을 엽니다. 이때 시스템 파일 BxStyle.css는 그대로 유지됩니다.

편집을 통해 이 파일에 본인의 CSS 규칙을 추가하고 저장할 수 있습니다.

5. 레이아웃에 자신의 CSS 파일 포함하기

다시 레이아웃 - HTML로 이동합니다. head 영역에서 기존 스타일시트 뒤에 개인 CSS 파일을 추가합니다. 개인 규칙이 기본 형식을 덮어써야 할 경우, 순서가 중요합니다.

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

기본 CSS 파일은 그대로 유지되며, 추가적이거나 다른 형식을 BxStyle_own.css에서 별도로 관리합니다.

6. 헤드 또는 페이지 끝에서 JavaScript 사용하기

JavaScript 파일은 용도에 따라 head 영역이나 페이지 끝의 닫는 body 태그 앞에 포함될 수 있습니다. 표시된 BxHeadScript_own.js는 Head에 로드됩니다. 다른 스크립트의 경우, 개인 프로젝트 폴더를 사용하고 나중에 레이아웃에 포함할 수 있습니다.

페이지 끝에 개인 폴더에서 추가 파일의 예:

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

이 예제는 추가적인 파일을 보여줍니다. 대신 시스템 파일을 개인 버전으로 교체하려는 경우, 선택한 레이아웃에서 해당 포함을 명시적으로 조정하고 필요한 CMS 기능이 누락되지 않았는지 확인해야 합니다.

7. 시스템 폴더와 개인 프로젝트 폴더 구분하기

빨간색으로 표시된 bx_ 폴더는 bluetronix CMS의 일부입니다. 이 폴더 내부의 개인 파일은 _own으로 표시해야 하며, 그래야 일반 CMS 업데이트에서 시스템 파일처럼 다루어지지 않습니다.

개인 JavaScript 및 CSS 파일은 bx_ 접두사 없이 자작한 프로젝트 폴더에 배치할 수도 있습니다. 예를 들어 /script/ 또는 /my_scripts/와 같이 말입니다. 그곳에서는 _own 표시가 필수는 아닙니다. 이후 자신의 레이아웃 정의에서 실제 경로를 사용해야 합니다.

표시 _own은 레이아웃 내 포함을 대체하지 않습니다: 따로 생성한 파일은 적절한 script 또는 link 줄을 통해 포함될 때만 로드됩니다.

8. 자동 파일 버전 관리

표시된 레이아웃 통합에서 bluetronix CMS는 __FV_…__ 태그를 사용합니다. 이를 통해 CMS는 수정 날짜에 따라 버전 매개변수를 추가할 수 있습니다. 변경 후 브라우저는 구 버전의 캐시를 사용하는 대신 최신 JavaScript 또는 CSS 파일을 로드합니다.

예: 원래 경로인 /script/MyScript.js는 처리 후 버전 매개변수가 추가될 수 있습니다. 해당 파일이 적절히 통합된 경우 레이아웃마다 버전 번호를 직접 업데이트할 필요가 없습니다.

9. 변경 사항 저장 및 확인하기

먼저 자신의 JavaScript 및 CSS 파일을 저장한 후 수정한 레이아웃을 저장하세요. 웹 사이트를 새로 고치고 JavaScript 기능이 실행되고 자신의 CSS 규칙이 적용되는지 확인하세요.

파일이 로드되지 않는 경우 먼저 파일 이름, 대소문자, 폴더 경로 및 레이아웃 내 통합을 확인하세요. 여러 레이아웃이 사용 중이라면, 해당 페이지에 할당된 레이아웃을 수정했는지도 확인하세요.

요약

자신의 확장을 위해 BxHeadScript_own.js를 bx_script 폴더에, BxStyle_own.css를 bx_style 폴더에 생성합니다. 그런 다음 두 파일을 Layout - HTML에 원래 CMS 파일과 함께 추가로 통합합니다. 그렇게 하면 기본 파일은 변경되지 않고, 프로젝트 특정 JavaScript 및 CSS 코드를 별도로 관리할 수 있습니다.