LS3.x의 새로운 템플릿 시스템
From LimeSurvey Manual
소개
참고: 이전 버전의 LimeSurvey에서는 설문조사의 모양, 즉 색상, 글꼴, 레이아웃 및 (일부) 동작 방식을 정의하는 파일을 "템플릿"이라고 불렀습니다. 새로운 관점에 따라 이제 이를 "테마"라고 부르며, 템플릿은 예제 설문조사를 가리키는 용도로 사용됩니다.
이 페이지에서는 다음 방법을 배웁니다:
- LimeSurvey 3.0의 새로운 테마 시스템 사용하기
- 상속을 사용하여 나만의 테마 관리하기
- 테마에 사진 추가하기
- 설문조사 및 설문조사 그룹의 테마 옵션 관리하기
LimeSurvey 3는 Twig 1.29와 Bootstrap을 기반으로 하며 테마 상속과 테마 옵션을 지원하는 완전히 새로운 테마 엔진 시스템을 도입했습니다. 기존의 치환 키워드 시스템은 완전히 제거되었습니다. 이제 프론트엔드 HTML의 100%를 사용자 지정할 수 있습니다. 예를 들어, 기존 테마 시스템에는 실행 시 평가 HTML로 치환되는 {ASSESSMENTS} 키워드가 있었습니다. 테마 디자이너는 (JavaScript를 사용하는 방법 외에는) 이 HTML을 사용자 지정할 방법이 없었습니다. 이제는 이 HTML을 생성하는 로직(Twig로 작성됨)이 담긴 assessments.twig 파일이 있습니다. 이 페이지들에서는 새로운 테마 엔진을 사용하는 방법을 설명합니다.
여기서는 Twig의 작동 방식을 자세히 설명하지 않습니다. Twig는 매우 단순화된 PHP와 비슷하며 "샌드박스" 시스템 덕분에 높은 수준의 보안을 제공합니다(테마 엔진 핵심 코드 부분에서 더 자세히 살펴봅니다). PHP를 이미 알고 있다면 매우 쉽게 익힐 수 있습니다. PHP를 모르더라도 배우기는 꽤 쉬울 것입니다. Twig 1.X 설명서를 참조하십시오:
https://twig.symfony.com/ 관리자 인터페이스를 사용한 편집
테마 목록
관리자 대시보드에는 이제 테마 목록에 접근하는 상자가 있습니다:
목록은 5개의 열로 나뉩니다:
- 테마 미리보기: 테마 루트에 있는 "preview.png"라는 이미지 파일입니다
- 매니페스트(테마 루트의 config.xml)에 지정된 테마의 "제목"
- 테마 설명: 매니페스트에 설정된 문자열
- 테마 유형: 핵심 테마(LimeSurvey와 함께 제공), 사용자 테마(upload 디렉터리에 추가됨), XML 테마(데이터베이스에 로드되지 않음)
- 확장: 테마가 다른 테마를 확장하는 경우 해당 테마의 이름이 여기에 표시됩니다
- 일부 작업 버튼:
- 설치: 테마의 매니페스트를 로드하여 데이터베이스에 추가하고 설문조사 수준에서 선택할 수 있도록 합니다
- 제거: 데이터베이스에서 테마의 구성 항목을 삭제합니다
- 테마 편집기: 테마 편집기로 이동합니다
- 테마 옵션: 테마 옵션의 전역 구성으로 이동합니다
테마 편집기
이 문서는 이전 버전의 LS에서 테마 편집기를 사용하는 방법을 이미 알고 있다고 가정합니다.
테마 편집기는 기존 편집기와 최대한 비슷하게 유지되었습니다. 따라서 핵심 테마를 열면 편집할 수 없습니다. 하지만 이제는 "복사" 버튼 대신 "확장 버튼"이 있습니다.
테마 상속 개념 간단 개요
LS3에서는 테마가 다른 테마를 상속할 수 있습니다. 즉, 다른 테마를 "확장"할 수 있습니다. 이는 테마 디렉터리가 거의 비어 있고, 원본과 다른 파일(뷰, 스타일 시트, 스크립트, 리소스 등)만 포함한다는 뜻입니다. 이렇게 하면 여러 개의 테마를 관리하지 않고도 다양한 사용자를 위한 여러 테마를 쉽게 만들 수 있습니다. 예를 들어, 자체 제작한 테마를 만들고, 그 위에 한 회사용 버전(로고, 스타일, 바닥글의 웹사이트 링크 등 포함), 다른 회사용 버전 등을 만들 수 있습니다. 이후 사용자 지정 테마의 CSS나 전체 레이아웃을 업데이트하면 이를 상속하는 모든 테마가 자동으로 업데이트됩니다. 상속은 재귀적입니다. 테마는 또 다른 테마를 확장하는 테마를 확장할 수 있습니다.
또한 LimeSurvey의 핵심 테마 중 하나를 확장하면 해당 테마의 업데이트 혜택도 계속 받을 수 있다는 뜻입니다.
사용자 인터페이스의 새로운 점
LimeSurvey의 Monochrome 테마를 확장하려면 테마 목록으로 이동하여 Monochrome 테마의 "테마 편집기" 버튼을 클릭합니다. 그런 다음 "확장"을 클릭하고 새 이름 "extends_monochrome"을 확인합니다.
이제 (파일/FTP 클라이언트로) upload 디렉터리로 이동하면 새 디렉터리가 생성된 것을 볼 수 있습니다: upload/themes/extends_monochrome 여기에는 XML 파일과 디렉터리가 있지만 대부분의 디렉터리는 비어 있습니다. 뷰도, CSS도, JS도 없습니다. 그래도 설문조사에서 이 테마를 일반 테마처럼 선택할 수 있으며 Monochrome 테마와 똑같이 보입니다.
테마를 확장할 때 원본 테마의 리소스(jpg, png 등)가 복사됩니다. 원본 테마의 CSS 파일을 로컬로 복사했는데 그 파일이 (background-image 문처럼) 이러한 파일을 참조하는 경우, 현재 테마 경로에서 해당 사진을 찾아야 하기 때문입니다. extends_monochrome 테마의 테마 편집기는 다음과 같습니다:
이전 테마 편집기와 큰 차이는 없습니다. 주요 차이점은 다음과 같습니다:
- 파일 목록의 키워드 inherited. 파일이 테마 디렉터리에 없으며 원본 테마의 파일이 사용된다는 뜻입니다.
- 메인 편집기( ACE 편집기 )는 선택한 파일의 내용을 보여줍니다. 파일에는 HTML, CSS 또는 JS뿐 아니라 Twig 문도 들어 있습니다. 이러한 Twig 문 덕분에 이전에는 핵심 코드 깊숙이 있던 일부 로직을 테마 뷰로 옮겨 사용자 지정할 수 있게 되었습니다.
- 그래서 이제 상단 메뉴의 드롭다운 선택기에서 더 많은 화면 유형을 사용할 수 있습니다. '설문조사 목록', '불러오기', '저장', '오류', '등록', '평가', '응답 인쇄'와 같이 이전에는 없었거나 제대로 사용자 지정할 수 없었던 페이지가 보일 것입니다.
- 파일 목록 하단의 '팁' 링크는 HTML에 사진을 추가하는 Twig 방식을 알려줍니다
- '변경 사항 저장' 버튼이 로컬 테마로 복사하여 변경 사항 저장 버튼으로 바뀝니다
간단한 예: 사진 추가
로컬 테마로 복사하여 변경 사항 저장 버튼은 말 그대로 작동합니다. 파일 내용을 편집한 후 이 버튼을 클릭하면 파일이 편집 중인 테마로 복사되고 변경 사항이 저장됩니다.
예를 들어, layout_global.twig 파일을 클릭하고 콘텐츠 블록( {% block content %}) 바로 앞에 "TEST" 텍스트를 추가한 후 버튼을 클릭합니다. 파일의 레이블이 "inherited"에서 "local"로 바뀌고 버튼이 단순한 변경 사항 저장 버튼이 된 것을 볼 수 있습니다.
파일 탐색기를 열고 upload/themes/extends_monochrome/views/ 디렉터리로 이동하면 layout_global.twig 파일 하나만 있고 그 안에 "TEST" 문자열이 있는 것을 볼 수 있습니다.
이제 임의의 텍스트 대신 사진을 추가해 보겠습니다. 팁 링크를 클릭하면 다음과 같이 알려줍니다:
.twig 파일에서 사진을 사용하는 방법:
{{ image('./files/myfile.png', 'alt-text for my file', {"class": "myclass"}) }}
Twig 설명서를 읽었다면(이 시점에는 읽었어야 합니다) {{ function( ) }}이 함수의 결과를 화면에 출력한다는 것을 알 것입니다. 여기서 함수는 image( )입니다.
이 함수가 어떤 일을 하는지 궁금하다면 여기에서 코드를 볼 수 있습니다(RC3 버전): RC3의 image() 함수
코드를 이해하지 못해도 걱정하지 마십시오. 작동 방식을 알 필요는 없고, 왜 그리고 어떻게 사용하는지만 알면 됩니다.
image() 함수를 사용해야 하는 이유는 두 가지입니다:
- image 함수는 테마를 순회하며 이미지를 찾습니다. 작업 중인 테마가 다른 테마를 확장한 경우, 사진을 삽입한 파일은 로컬로 복사했지만 그 사진은 로컬 테마에 복사하지 않았다면, 테마 상속 트리를 순회하여 사진이 있는 위치를 찾습니다.
- 에셋 관리자를 사용하므로 테마의 성능이 향상됩니다. 자세한 내용은 Yii 에셋 관리자 설명서를 참조하십시오: http://www.yiiframework.com/wiki/148/understanding-assets/
테마에 사진을 추가하려면:
- 오른쪽의 파일 업로더로 평소처럼 업로드한 다음, 원하는 twig 파일의 원하는 위치에 추가합니다:
{{ image('./files/myfile.png') }}
- 사진의 대체 텍스트(스크린 리더 및 HTML 유효성 검사용)를 추가하려면 다음과 같이 추가합니다:
{{ image('./files/myfile.png'), ‘my alternative text’ }}
- 클래스 속성과 id를 추가하려면:
{{ image('./files/myfile.png'), ‘my alternative text’, {“class”: “a_nice_css_class”, “id”: “any_id”} }}
앞으로 할 일 목록
- 사용자가 편집기에서 직접 사용자 지정 미리보기 파일을 업로드할 수 있도록 하기
- 로컬 파일을 삭제하고 상속 상태로 되돌리는 버튼 추가
- CSS 파일에서 사용되는 사진만 복사하기(매니페스트에 복사할 파일로 나열)
- 현재 테마가 확장하는 테마(있는 경우)를 알려주기
테마 옵션
LS3의 또 다른 새로운 점은 테마 옵션 페이지입니다. 나중에 살펴보겠지만, 테마 제작자는 자체 옵션과 심지어 자체 관리자 옵션 페이지도 만들 수 있습니다. 여기서는 핵심 테마의 옵션 페이지가 어떻게 작동하는지 간단히 살펴봅니다. 전역 수준에서 테마 옵션에 접근하려면 테마 목록에서 "테마 옵션"을 클릭합니다.
고급 옵션
테마 옵션 탭을 열면 간단한 옵션 또는 고급 옵션 중 하나를 선택하여 편집할 수 있습니다. “고급 옵션”은 데이터베이스에 있는 주요 테마 구성 필드에 직접 접근할 수 있는 단순한 양식입니다. 작동 방식을 이해하려면 XML 파일과 처음부터 테마를 만드는 방법에 대해서도 읽어 보시기 바랍니다. 따라서 다소 복잡하며 고급 사용자를 위해 만들어졌습니다.
고급 설정을 편집하려면 고급 옵션 탭을 클릭하십시오.
- CSS 파일: 템플릿에 추가할 CSS 파일입니다.
- JS 파일: 템플릿에 추가할 JS 파일입니다.
- 파일 인쇄 CSS: 템플릿을 인쇄할 때 불러올 CSS 파일입니다.
- 옵션: 템플릿 보기에 전달되어 구문 분석될 옵션(및 그 값)이 포함된 필드입니다.
- CssFramework Name: 불러올 CSS 프레임워크의 이름입니다. 현재는 Bootstrap 또는 없음만 지원됩니다.
- Cssframework Css: 이 필드에서 코어 bootstrap.css를 다른 사용자 지정 버전으로 교체할 수 있습니다.
- Cssframework Js: 코어 boostrap.js 필드를 이곳에서 다른 사용자 지정 버전으로 교체할 수 있습니다.
- 탑재할 패키지: 이 설정에서 LimeSurvey의 일부 코어 에셋 패키지를 불러올 수 있습니다.
상단에 업로드 입력란이 있으며, 이를 통해 테마의 파일 디렉터리에 파일을 업로드할 수 있습니다. 이 매개변수들을 사용하여 테마의 전체 모양을 변경할 수 있습니다.
경고! : 무엇을 하는지 정확히 알지 못한다면 값을 변경하지 마십시오!
간단한 옵션
간단한 옵션 페이지는 템플릿 자체에서 제공됩니다. 테마의 /options 디렉터리 안에 있는 twig 파일과 일부 JavaScript로 만들어집니다: https://github.com/LimeSurvey/LimeSurvey/tree/develop/templates/default/options (깨진 링크)
이 페이지는 테마마다 완전히 다를 수 있으며, 테마 제공자가 자신만의 룩앤필을 만들도록 적극 권장합니다. 
간단한 옵션 페이지는 고급 양식의 입력란을 대신 채워 주는 역할을 합니다. 간단한 옵션 페이지에서 설정을 켜거나 끄면 고급 양식의 관련 입력란이 그에 따라 변경되는 것을 확인할 수 있습니다. 예를 들어 기본 템플릿의 간단한 옵션에서 Bootswatch 테마를 "Darkly"로 변경한 다음 (저장하지 않고도) 고급 옵션 탭을 클릭하면 "Cssframework Css" 필드가 다음과 같이 변경된 것을 볼 수 있습니다.
{"replace": [["css/bootstrap.css","css/flatly.css"]]}
에서
{"replace": [["css/bootstrap.css","css/darkly.css"]]}
다음은 코어 테마의 다양한 간단한 옵션입니다.
- Ajax 모드: 다음 페이지를 Ajax(더 빠름)로 불러올지, 페이지 새로 고침(디버깅에 더 적합)으로 불러올지 설정합니다.
- 배경 이미지: 예로 설정하면 pattern.png 이미지가 로드됩니다(Master 버전에서는 파일 선택기로 대체될 예정입니다).
- 박스 컨테이너: 아니요로 설정하면 질문이 박스 안에 포함되지 않습니다(따라서 화면 너비보다 큰 배열 질문도 사용할 수 있습니다).
- Brandlogo: 아니요로 설정하면 상단 바에 설문조사 이름이 표시되고, 그렇지 않으면 파일 디렉터리에 있는 이미지 중 하나를 로고 이미지로 선택할 수 있습니다.
- 본문에 애니메이션 효과: 예로 설정하면 설문조사 본문이 로드될 때 적용할 애니메이션을 선택할 수 있습니다.
- 질문에 애니메이션 효과: 질문에도 동일하게 적용됩니다.
- 알림에 애니메이션 효과: 알림에도 동일하게 적용됩니다.
- Bootstrap 테마: 로드할 Bootstrap 테마를 선택할 수 있습니다. 이 테마는 Bootswatch https://bootswatch.com/3/ 에서 제공됩니다.
애니메이션에 사용되는 라이브러리는 animate.css입니다: https://daneden.github.io/animate.css/
물론 테마 제공자는 자체 애니메이션 라이브러리를 추가하거나 애니메이션 라이브러리를 전혀 사용하지 않을 수도 있습니다.
모노크롬 테마는 관리자 사용자 인터페이스와 동일한 Bootstrap 색상 테마를 사용합니다. CSS 프레임워크 대체 시스템을 사용하지 않고 CSS 파일만 추가합니다. 따라서 테마 제공자가 사용자 지정 테마를 다루는 또 다른 방법을 보여 줍니다.
상속 시스템
앞에서 한 테마가 다른 테마를 확장할 수 있다는 것을 살펴보았습니다. 테마 구성 역시 다른 테마 구성을 상속할 수 있습니다. 즉, 하나의 테마에 대해 다음과 같은 수준의 구성을 가질 수 있습니다.
- 전역 수준(테마 목록에서 방금 살펴본 구성)
- 설문조사 그룹 수준
- 마지막으로 설문조사 수준
각 수준의 매개변수는 상위 수준의 값을 상속할 수 있습니다(설문조사 그룹 상속). 먼저 설문조사 그룹 수준을 살펴보겠습니다.
설문조사 그룹 수준
LS3의 또 다른 큰 새로운 기능 중 하나는 설문조사 그룹 시스템입니다. 이제 여러 그룹을 생성하여 설문조사를 체계적으로 관리할 수 있습니다. 설문조사 목록으로 이동한 다음 설문조사 그룹 탭을 클릭하면 됩니다.
이 목록에는 두 개의 동작 버튼이 있습니다. 그룹이 비어 있으면 삭제할 수 있고, 그렇지 않으면 언제든지 편집할 수 있습니다. 편집 버튼을 클릭하면 설문조사 그룹 설정 페이지로 이동합니다.
이 페이지의 세 번째 탭은 "이 설문조사 그룹의 템플릿 옵션"입니다. 이 탭을 클릭하면 테마 목록과 동일한 테마 목록이 표시되지만, 여기서는 옵션 버튼만 표시됩니다(테마 편집기는 기본 목록에서만 열 수 있습니다).
이제 기본 템플릿의 옵션을 클릭하면 다음과 같은 화면이 나타납니다.
- 모든 항목 상속은 모든 구성을 전역 설정 수준에서 상속한다는 의미입니다.
- 고급 옵션 페이지로 이동하면 모든 필드가 상속으로 설정되어 있는 것을 볼 수 있습니다.
- 간단한 옵션에서 "모든 항목 상속"을 "아니오"로 선택하면 전역 옵션 페이지와 매우 비슷한 페이지가 다시 표시됩니다. 유일한 차이점은 각 필드를 예, 아니오 또는 상속으로 설정할 수 있으며, 각 드롭다운 선택기에 상속' 값이 있다는 것입니다.
설문조사 그룹은 다른 그룹의 하위 그룹이 될 수 있습니다. 이 경우 상위 그룹의 설정을 상속합니다.설문조사 수준
설문조사를 편집할 때 왼쪽 메뉴에 새 항목 "테마 옵션"이 표시됩니다. 이 항목을 클릭하면 현재 설문조사에 선택된 테마의 옵션 페이지로 이동합니다. 설문조사 그룹과 동일한 상속 시스템을 볼 수 있지만, 이번에는 상속이 해당 설문조사가 속한 설문조사 그룹에서 설정을 상속한다는 의미입니다.
사용 사례 예시
여러 회사(A와 B)에 하나의 테마를 사용한다고 가정해 보겠습니다. 선호하는 옵션을 전역 수준에서 설정합니다(예: Ajax 켜기, 본문에 슬라이드 인 애니메이션 효과, 알림에 펄스 효과). 그런 다음 각 회사별로 설문조사 그룹을 생성합니다. 회사 A의 모든 설문조사를 담는 설문조사 그룹과 회사 B의 모든 설문조사를 담는 설문조사 그룹을 만듭니다. 이 수준에서는 로고와 배경만 설정하고 나머지 옵션은 상속하도록 둡니다. 그러면 그룹 A의 모든 설문조사는 회사 A의 로고를 사용하고, 그룹 B의 모든 설문조사는 회사 B의 로고를 사용합니다. 회사 A의 설문조사 중 하나에 대해 설문조사 주제에 맞는 다른 배경을 사용하려면 설문조사 수준의 옵션에서 배경만 변경하면 됩니다. 회사 B의 누군가가 펄스 알림이 너무 강하니 페이드 인처럼 더 부드러운 효과를 원한다고 하면, 설문조사 그룹 B 수준에서 알림 애니메이션만 변경하면 이 그룹의 모든 설문조사에 새 애니메이션이 적용됩니다. 회사 A가 로고를 변경하면 설문조사 그룹 A 수준에서 변경하여 이 그룹의 모든 설문조사가 새 로고를 사용하도록 할 수 있습니다.
테마 사용자 지정 FAQ
여기에서는 포럼에서 제기된 질문 중 테마를 사용자 지정하는 데 도움이 될 만한 답변을 소개합니다.
CSS/JS 사용자 지정: 에셋 관리자 다루기("변경 사항이 적용되지 않는 이유는 무엇인가요?")
즐겨 사용하는 편집기로 코드를 직접 편집하여 테마의 CSS/JS를 수정하려고 하면 변경 사항이 적용되지 않아 당황할 수 있습니다.
2.50 버전부터 LS는 Yii 에셋 관리자를 사용합니다.
에셋에 대한 Yii 문서
에셋 관리자는 테마의 CSS/JS 파일을 임의의 문자열이 붙은 tmp/ 하위 디렉터리(예: "tmp/1ef64ml/")로 옮깁니다. 따라서 css/js 파일을 변경하고 이를 에셋 관리자에 알리면, 파일이 새 이름의 하위 디렉터리로 복사되어 사용자 브라우저의 캐시가 갱신되고 새 css/js가 표시됩니다. 그렇지 않으면 사용자가 브라우저 캐시를 직접 지워야 합니다.
에셋 관리자가 켜져 있을 때 헤더의 CSS 링크는 다음과 같습니다.
보시다시피 모두 tmp/ 하위 폴더를 가리킵니다.
에셋 관리자가 꺼져 있을 때 헤더의 CSS 링크는 다음과 같습니다.
보시다시피 테마의 실제 파일을 가리킵니다.
물론 에셋 관리자가 파일이 변경되었음을 알지 못하면 이전 tmp/ 디렉터리의 예전 파일이 그대로 유지되어 변경 사항이 적용되지 않습니다.따라서 테마의 CSS/JS를 편집할 때는 다음과 같은 방법이 있습니다.
- LS 테마 편집기를 사용할 수 있습니다: 테마 편집기가 에셋 관리자를 처리하므로 걱정할 필요가 없습니다.
- 디버그 모드를 켤 수 있습니다: 에셋 관리자가 꺼져 테마의 실제 css/js 파일이 호출됩니다(단, 이 경우 로드할 때마다 브라우저 캐시를 새로 고쳐야 합니다).
- 에셋 캐시를 새로 고칠 수 있습니다: 전역 설정 -> 일반 -> 에셋 캐시 지우기
사용자 지정 CSS를 편집할 때는 테마 편집기를 사용하는 것이 단연 가장 좋은 방법입니다.
테마 편집기를 사용하면 새 테마 엔진의 구조를 이해하는 데 도움이 됩니다.
또한 Fruity를 사용자 지정하는 경우 CSS 명시도에 주의하세요. 대부분의 정의가 ".fruity" 선택자(body 요소의 클래스 중 하나)를 사용합니다.
테마에 사용자 지정 글꼴 추가하기
쉬운 방법: Google Font CDN 사용
Bootswatch 설문조사 테마는 Google Font CDN을 사용합니다. 어떻게 동작하는지 살펴보겠습니다. https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/bootswatch/css/variations/flatly.min.css
@import url("https://fonts.googleapis.com/css?family=Lato:400,700,400italic");
그러면 CSS 규칙을 통해 Lato 글꼴이 사용됩니다: https://github.com/thomaspark/bootswatch/blob/master/dist/flatly/bootstrap.css#L72
body {
...
font-family: "Lato";
...
}
사용자 지정 테마에서 이러한 방식으로 어떤 Google 글꼴이든 사용할 수 있습니다. 물론 테마의 옵션에서 글꼴 선택기는 제거해야 합니다. options.twig에서 다음 줄을 삭제하십시오: https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/options/options.twig#L209-L230
로컬 글꼴 사용
글꼴 파일을 다운로드하여 Google CDN 대신 로컬 서버에서 사용할 수도 있습니다(개인정보 보호에 더 좋습니다). 방법에 대한 예로 Noto 글꼴의 로컬 버전을 소개합니다: https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/assets/fonts/noto.css
@font-face {
font-family: 'Noto Sans';
font-weight: 300;
font-style: normal;
src: url('./font-src/Noto/NotoSans-Regular.ttf');
}
...
테마 CSS 파일에 매우 비슷한 정의를 사용한 다음, NotoSans-Regular.ttf 파일을 테마의 css/font-src/ 폴더에 복사하십시오.
그런 다음 위와 같이 body(또는 다른 요소)에 해당 글꼴을 적용하고 기본 옵션 글꼴 선택기를 제거하십시오.
옵션에서 나만의 글꼴 선택기 만들기
현재로서는 코어 글꼴 선택기를 사용하여 옵션에 나만의 글꼴을 쉽게 추가할 수 없습니다. 먼저 최종 사용자가 사용자 지정 패키지를 업로드할 수 있도록 해야 합니다(다음 단락 참조: Fruity 글꼴 선택기 살펴보기)
진행 방법은 다음과 같습니다:
- CDN 또는 로컬 서버를 사용하여 테마에 두 개의 글꼴(my_custom_font 및 my_custom_other_font)을 추가합니다.
- 그런 다음 CSS 파일에 두 개의 새 클래스를 추가합니다:
.font-my_custom_font {
font-family: 'my_custom_font ';
}
.font-my_custom_other_font {
font-family: 'my_custom_other_font';
}
- 테마의 XML 파일에 글꼴 옵션을 추가합니다(기본값은 my_custom_font입니다):
<options>
....
<font>my_custom_font</font>
</options>
- option.twig에 다음 줄을 추가하여 글꼴 선택기를 추가합니다(아직 테스트되지 않았으므로 작동하지 않으면 포럼에 알려 주십시오):
<div class='row ls-space margin top-15 bottom-15 action_hide_on_inherit'>
<hr/>
</div>
<div class='row action_hide_on_inherit'>
<div class='col-sm-12'>
<div class='panel panel-default'>
<div class='panel-heading'>{{ "My custom fonts" | t }}</div>
<div class='panel-body'>
<div class='form-group row'>
<label for='simple_edit_font' class='control-label'>{{ "Select font:" | t }}</label>
<div class='col-sm-12'>
<select class='form-control selector_option_value_field' id='simple_edit_font' name='font'>
{% if templateConfiguration.sid is not empty or templateConfiguration.gsid is not empty %} //Shouldn't this be "theme" in stead of "template"?
{% set fontOptions = fontOptions ~ '<option value = "inherit" > Inherit</option>' %}
{% endif %}
<optgroup label="{{ "My Custom fonts" | t }}">
<option class="font-my_custom_font" value="custom_font" data-font-package="" >Custom</option>
<option class="font-my_custom_other_font" value="my_custom_other_font" data-font-package="" >Other</option>
</optgroup>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
이제 사용자가 이 두 글꼴 중에서 선택할 수 있습니다.
Fruity 글꼴 선택기 살펴보기
앞으로는 최종 사용자가 글꼴 패키지를 포함한 자신만의 에셋 패키지를 업로드할 수 있게 될 예정입니다. 그러면 글꼴 사용자 지정이 매우 쉬워집니다.
Yii 패키지를 이해하려면 다음을 참조하십시오:
http://www.yiiframework.com/doc/api/1.1/CClientScript#packages-detail
LimeSurvey 패키지는 여러 파일에 정의되어 있습니다. 글꼴 패키지는 여기에 정의되어 있습니다:
https://github.com/LimeSurvey/LimeSurvey/blob/4c40b61afb0dba8fd80154b50f5831045df8d814/application/config/fonts.php
예를 들어 Noto 글꼴 패키지는 여기에 정의되어 있습니다:
https://github.com/LimeSurvey/LimeSurvey/blob/4c40b61afb0dba8fd80154b50f5831045df8d814/application/config/fonts.php#L47-L53
'font-noto' => array(
'devBaseUrl' => 'assets/fonts/',
'basePath' => 'fonts',
'css' => array(
'noto.css',
),
),
여기에 포함된 noto.css 파일은 다음 위치에 있습니다:
https://github.com/LimeSurvey/LimeSurvey/blob/4c40b61afb0dba8fd80154b50f5831045df8d814/assets/fonts/noto.css
파일 끝부분에 있는 CSS 클래스 ".font-noto"의 정의를 확인하십시오:
@font-face {
font-family: 'Noto Sans';
...
}
...
.font-noto{
font-family: 'Noto Sans';
}
그런 다음 Vanilla 테마에서는 noto 패키지를 추가하고 글꼴 옵션을 noto로 정의하여 noto 글꼴을 사용합니다:
https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/config.xml#L79
<packages>
....
<add>font-noto</add>
</packages>
<options>
....
<font>noto</font>
</options>
그런 다음 이 값을 사용하여 body 클래스의 글꼴이 정의됩니다:
https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/views/layout_global.twig#L76
<body class=" ... font-{{ aSurveyInfo.options.font }} ... " ... >
물론 XML 파일에는 테마 구성의 기본값만 들어 있습니다. 실제로 이러한 값은 데이터베이스("template_configuration" 테이블 (질문: "template_"인가요, "theme_"인가요?))에 JSON 문자열로 정의되고 읽힙니다. option.js 파일은 단순 옵션의 글꼴 선택기 값을 사용하여 고급 탭 양식 안의 값을 변경할 뿐입니다: https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/options/options.js#L148-L174
따라서 "에셋 패키지 업로드" 기능이 제공되면, 기존의 모든 글꼴 패키지를 검색하여 선택기에 추가하는 스크립트를 쉽게 추가할 수 있습니다.
설문조사 요소의 위치와 표시를 제어하는 테마 옵션 추가
이 튜토리얼에서는 확장된 테마에 옵션을 추가하여 설문조사 요소를 여러 위치에 표시하는 방법을 보여 줍니다. 여기서는 설문조사 제목을 두 가지 다른 위치에 표시하는 테마 옵션을 만들겠습니다.
간단하게 설명하기 위해, 이 튜토리얼은 LimeSurvey 버전 3.4.3의 "bootswatch" 테마를 확장한 것을 기준으로 합니다.사용자 지정 테마 생성
- 위에서 설명한 대로 "bootswatch" 테마를 확장합니다.
- 위에서 설명한 대로 custom.css를 로컬 테마로 복사합니다.
새 테마 옵션 생성
- /themes/survey/bootswatch/options/의 내용을 /upload/themes/survey/yourThemeName/options/로 복사합니다.
- 편집기에서 /upload/themes/survey/yourThemeName/options/options.twig를 열고 "{# Bootstrap Bootswatch theme #}"를 찾습니다. 그 상위 <div class='row'> 요소 바로 앞에 다음을 추가합니다:
{# Custom survey name in navbar #} <div class='row'> <div class='col-sm-12 col-md-6'> <div class='form-group row'> <label for='simple_edit_options_surveyname1' class='control-label'>Survey name in navbar</label> <div class='col-sm-12'> <div class="btn-group" data-toggle="buttons"> <label class="btn btn-default"> <input name='surveyname1' type='radio' value='on' class='selector_option_radio_field ' data-id='simple_edit_options_surveyname1'/> Yes </label> <label class="btn btn-default"> <input name='surveyname1' type='radio' value='off' class='selector_option_radio_field ' data-id='simple_edit_options_surveyname1'/> No </label> </div> </div> </div> </div> </div> <div class='row'> <hr/> </div> {# Custom survey name below progress bar #} <div class='row'> <div class='col-sm-12 col-md-6'> <div class='form-group row'> <label for='simple_edit_options_surveyname2' class='control-label'>Survey name below progress bar</label> <div class='col-sm-12'> <div class="btn-group" data-toggle="buttons"> <label class="btn btn-default"> <input name='surveyname2' type='radio' value='on' class='selector_option_radio_field ' data-id='simple_edit_options_surveyname2'/> Yes </label> <label class="btn btn-default"> <input name='surveyname2' type='radio' value='off' class='selector_option_radio_field ' data-id='simple_edit_options_surveyname2'/> No </label> </div> </div> </div> </div> </div> <div class='row'> <hr/> </div> - /upload/themes/survey/yourThemeName/config.xml을 열고 "options" 블록에 두 개의 항목을 추가하여 다음과 같이 만듭니다:
<options> <ajaxmode>on</ajaxmode> ... <surveyname1>on</surveyname1> <surveyname2>on</surveyname2> </options>
- 그러면 테마 옵션 화면에 다음과 같이 두 개의 새 옵션이 표시됩니다:
탐색 표시줄의 설문조사 제목을 위한 수정된 보기
- 새 디렉터리 /upload/themes/survey/yourThemeName/views/subviews/header/를 생성합니다.
- /themes/survey/vanilla/views/subviews/header/nav_bar.twig 파일을 새 디렉터리로 복사합니다.
- /themes/survey/vanilla/views/subviews/header/nav_bar.twig 파일을 열고 "{# Logo option #}"을 찾습니다. 그 아래에서 로고/설문조사 이름에 대한 IF 문을 다음과 같이 수정합니다.
{# Logo option #} {% if( aSurveyInfo.options.brandlogo == "on") %} <div class="{{ aSurveyInfo.class.navbarbrand }} logo-container" {{ aSurveyInfo.attr.navbarbrand }} > {{ image(aSurveyInfo.options.brandlogofile, aSurveyInfo.name, {"class": "logo img-responsive"}) }} </div> {% endif %} {% if( aSurveyInfo.options.surveyname1 == "on") %} <div class="{{ aSurveyInfo.class.navbarbrand }}" {{ aSurveyInfo.attr.navbarbrand }} > {{ aSurveyInfo.name }} </div> {% endif %} - /upload/themes/survey/yourThemeName/css/custom.css에 다음과 같은 내용을 추가합니다.
.navbar-brand { line-height: 60px; font-size: 32px; }
- "Survey name in navbar" 테마 옵션을 "예(Y)"로 전환합니다.
- 다음과 같이 표시됩니다.
진행률 표시줄 아래의 설문조사 제목을 위한 수정된 보기
- 새 디렉터리 /upload/themes/survey/yourThemeName/views/subviews/survey/group_subviews를 생성합니다.
- /themes/survey/vanilla/views/subviews/survey/group_subviews/group_container.twig 파일을 새 디렉터리로 복사합니다.
- /themes/survey/vanilla/views/subviews/survey/group_subviews/group_container.twig 파일을 열고 설문조사 이름을 위한 <h1> 요소를 추가합니다. 다음과 같이 됩니다.
<div class="{{ aSurveyInfo.class.groupcontainer }} space-col" {{ aSurveyInfo.attr.groupcontainer }}> {# Custom survey name #} {% if( aSurveyInfo.options.surveyname2 == "on") %} <h1 class="custom-survey-name">{{ aSurveyInfo.name }}</h1> {% endif %} {# Group Name #} {{ include('./subviews/survey/group_subviews/group_name.twig') }} {# Group Description #} {{ include('./subviews/survey/group_subviews/group_desc.twig') }} {# PRESENT THE QUESTIONS This is the main part. It will render each question for this group #} <!-- PRESENT THE QUESTIONS --> {% for aQuestion in aGroup.aQuestions %} {{ include('./subviews/survey/question_container.twig') }} {% endfor %} <!-- Hidden inputs --> {% if aGroup.show_last_group == true %} <input type='hidden' name='lastgroup' value='{{ aGroup.lastgroup }}' id='lastgroup' /> {% endif %} {% if aGroup.show_last_answer == true %} <input type='hidden' name='lastanswer' value='{{ aGroup.lastanswer }}' id='lastanswer' /> {% endif %} </div>
- /upload/themes/survey/yourThemeName/css/custom.css에 다음과 같은 내용을 추가합니다.
.navbar-brand { line-height: 60ph1.custom-survey-name { margin: 0; text-align: center; }
- "Survey name below progress bar" 테마 옵션을 "예(Y)"로 전환합니다.
- 다음과 같이 표시됩니다.
다운로드
- 확장 테마 샘플: Media:Test_survey_names.zip
처음부터 테마 만들기
설명서는 곧 제공될 예정입니다.
지금은 몇 가지 팁만 제공합니다.
테마 구조
파일 및 디렉터리
처음부터 테마를 생성할 때는 Vanilla의 파일/디렉터리 구조나 CSS/JS를 따를 필요가 없습니다. 필수 CSS/JS는 코어에서 추가됩니다(필요한 경우 제거할 수도 있습니다).
테마에 반드시 있어야 하는 파일은 레이아웃 파일뿐입니다.
- layout_global.twig : 설문조사 응답 페이지를 렌더링합니다.
- layout_survey_list.twig : 설문조사 목록을 렌더링합니다(이 테마가 기본값으로 설정된 경우).
- layout_errors.twig : 설문조사 렌더링을 막는 오류를 렌더링하는 데 사용됩니다(잘못된 설문조사 ID, 그룹 미리보기에서 빈 그룹 등).
- layout_user_forms.twig: 토큰(설문조사 참여자), 등록 등의 사용자 양식을 렌더링합니다.
- layout_print.twig : 설문조사를 PDF로 인쇄하는 데 사용됩니다.
- layout_printanswers.twig: 응답을 인쇄합니다.
이 파일들의 내용과 포함할 파일은 전적으로 사용자에게 달려 있습니다. Vanilla에 있는 그 외의 모든 파일과 디렉터리는 완전히 선택 사항이므로 원하는 방식으로 코드를 자유롭게 구성하세요.
프런트엔드 렌더링 코드를 읽어 보면 이 파일 이름들이 코드에 직접 나타나는 것을 볼 수 있습니다. 그래서 이 파일들이 필수입니다.
콘텐츠
Vanilla의 layout_global.twig에서는 표시할 내용을 결정하기 위해 "include_content"라는 변수를 사용합니다. https://github.com/LimeSurvey/LimeSurvey/blob/2398dda3b425da1a37d4611cd7963d39ac739987/themes/survey/vanilla/views/layout_global.twig#L114-L115
{% set sViewContent = './subviews/content/' ~ aSurveyInfo.include_content ~ '.twig' %}
{% include './subviews/content/outerframe.twig' with {'include_content': sViewContent } %}
aSurveyInfo.include_content는 현재 진행 중인 작업을 알려 줍니다. 질문 표시? 제출 결과 표시? 모두 지우기 표시? 등입니다. 보시다시피 Vanilla에서는 작업마다 포함할 파일을 하나씩 생성합니다. 따라서 작업 목록을 알고 싶다면 Vanilla의 디렉터리 views/subviews/content를 확인하고 "twig" 확장자를 제거하면 됩니다. https://github.com/LimeSurvey/LimeSurvey/tree/2398dda3b425da1a37d4611cd7963d39ac739987/themes/survey/vanilla/views/subviews/content
- clearall.twig
- firstpage.twig
- load.twig
- mainrow.twig
- main.twig
- optin.twig
- optout.twig
- outerframe.twig
- printanswers.twig
- quotas.twig
- register.twig
- save.twig
- submit_preview.twig
- submit.twig
- userforms.twig
LimeSurvey 2.x 버전용 테마를 이미 만들어 보셨다면, 이 파일 대부분이 LimeSurvey 2.x의 예전 pstpl 파일에 해당한다는 것을 알 수 있습니다. 다시 말하지만, 테마에서 이 디렉터리에 이 이름으로 파일을 생성해야 할 의무는 없습니다. 예를 들어 layout_global.twig에 각 작업에 필요한 HTML을 담은 큰 switch 문을 추가할 수도 있습니다.
매니페스트 config.xml
테마의 매니페스트에는 테마에 대한 주요 정보가 들어 있습니다. 테마를 설치하면 매니페스트의 내용이 데이터베이스의 template과 template_configuration, 두 개의 테이블에 로드됩니다. 따라서 테마의 매니페스트를 수정할 때마다 테마를 제거했다가 다시 설치해야 합니다(또는 초기화만 해도 됩니다). 테마를 개발하는 동안 이 과정은 번거로우므로 DB 항목 대신 XML 파일을 직접 사용하도록 강제할 수 있습니다. 이를 위해 config.php에서 디버그 모드를 켜고 'force_xmlsettings_for_survey_rendering'을 true로 설정하세요.
메타데이터 섹션
복잡한 것은 없습니다. 테마에 대한 주요 정보일 뿐이며, templates_configuration 테이블에 저장됩니다.
<metadata>
<name>the_name_of_your_theme</name>
<title>The Title of your theme</title>
<creationDate>16/10/2017</creationDate>
<author>Your Name</author>
<authorEmail>your@email.org</authorEmail>
<authorUrl>http://www.yourwebsite.org</authorUrl>
<copyright>Your Copyright </copyright>
<license>Licence of your theme</license>
<version>version of your theme</version>
<apiVersion>3</apiVersion>
<description>Description of your theme</description>
<extends>parent_theme</extends>
</metadata>
몇 가지 참고 사항:
- name: DB에서 키로 사용됩니다. 따라서 고유해야 하며 특수 문자(공백 포함)를 사용하면 안 됩니다. 대소문자는 구분하지 않습니다.
- Title: 여러 목록에서 테마 이름을 표시하는 데 사용됩니다. 특수 문자를 사용할 수 있습니다.
- description: 설문조사 테마 기본 목록에서 사용됩니다. 특수 문자는 물론 HTML 코드도 사용할 수 있습니다.
- extends: 선택 사항이며 상위 테마를 정의합니다. 이 테마에 파일(twig/js/css/jpg 등)이 없으면 상위 테마에서 찾습니다.
3개의 코어 테마(Vanilla, Bootswatch, Fruity) 중 하나를 확장한 경우, "extends" 값을 다른 상위 테마로 변경할 수 있습니다. 물론 테마를 초기화해야 합니다.
파일 섹션
이 섹션은 중요합니다. template_configuration 테이블의 files_css, files_js, files_print_css 필드에 JSON 배열로 저장됩니다.
예: Material Premium 테마의 파일 섹션:
<files>
<css>
<add>css/bootstrap-material-design.css</add>
<add>css/ripples.min.css</add>
<replace>css/ajaxify.css</replace>
<replace>css/theme.css</replace>
<replace>css/custom.css</replace>
<remove>awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css</remove>
</css>
<js>
<replace>scripts/theme.js</replace>
<replace>scripts/ajaxify.js</replace>
<add>scripts/material.js</add>
<add>scripts/ripples.min.js</add>
<replace>scripts/custom.js</replace>
</js>
<print_css>
<add>css/print_theme.css</add>
</print_css>
</files>
이 섹션에 있는 모든 CSS/JS 파일은 설문조사가 시작될 때 로드됩니다(Ajax 모드인 경우. Ajax 모드가 꺼져 있으면 물론 모든 파일이 페이지마다 다시 로드됩니다).
이 파일들은 테마 이름을 기반으로 한 Yii 에셋 패키지에 추가됩니다. 따라서 에셋 관리자가 켜져 있으면(디버그 모드가 꺼져 있는 경우) 이 파일들이 테마의 나머지 파일과 함께 tmp 디렉터리로 복사됩니다(그래서 CSS와 JS에서 상대 경로를 사용해 이미지 파일에 접근할 수 있습니다).
Yii의 에셋 관리자에 대해: https://www.yiiframework.com/wiki/148/understanding-assets
Yii의 패키지에 대해: http://www.yiiframework.com/doc/api/1.1/CClientScript#packages-detail
이 파일들은 상속 시스템을 사용합니다. 즉, 테마에 CSS/JS 파일을 추가했지만 해당 파일이 테마에 없으면, 엔진이 이 테마의 모든 상위 테마를 살펴보고 처음 찾은 파일을 사용합니다. 따라서 사용자가 테마 편집기를 통해 사용자의 테마를 확장하면 이 파일들이 모두 해당 사용자의 테마에 상속됩니다. 키워드는 이 상속 시스템을 가리킵니다.
- add : 파일을 테마와 해당 테마를 상속하는 모든 테마에 추가합니다.
- replace: 상위 테마의 파일을 대체합니다.
- remove: 코어 패키지를 포함한 모든 패키지에서 파일을 제거합니다(3.14 버전부터).
config.php에서 'force_xmlsettings_for_survey_rendering'을 설정하면 DB 대신 XML에서 구성을 읽어 올 수 있습니다(초기화 불필요). 이렇게 하면 XML 파일 수정 사항을 더 쉽게 테스트할 수 있고, XML을 수정할 때마다 테마를 제거했다가 다시 설치하지 않아도 됩니다.
이 키워드에 대한 몇 가지 참고 사항입니다:
상속 관련 팁
앞서 설명했듯이 "add" 키워드는 상위 테마 중 하나에 있는 파일을 가리킬 수 있습니다. 따라서 이 섹션에서 파일을 "add"하더라도 해당 파일이 현재 테마가 아닌 상위 테마에 있을 수 있습니다. 엔진은 모든 상위 테마를 검색하여 처음 발견한 파일을 사용합니다. 파일을 찾지 못하고, config에서 디버그 모드가 켜져 있으며, 전역 설정에서 js 프런트엔드 디버그 모드가 켜져 있으면 콘솔에 경고 메시지가 표시됩니다. 예: my_theme에 <add>css/unexisting.css</add>를 추가하면 콘솔에 다음과 같이 표시됩니다.
(¯`·._.·(¯`·._.· Theme Configuration Error ·._.·´¯)·._.·´¯)
Can't find file 'css/unexisting.css' defined in theme 'my_theme'디버그 모드가 꺼져 있으면 오류가 전혀 표시되지 않습니다. 엔진은 잘못된 add 구문을 그냥 무시합니다.
add는 언제 사용하고, replace는 언제 사용하며, 언제 상위 테마에 맡겨도 될까요?
먼저, add와 replace는 사실상 같은 키워드입니다. 둘 중 어느 것을 사용해도 엔진은 동일하게 동작합니다. 사람이 읽을 때 의도를 이해할 수 있도록 구분해 둔 것입니다.
상위 테마와 이름이 같은 파일은 추가할 수 없으며, 항상 상위 테마의 파일을 대체합니다. 예: "my_mother_theme/foo.css" 파일이 있고 하위 테마에 "foo.cs" 파일을 추가하면, "daughter_theme/foo.css"만 테마에 추가됩니다. "my_mother_theme/foo.css"를 유지하려면 "daughter_theme/foo.css"의 이름을 "daughter_theme/bar.css"처럼 다른 이름으로 지정하십시오. 따라서 "add" 키워드는 "replace" 키워드처럼 사용할 수 있습니다.
그 이유는, 이렇게 하면 상속 테마를 자동으로 생성하기가 훨씬 쉬워지기 때문입니다. 파일 섹션을 복사하기만 하면 바로 동작합니다(파일을 확장할 때 "add"를 "replace"로 바꿀 필요가 없습니다).
이해를 돕기 위해 Fruity 테마를 예로 들어 보겠습니다. 다음은 Fruity의 CSS 파일 섹션입니다.
<css>
<add>css/variations/sea_green.css</add>
<replace>css/animate.css</replace>
<replace>css/theme.css</replace>
<replace>css/custom.css</replace>
</css>
Fruity의 custom.css 파일은 Vanilla의 파일과 완전히 동일합니다. Fruity 안의 custom.css 파일을 삭제해도 Vanilla의 파일이 로드될 것입니다. Fruity 매니페스트에서 <replace>custom.css</replace> 구문을 제거해도 Vanilla의 구문이 사용되어 Vanilla의 custom.css가 로드됩니다.
그렇다면 Fruity 매니페스트에서 <replace>custom.css</replace> 구문을 사용하는 이유는 무엇일까요? 답은 간단합니다. 최종 사용자가 Fruity 테마를 확장하여 로컬 테마에서 파일을 수정하고, 수정한 파일을 상속 테마에서 로드할 수 있도록 하기 위해서입니다. 이해하려면 Fruity를 확장한 다음 확장된 테마를 살펴보십시오. 확장된 테마에는 custom.css 파일이 아예 없으므로 Fruity의 파일이 사용됩니다. 하지만 사용자가 확장된 테마에 이 파일을 생성하면(테마 편집기에서 "확장"을 클릭하여) 해당 파일이 사용자의 테마에서 로드됩니다.
정리하면 다음과 같습니다.
다른 테마를 확장하지 않고 처음부터 테마를 만드는 경우에는 add 구문으로 CSS/JS 파일을 추가하기만 하면 됩니다. 아주 간단합니다.
다른 테마를 확장하는 테마를 만들면서 사용자가 상위 테마의 CSS/JS 파일을 확장하지 못하도록 하려면 매니페스트에 add 구문을 사용하지 마십시오. 파일은 여전히 상위 테마 구성에서 로드됩니다.
다른 테마를 확장하는 테마를 만들면서 상위 테마의 파일을 대체하려면 replace 키워드를 사용하십시오(add 키워드도 같은 결과를 냅니다).
다른 테마를 확장하는 테마를 만들면서 특정 CSS/JS 파일을 대체하지는 않지만 사용자가 해당 파일을 확장할 수 있도록 하려면 매니페스트에서 해당 파일에 "replace" 구문을 사용하십시오. 파일을 대체하지 않더라도 매니페스트에서 replace 키워드를 사용하면 사용자가 원할 때 직접 대체할 수 있습니다.
마지막 경우만 이해하는 데 약간의 머리를 써야 하고, 나머지는 모두 간단합니다.
CSS 및 JS 파일은 twig 코드에서 직접 등록할 수도 있습니다. 이러한 파일은 해당 twig 파일이 요청될 때만 로드됩니다. 사용자가 테마 편집기에서 이러한 JS/CSS 파일을 상속할 수 있도록 하려면 Template:RegisterTemplateCssFile('my style.css') 및 Template:RegisterTemplateScript('my script.js') 함수를 사용해야 합니다. 이 함수들을 사용하지 않아도 테마는 동작할 수 있지만 상속이 제대로 동작하지 않습니다. Template:Image('my picture.jpg') 함수와 같은 원리입니다.
&action=edit&redlink=1){kind=link}
remove 키워드
remove 키워드는 3.14 버전부터 사용할 수 있습니다. 이 키워드를 사용하면 코어 패키지를 포함한 모든 패키지에서 CSS 파일 등을 제거할 수 있습니다. Material Premium 테마에서는 Awesome Bootstrap Checkbox의 파일을 제거하는 데 사용됩니다.
<remove>awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css</remove>
패키지에 정의된 파일 경로와 정확히 같은 형식을 사용해야 합니다(예: 폴더 경로 없이 "awesome-bootstrap-checkbox.css"만 쓰면 동작하지 않습니다). 코어 패키지와 해당 파일의 전체 목록은 /application/config/packages.php 및 config/third_party.php에서 확인할 수 있습니다. 예를 들어 awesome-bootstrap-checkbox.css는 다음과 같습니다. https://github.com/LimeSurvey/LimeSurvey/blob/2398dda3b425da1a37d4611cd7963d39ac739987/application/config/packages.php#L54-L56
'css'=> array(
'awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css',
),
remove 태그에 사용할 정확한 이름을 찾는 또 다른 방법은 에셋 관리자를 켜는 것입니다(디버그 모드를 끄거나 config에서 'use_asset_manager'=>true로 설정). 그러면 사용할 경로는 tmp 디렉터리의 임의 이름 디렉터리 바로 다음에 오는 경로입니다. 예를 들어 awesome-bootstrap-checkbox.css는 다음과 같습니다.
<link rel="stylesheet" type="text/css" href="/tmp/assets/cbc4e3cb/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css" />
제거해서는 안 되는 파일:
jquery-3.1.1.min.js : 필수
jquery-migrate-3.0.0.min.js : 필수
survey.js : 필수
moment-with-locales.min.js : 날짜 질문 유형에 필요합니다(그 외 일부 항목에도 필요한 것으로 보입니다).
em_javascript.js : 모든 ExpressionScript 자바스크립트에 필요합니다.
옵션 섹션
이 섹션은 테마의 옵션과 관련된 부분입니다. template_configuration 테이블의 "options" 필드에 JSON 배열로 저장될 값을 채우는 데 사용됩니다.
추가 정보
참고 사항
참고: 테마의 XML 파일을 편집한 경우, 변경 사항이 적용되려면 테마를 제거한 후 다시 설치해야 합니다.
참고: 이를 피하려면 데이터베이스 대신 XML을 사용하도록 강제할 수 있습니다. config.php에서 디버그 모드를 켜고 다음 주석을 해제하십시오:
'force_xmlsettings_for_survey_rendering' => true, // 데이터베이스 대신 XML 파일을 강제로 사용하려면 주석을 해제하십시오 (손쉬운 테마 개발용)
주의하십시오: 옵션 등 모든 항목이 XML에서 로드됩니다.
참고: 테마 편집기를 사용하지 않고 CSS/JS 파일을 직접 편집하고 디버그 모드가 꺼져 있는 경우, 이제 애셋을 강제로 비울 수 있습니다. "전역 설정"의 "일반" 탭에서 "애셋 캐시 지우기" 버튼을 클릭하십시오.
참고: 다음 섹션을 제거하는 경우