Hệ thống mẫu mới trong LS3.x
From LimeSurvey Manual
Giới thiệu
Xin lưu ý: trong các phiên bản trước của LimeSurvey, các tệp xác định giao diện của khảo sát, cách trình bày khảo sát về màu sắc, phông chữ, bố cục và (một số) hành vi, được gọi là "mẫu". Do những hiểu biết mới, giờ đây đây được gọi là "chủ đề", trong khi mẫu được dành riêng cho các khảo sát mẫu.
Trên trang này bạn sẽ học cách:
- Sử dụng hệ thống chủ đề mới của LimeSurvey 3.0.
- Sử dụng tính kế thừa để quản lý chủ đề của riêng bạn.
- Thêm ảnh vào chủ đề của bạn
- Quản lý các tùy chọn chủ đề cho khảo sát và nhóm khảo sát của bạn
LimeSurvey 3 giới thiệu một hệ thống công cụ chủ đề hoàn toàn mới, dựa trên Twig 1.29, Bootstrap và cho phép kế thừa chủ đề và các tùy chọn chủ đề. Nó loại bỏ hoàn toàn hệ thống từ khóa thay thế cũ. Vì vậy, bây giờ, 100% HTML giao diện người dùng có thể được tùy chỉnh. Ví dụ: trong hệ thống chủ đề cũ, có từ khóa {ASSESSMENTS} được thay thế bằng HTML đánh giá tại thời điểm thực thi. Người thiết kế chủ đề không có cách nào để tùy chỉnh HTML này (ngoài việc sử dụng JavaScript). Bây giờ, có một tệp tên là đánh giá.twig chứa logic (được viết bằng Twig) để tạo HTML này. Trong các trang này, chúng tôi sẽ cung cấp cho bạn một số giải thích về cách sử dụng công cụ chủ đề mới này.
Chỉnh sửa bằng Giao diện quản trị
danh sách chủ đề
Trên bảng điều khiển quản trị hiện có một hộp để truy cập danh sách chủ đề:
Danh sách được chia thành 5 cột:
- bản xem trước của chủ đề: nó chỉ là một tệp hình ảnh có tên “preview.png” ở thư mục gốc của chủ đề
- “tiêu đề” của chủ đề như được chỉ định trong tệp kê khai (config.xml trong thư mục gốc của chủ đề)
- mô tả về chủ đề: một chuỗi được đặt trong tệp kê khai của nó
- loại chủ đề: Chủ đề cốt lõi (được cung cấp cùng với LimeSurvey), Chủ đề người dùng (được thêm trong thư mục tải lên), chủ đề XML (không được tải trong cơ sở dữ liệu)
- Mở rộng: nếu chủ đề mở rộng một chủ đề khác, tên của nó sẽ được chỉ định ở đây
- Một số nút hành động:
- Cài đặt: it sẽ tải tệp kê khai của một chủ đề để thêm nó vào cơ sở dữ liệu và cung cấp nó để lựa chọn ở cấp khảo sát
- Gỡ cài đặt: nó sẽ xóa các mục cấu hình của một chủ đề trong cơ sở dữ liệu
- Trình chỉnh sửa chủ đề: nó sẽ chuyển hướng bạn đến trình chỉnh sửa chủ đề
- Tùy chọn chủ đề: nó sẽ dẫn bạn cấu hình chung của các tùy chọn chủ đề
Trình chỉnh sửa chủ đề
Trình chỉnh sửa chủ đề đã được giữ nguyên nhất có thể so với bản gốc. Vì vậy, khi bạn mở Chủ đề cốt lõi, bạn không thể chỉnh sửa nó. Nhưng bây giờ, thay vì nút “sao chép”, bạn có “nút mở rộng”.
Tổng quan nhanh về khái niệm kế thừa chủ đề
Trong LS3, một chủ đề bây giờ có thể kế thừa từ một chủ đề khác, nó có thể “mở rộng” một chủ đề khác. Điều này có nghĩa là thư mục chủ đề thực tế sẽ trống, nó sẽ chỉ chứa các tệp (chế độ xem, biểu định kiểu, tập lệnh, tài nguyên, v.v.) khác với thư mục gốc. Làm như vậy, bạn sẽ dễ dàng tạo một nhóm chủ đề cho những người dùng khác nhau của mình mà không cần phải duy trì nhiều chủ đề khác nhau. Ví dụ: bạn có thể có chủ đề tự tạo của riêng mình và sau đó là một phiên bản dành cho một công ty (với logo, phong cách của nó, có thể là một liên kết đến trang web của nó ở chân trang, v.v.), một phiên bản khác cho một công ty khác, v.v. bạn cập nhật CSS hoặc bố cục chung của chủ đề tùy chỉnh của mình, tất cả các chủ đề kế thừa từ đó sẽ được cập nhật tự động. Lưu ý rằng tính kế thừa là đệ quy: một chủ đề có thể mở rộng một chủ đề mở rộng một chủ đề khác, v.v.
Tính mới trong giao diện người dùng
Để mở rộng chủ đề Đơn sắc của LimeSurvey, hãy chuyển đến danh sách Chủ đề, nhấp vào nút “Trình chỉnh sửa chủ đề” của chủ đề Đơn sắc. Sau đó, nhấp vào “mở rộng” và xác thực tên mới “extends_monochrome”.
Nếu bây giờ bạn vào thư mục tải lên (với ứng dụng khách file/ftp của bạn), bạn sẽ thấy rằng một thư mục mới đã được tạo: upload/themes/extends_monochrome Nó chứa một tệp XML và các thư mục , nhưng hầu hết các thư mục đều trống. Nó không có chế độ xem, CSS hay JS. Tuy nhiên, bạn vẫn có thể chọn chủ đề này làm chủ đề bình thường từ cuộc khảo sát và nó sẽ trông giống hệt chủ đề đơn sắc.
Trình chỉnh sửa chủ đề cho chủ đềext_monochrome trông như thế này:
Không có sự khác biệt lớn với trình chỉnh sửa chủ đề cũ. Hãy liệt kê những cái chính:
- Từ khóa inherit trong danh sách file. Điều đó có nghĩa là tệp không có trong thư mục chủ đề và tệp từ chủ đề gốc sẽ được sử dụng.
- Trình chỉnh sửa chính ( ACE editor ) hiển thị nội dung của tệp đã chọn. Các tệp không chỉ chứa HTML, CSS hoặc JS mà còn chứa các câu lệnh Twig. Các câu lệnh Twig đó cho chúng ta khả năng đẩy một số logic vào các chế độ xem chủ đề vốn nằm sâu trong lõi trước đó và giờ đây có thể được tùy chỉnh.
- Đây là lý do tại sao hiện tại bạn có nhiều loại màn hình hơn trong bộ chọn thả xuống của menu trên cùng. Bạn sẽ nhận thấy các trang như 'Danh sách khảo sát', 'Tải', 'Lưu', 'Lỗi', 'Đăng ký', 'Đánh giá', 'In câu trả lời' không có sẵn trước đây hoặc bạn thực sự không thể được tùy chỉnh trước.
- Liên kết 'mẹo' ở cuối danh sách tệp cung cấp cho bạn cách Twig để thêm ảnh vào HTML của bạn
- Nút 'lưu thay đổi' trở thành nút Sao chép vào chủ đề cục bộ và lưu thay đổi
Ví dụ nhanh: thêm ảnh
Nút Sao chép vào chủ đề cục bộ và lưu thay đổi' sẽ thực hiện chính xác những gì nó nói: nếu bạn chỉnh sửa bất cứ thứ gì bên trong tệp và sau đó nhấp vào nút đó, nó sẽ sao chép tệp vào chủ đề bạn đang chỉnh sửa và lưu các thay đổi của bạn.
Ví dụ: nhấp vào tệp bố cục_global.twig, sau đó ngay trước nội dung khối ( {% block content %}) thêm văn bản “TEST” và nhấp vào nút. Bạn có thể thấy nhãn của tệp đã thay đổi từ “inherited” thành “local” và bây giờ nút này là một nút đơn giản lưu thay đổi.
Nếu bạn mở file explorer và vào thư mục upload/themes/extends_monochrome/views/, bạn sẽ thấy rằng nó chỉ chứa một tệp duy nhất, tệp bố cục_global.twig và có chuỗi “TEST” ở đó.!N !center|Bây giờ tệp đã có trong chủ đề của bạn
Bây giờ thay vì thêm một văn bản ngẫu nhiên, chúng ta sẽ thêm một hình ảnh. Nếu bạn nhấp vào liên kết mẹo, nó sẽ cho bạn biết:
Để sử dụng ảnh trong tệp .twig:
{{ image('./files/myfile.png', 'alt-text for my file', {"class": "myclass" }) }}
Nếu bạn đã đọc tài liệu về Twig (và lẽ ra bạn nên làm như vậy vào thời điểm này), bạn sẽ biết rằng Template:Function( ) sẽ lặp lại kết quả của một chức năng trên màn hình. Ở đây, hàm là hình ảnh().
Nếu bạn không hiểu mã: đừng lo lắng, bạn không cần biết nó hoạt động như thế nào, nhưng tại sao phải sử dụng nó và cách sử dụng nó.
Bạn nên sử dụng hàm image() vì hai lý do:
- Hàm image lặp qua chủ đề để tìm hình ảnh. Nếu chủ đề bạn đang làm việc được mở rộng sang một chủ đề khác và nếu bạn sao chép tệp vào nơi bạn đã chèn ảnh cục bộ nhưng ảnh đó không được sao chép trong chủ đề cục bộ thì nó sẽ lặp qua cây kế thừa chủ đề để tìm vị trí bức ảnh đó là.
- Nó sẽ sử dụng trình quản lý tài sản, vì vậy nó sẽ cải thiện hiệu suất chủ đề của bạn. Xem tài liệu Trình quản lý tài sản Yii để biết thêm thông tin về nó: http://www.yiiframework.com/wiki/148/under Hiểu-assets/
Vì vậy, để thêm ảnh vào chủ đề của bạn:
- chỉ cần tải ảnh lên như bình thường bằng trình tải tệp lên ở bên phải rồi thêm ảnh vào nơi bạn muốn trong bất kỳ tệp ghép nào:
{ { image('./files/myfile.png') }}
- Nếu bạn muốn thêm văn bản thay thế cho ảnh của mình (dành cho trình đọc màn hình và xác thực HTML), hãy thêm:
Template:Image('./files/myfile.png'), ''' 'my alternative text' ' ''
- Nếu bạn muốn thêm thuộc tính lớp và thêm id vào thuộc tính đó:
{{ image('./files/myfile.png'), 'my alternative text', {“class”: “a_nice_css_class ”, “id”: “any_id”} }}
Một số nội dung trong danh sách VIỆC CẦN LÀM của chúng tôi
- Cung cấp cho người dùng khả năng tải lên tệp xem trước tùy chỉnh từ chính trình chỉnh sửa
- Thêm một nút để xóa tệp cục bộ và quay lại câu lệnh được kế thừa
- Chỉ sao chép hình ảnh được sử dụng trong các tệp CSS (bằng cách liệt kê chúng trong tệp kê khai dưới dạng tệp cần sao chép)
- Nhắc nhở chủ đề hiện tại mở rộng (nếu có)
Tùy chọn chủ đề
Một điểm mới khác của LS3 là trang tùy chọn chủ đề. Như chúng ta sẽ thấy sau, người tạo chủ đề có thể tạo các tùy chọn của riêng họ và thậm chí cả trang tùy chọn quản trị viên của riêng họ. Ở đây, chúng ta sẽ xem nhanh cách hoạt động của trang tùy chọn của Chủ đề cốt lõi. Để truy cập các tùy chọn chủ đề ở cấp độ toàn cầu: hãy nhấp vào “tùy chọn chủ đề” trong danh sách chủ đề
Tùy chọn nâng cao
QS:Trình chỉnh sửa chủ đề - tùy chọn nâng cao
Tùy chọn đơn giản
Trang tùy chọn Đơn giản xuất phát từ chính Mẫu. Nó được tạo thông qua một tệp cành và một số javascript bên trong thư mục /options của chủ đề: https://github.com/LimeSurvey/LimeSurvey/tree/develop/templates/default/options (Liên kết bị hỏng)
Trang tùy chọn đơn giản chỉ cần điền vào các thông tin đầu vào ở biểu mẫu nâng cao. Bạn có thể thấy nó bằng cách bật hoặc tắt một cài đặt trong trang đơn giản và xem cách sửa đổi dữ liệu đầu vào liên quan ở dạng nâng cao cho phù hợp. Ví dụ: trong các tùy chọn đơn giản của Mẫu mặc định, nếu bạn thay đổi chủ đề Bootswatch thành “Darkly” rồi nhấp vào tab dành cho các tùy chọn nâng cao (ngay cả khi không lưu), bạn sẽ thấy trường “Cssframework Css” đã thay đổi từ
{"thay thế": "css/bootstrap.css","css/flatly.css"}
đến
{"thay thế": "css/bootstrap.css","css/darkly.css"}
Dưới đây là các tùy chọn đơn giản khác nhau cho các chủ đề cốt lõi:
- Ajax mode: Trang tiếp theo nên được tải qua ajax (nhanh hơn) hay qua tải lại trang (tốt hơn cho mục đích gỡ lỗi)!N !*Hình nền: nếu được đặt thành Có, hình ảnh có tên sample.png sẽ được tải (sẽ được thay thế bằng bộ chọn tệp trong Master)
- Box container: if được đặt thành Không, các câu hỏi sẽ không được chứa trong một hộp (vì vậy bạn có thể sử dụng các mảng lớn hơn chiều rộng màn hình)
- Brandlogo: nếu được đặt thành không, tên của cuộc khảo sát sẽ là được hiển thị ở thanh trên cùng, nếu không, bạn có thể chọn một trong các ảnh bên trong thư mục tệp để sử dụng làm ảnh biểu tượng.
- Animate body: nếu được đặt thành có, bạn có thể chọn một trong các ảnh động để áp dụng khi nội dung khảo sát được tải
- Hoạt hình câu hỏi: tương tự với các câu hỏi
- Hoạt hình cảnh báo: tương tự với các cảnh báo
- Bootstrap theme: tại đây, bạn có thể chọn chủ đề Bootstrap để tải. Chúng đến từ Bootswatch https://bootswatch.com/3/
Thư viện được sử dụng cho hoạt ảnh là animate.css: https://daneden.github.io/animate.css/
Tất nhiên, nhà cung cấp chủ đề có thể thêm thư viện hoạt ảnh của riêng mình hoặc không có thư viện hoạt ảnh nào cả.
Hệ thống kế thừa
Trong phần trước, chúng ta đã thấy rằng một chủ đề có thể mở rộng một chủ đề khác. Cấu hình chủ đề cũng có thể kế thừa từ cấu hình chủ đề khác. Điều đó có nghĩa là đối với một chủ đề nhất định, bạn có thể có cấu hình tại
- cấp độ toàn cầu (cấp độ chúng tôi vừa thấy có thể truy cập được từ danh sách chủ đề)
- ở cấp độ nhóm khảo sát
- cấp độ cuối cùng ở cấp độ khảo sát.
Mỗi tham số ở một cấp độ nhất định có thể kế thừa từ cấp trên: kế thừa nhóm khảo sát. Đầu tiên chúng ta hãy xem cấp độ nhóm khảo sát.
Ở cấp độ nhóm khảo sát
Thật vậy, một trong những điểm mới tuyệt vời khác của LS3 là hệ thống nhóm khảo sát. Bây giờ bạn có thể tạo các nhóm khác nhau để tổ chức các cuộc khảo sát của mình. Để truy cập nó, hãy chuyển đến danh sách khảo sát rồi nhấp vào tab nhóm khảo sát:
Trong danh sách này, bạn có hai nút hành động. Nếu nhóm trống, bạn có thể xóa nó. Nếu không, bạn luôn có thể chỉnh sửa nó. Bằng cách nhấp vào nút chỉnh sửa, bạn sẽ đến trang cấu hình Nhóm khảo sát:
Tab thứ ba của trang này có tên là “Tùy chọn mẫu cho nhóm khảo sát này”. Nếu bạn nhấp vào nó, bạn sẽ thấy danh sách các chủ đề giống như trong danh sách chủ đề, ngoại trừ việc ở đây chỉ hiển thị nút tùy chọn (chỉ có thể truy cập trình chỉnh sửa chủ đề từ danh sách chính).
Bây giờ, nếu bạn nhấp vào tùy chọn cho Mẫu mặc định, bạn sẽ thấy điều này:
- Kế thừa mọi thứ có nghĩa là tất cả cấu hình sẽ được kế thừa từ cấp cấu hình Toàn cầu.
- Nếu bạn vào trang tùy chọn nâng cao, bạn sẽ thấy tất cả các trường được đặt thành kế thừa.
- Nếu bạn nhấp vào "không" cho "Kế thừa mọi thứ" trong các tùy chọn đơn giản, bạn sẽ lại thấy một trang rất giống với trang tùy chọn chung. Sự khác biệt duy nhất là đối với mỗi trường, bạn có thể đặt thành có, không hoặc kế thừa; và mỗi bộ chọn thả xuống có giá trị kế thừa .
Ở cấp độ khảo sát
Khi chỉnh sửa khảo sát, ở menu thanh bên trái, bạn sẽ thấy mục mới “Tùy chọn chủ đề”. Nó sẽ dẫn bạn đến trang tùy chọn của Chủ đề được chọn cho khảo sát hiện tại. Bạn sẽ tìm thấy hệ thống kế thừa giống như trong nhóm khảo sát, nhưng lần này, kế thừa có nghĩa là cài đặt sẽ được kế thừa từ Nhóm khảo sát của khảo sát.
Ví dụ về trường hợp sử dụng
Giả sử bạn đang sử dụng một chủ đề duy nhất cho các công ty khác nhau (A và B). Bạn đặt các tùy chọn yêu thích của mình ở cấp độ toàn cầu (ví dụ: bật ajax, tạo hoạt ảnh cho nội dung có trang trình bày, cảnh báo bằng xung). Sau đó, bạn tạo một nhóm khảo sát cho mỗi công ty: một nhóm khảo sát cho công ty A sẽ tổ chức tất cả các cuộc khảo sát cho công ty này và một nhóm khảo sát cho công ty B sẽ tổ chức tất cả các cuộc khảo sát cho công ty B. Ở cấp độ này, bạn sẽ đặt chỉ có biểu tượng và nền và bạn sẽ cho phép các tùy chọn khác kế thừa. Vì vậy, tất cả các cuộc khảo sát trong nhóm A sẽ sử dụng logo của công ty A và tất cả các cuộc khảo sát từ nhóm B sẽ sử dụng logo của công ty B. Đối với một trong các cuộc khảo sát của công ty A, bạn có thể sử dụng một nền tảng khác liên quan đến chủ đề của khảo sát: bạn chỉ cần thay đổi nền trong các tùy chọn ở cấp độ khảo sát. Nếu ai đó ở công ty B nói với bạn rằng cảnh báo xung quá mạnh và anh ta muốn thứ gì đó mượt mà hơn như mờ dần, bạn chỉ cần thay đổi hoạt ảnh cảnh báo ở cấp Nhóm khảo sát B và tất cả các cuộc khảo sát của nhóm này giờ đây sẽ sử dụng hoạt ảnh này. Nếu công ty A thay đổi logo, bạn có thể thay đổi logo ở cấp Nhóm khảo sát A và tất cả các khảo sát của nhóm này sẽ sử dụng logo mới.
Câu hỏi thường gặp về tùy chỉnh chủ đề
Bạn sẽ tìm thấy ở đây một số câu trả lời cho các câu hỏi đã được hỏi trong diễn đàn và điều đó có thể giúp bạn tùy chỉnh chủ đề của mình.
Tùy chỉnh CSS/JS: giải quyết với người quản lý tài sản ("tại sao những thay đổi của tôi không được áp dụng?")
Nếu bạn đang cố cập nhật CSS/JS của một chủ đề bằng cách chỉnh sửa trực tiếp mã bằng trình chỉnh sửa yêu thích của mình, bạn có thể ngạc nhiên khi những thay đổi của mình không được áp dụng.
Kể từ phiên bản 2.50, LS sử dụng trình quản lý tài sản Yii:
Hiểu-assets/ Yii Tài liệu về Tài sản
Nó di chuyển các tệp CSS/JS của một chủ đề sang thư mục con tmp/ với một chuỗi ngẫu nhiên (ví dụ: "tmp/1ef64ml/"). Vì vậy, nếu bạn thực hiện bất kỳ thay đổi nào đối với tệp css/js và thông báo cho người quản lý nội dung, các tệp sẽ được sao chép sang thư mục con mới có tên mới để bộ đệm của trình duyệt người dùng được cập nhật và họ thấy css/js mới . Nếu không, họ sẽ phải xóa bộ nhớ đệm của trình duyệt.
Ở đây các liên kết CSS trong tiêu đề khi trình quản lý tài sản được bật:
Như bạn có thể thấy, tất cả chúng đều đề cập đến các thư mục con tmp/.
Ở đây các liên kết CSS trong tiêu đề khi trình quản lý nội dung tắt:
Như bạn có thể thấy, chúng trỏ đến các tệp thực của chủ đề.
Vì vậy, khi bạn chỉnh sửa CSS/JS của một chủ đề, bạn có nhiều khả năng khác nhau:
- Bạn có thể sử dụng LS Theme Editor: nó xử lý công việc quản lý tài sản và bạn không cần phải làm vậy lo lắng về bất cứ điều gì
- Bạn có thể bật chế độ gỡ lỗi: nó sẽ tắt trình quản lý nội dung, do đó, các tệp css/js thực sự trong chủ đề của bạn sẽ được gọi (nhưng sau đó, bạn phải làm mới bộ nhớ đệm của trình duyệt ở mỗi lần tải)
- Bạn có thể làm mới bộ đệm nội dung: từ Cài đặt chung -> Chung -> Xóa bộ đệm nội dung
Sử dụng trình chỉnh sửa chủ đề sẽ giúp bạn hiểu cấu trúc của công cụ chủ đề mới.
Ngoài ra, nếu việc tùy chỉnh của bạn có tính chất trái cây, hãy cẩn thận với đặc tính CSS: hầu hết các định nghĩa đều sử dụng bộ chọn ".fruity" (một trong các lớp của phần tử cơ thể)
Thêm phông chữ tùy chỉnh vào chủ đề của tôi
Cách dễ dàng: sử dụng Google Font CDN
Bootswatch Survey Theme sử dụng Google Font CDN. Hãy cùng xem nó hoạt động như thế nào nhé: 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");
Sau đó, phông chữ Lato được sử dụng thông qua các quy tắc CSS: https://github.com/thomaspark/bootswatch/blob/master/dist/flatly/bootstrap.css#L72
cơ thể {
...
Họ phông chữ: "Lato";
...
}
Bạn có thể sử dụng bất kỳ phông chữ Google nào theo cách đó trong chủ đề tùy chỉnh của mình. Tất nhiên, bạn nên xóa bộ chọn phông chữ khỏi các tùy chọn của chủ đề. Xóa những dòng đó trong options.twig: https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/options/options.twig#L209-L230
Sử dụng phông chữ cục bộ
Tất nhiên, bạn cũng có thể tải xuống các tệp phông chữ và sử dụng chúng từ máy chủ cục bộ thay vì từ Google CDN (tốt hơn cho quyền riêng tư). Để có ví dụ về cách thực hiện, đây là phiên bản phông chữ noto địa phương của chúng tôi: https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/assets/fonts/noto.css
@font-face {
họ phông chữ: 'Noto Sans';
cỡ chữ: 300;
kiểu phông chữ: bình thường;
src: url('./font-src/Noto/NotoSans-Regular.ttf');
}
...
Bạn có thể sử dụng định nghĩa tương tự trong tệp css chủ đề của mình, sau đó bằng cách sao chép tệp NotoSans-Regular.ttf trong thư mục css/font-src/ chủ đề của bạn.
Sau đó, áp dụng phông chữ đó cho nội dung của bạn (hoặc bất kỳ thành phần nào khác) như trên và xóa bộ chọn phông chữ tùy chọn mặc định.
Tạo bộ chọn phông chữ của riêng bạn trong các tùy chọn
Hiện tại, bạn không thể dễ dàng sử dụng bộ chọn phông chữ cốt lõi để thêm phông chữ của riêng mình vào các tùy chọn. Trước tiên, chúng tôi cần cung cấp khả năng cho người dùng cuối tải lên các gói tùy chỉnh (xem đoạn tiếp theo: Tìm hiểu về Fruity Font Selector )
Đây là cách tiến hành:
- Thêm hai phông chữ (my_custom_font và my_custom_other_font) vào chủ đề của bạn, sử dụng CDN hoặc máy chủ cục bộ
- Sau đó, trong tệp css của bạn, thêm hai lớp mới:
.font-my_custom_font {
họ phông chữ: 'my_custom_font ';
}
.font-my_custom_other_font {
họ phông chữ: 'my_custom_other_font';
}
- Trong tệp XML của chủ đề của bạn, hãy thêm tùy chọn phông chữ (mặc định sẽ là my_custom_font) :
<options>
....
<font>my_custom_font</font>
</options>
- trong option.twig, hãy thêm bộ chọn phông chữ để thêm các dòng đó (hiện chưa được kiểm tra, vì vậy hãy khiếu nại lên diễn đàn nếu nó không hoạt động):
<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'> {{ "Phông chữ tùy chỉnh của tôi" | t }}</div>
<div class='panel-body'>
<div class='form-group row'>
<label for='simple_edit_font' class='control-label'>{{ "Chọn phông chữ:" | t }}</label>
<div class='col-sm-12'>
<select class='form-control selector_option_value_field' id='simple_edit_font' name='font'>
{% nếu templateConfiguration.sid không trống hoặc templateConfiguration.gsid không trống %} // Đây không phải là "chủ đề" thay vì "mẫu" sao?
{% đặt fontOptions = fontOptions ~ '<option value = "inherit" > Thừa kế</option> ' %}
{% endif %}
<optgroup label="{{ "My Custom fonts" | t }}">
<option class="font-my_custom_font" value="custom_font" data-font-package="" > Phong tục</option>
<option class="font-my_custom_other_font" value="my_custom_other_font" data-font-package="" > Khác</option>
</optgroup>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
Bây giờ người dùng của bạn sẽ có thể chọn giữa hai phông chữ đó.
Xem xét Bộ chọn phông chữ Fruity
Trong tương lai, chúng tôi sẽ cung cấp cho người dùng cuối khả năng tải lên các gói nội dung của riêng họ, bao gồm các gói phông chữ. Nó sẽ thực hiện rất dễ dàng mọi tùy chỉnh phông chữ.
Để hiểu Yii Gói:
http://www.yiiframework.com/doc/api/1.1/CClientScript#packages-detail
Các gói LimeSurvey được xác định trong các tệp khác nhau. Các gói phông chữ được xác định tại đây:
https://github.com/LimeSurvey/LimeSurvey/blob/4c40b61afb0dba8fd80154b50f5831045df8d814/application/config/fonts.php
Ví dụ: gói phông chữ Noto được xác định tại đây:
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',
),
),
Tệp noto.css chứa ở đây:
https://github.com/LimeSurvey/LimeSurvey/blob/4c40b61afb0dba8fd80154b50f5831045df8d814/assets/fonts/noto.css
Chú ý định nghĩa của lớp css ".font-noto" ở cuối nó:
@font-face {
họ phông chữ: 'Noto Sans';
...
}
...
.font-noto{
họ phông chữ: 'Noto Sans';
}
Sau đó, trong Chủ đề Vanilla, phông chữ noto được sử dụng bằng cách thêm gói noto và xác định tùy chọn phông chữ thành noto:
https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/config.xml#L79
<packages>
....
<add> phông chữ-noto</add>
</packages>
<options>
....
<font>không phải</font>
</options>
Sau đó, phông chữ của lớp nội dung được xác định bằng giá trị này:
https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/views/layout_global.twig#L76
<body class=" ... font-{{ aSurveyInfo.options.font }} ... " ... >
Tất nhiên, tệp XML chỉ chứa các giá trị mặc định cho cấu hình chủ đề của bạn. Nhưng thực tế, những giá trị đó được xác định và đọc bên trong cơ sở dữ liệu (bảng "template_configuration" (Câu hỏi: "template_" của "theme_"?) dưới dạng chuỗi json. Tệp option.js chỉ sử dụng giá trị của bộ chọn phông chữ của tùy chọn đơn giản để thay đổi giá trị bên trong biểu mẫu tab nâng cao: https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/options/options.js#L148-L174
Vì vậy, khi chức năng "tải lên gói nội dung" khả dụng, bạn sẽ dễ dàng thêm tập lệnh quét tất cả các gói phông chữ hiện có để thêm chúng vào bộ chọn.
Thêm tùy chọn chủ đề để kiểm soát vị trí và hiển thị các thành phần khảo sát
Hướng dẫn này sẽ chỉ ra cách thêm tùy chọn vào chủ đề mở rộng để hiển thị các thành phần khảo sát ở nhiều vị trí khác nhau. Trong trường hợp này, chúng tôi sẽ tạo các tùy chọn chủ đề để hiển thị tiêu đề khảo sát ở hai vị trí khác nhau.
Tạo một chủ đề tùy chỉnh
- Mở rộng chủ đề "bootswatch" như mô tả ở trên.
- Sao chép custom.css sang chủ đề cục bộ như mô tả ở trên.
Tạo tùy chọn chủ đề mới
- Sao chép nội dung của /themes/survey/bootswatch/options/ sang /upload/themes/survey/yourThemeName/options/ .
- Open /upload/themes/survey/yourThemeName/ options/options.twig trong trình chỉnh sửa và tìm "{# Bootstrap Bootswatch theme #}". Trực tiếp trước cha mẹ của nó<div class='row'> phần tử, thêm phần này:
{# Tên khảo sát tùy chỉnh trong thanh điều hướng #} <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'>Tên khảo sát trong thanh điều hướng</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'/> Vâng </label> <label class="btn btn-default"> <input name='surveyname1' type='radio' value='off' class='selector_option_radio_field ' data-id='simple_edit_options_surveyname1'/> Không </label> </div> </div> </div> </div> </div> <div class='row'> <hr/> </div> {# Tên khảo sát tùy chỉnh bên dưới thanh tiến trình #} <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'>Tên khảo sát bên dưới thanh tiến trình</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'/> Vâng </label> <label class="btn btn-default"> <input name='surveyname2' type='radio' value='off' class='selector_option_radio_field ' data-id='simple_edit_options_surveyname2'/> Không </label> </div> </div> </div> </div> </div> <div class='row'> <hr/> </div>
- Mở /upload/themes/survey/yourThemeName/config.xml và thêm hai mục vào khối "options" để nó trông như thế này:
<options> <ajaxmode> TRÊN</ajaxmode> ... <surveyname1> TRÊN</surveyname1> <surveyname2> TRÊN</surveyname2> </options>
- Điều này sẽ cung cấp cho bạn hai tùy chọn mới trong màn hình Tùy chọn chủ đề như thế này:
Chế độ xem đã sửa đổi cho Tiêu đề khảo sát trong thanh điều hướng
- Tạo thư mục mới /upload/themes/survey/yourThemeName/views/subviews/header/ .
- Copy /themes/survey/vanilla/ lượt xem/subviews/header/nav_bar.twig vào thư mục mới đó.
- Mở /themes/survey/vanilla/views/subviews/header/nav_bar.twig và tìm "{# Logo option #}". Theo đó, hãy sửa đổi câu lệnh IF cho logo/tên khảo sát để nó trông như thế này:
{# Tùy chọn biểu trưng #} {% 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 %}
- Thêm nội dung như thế này vào /upload/themes/survey/yourThemeName/css/custom.css :
.navbar-thương hiệu { chiều cao dòng: 60px; cỡ chữ: 32px; }
- Chuyển tùy chọn chủ đề "Tên khảo sát trong thanh điều hướng" thành "Có"
- Bạn sẽ thấy điều này:
Chế độ xem đã sửa đổi cho Tiêu đề khảo sát trong thanh tiến trình
- Tạo thư mục mới /upload/themes/survey/yourThemeName/views/subviews/survey/group_subviews .
- Sao chép /themes/survey/vanilla/views/subviews/survey/group_subviews/group_container.twig vào thư mục mới đó.
- Open /themes/survey/vanilla/views/subviews/survey/group_subviews/group_container .twig và thêm một<h1> phần tử cho tên khảo sát. Vì vậy, nó trông như thế này:
<div class="{{ aSurveyInfo.class.groupcontainer }} space-col" {{ aSurveyInfo.attr.groupcontainer }}> {# Tên khảo sát tùy chỉnh #} {% if( aSurveyInfo.options.surveyname2 == "on") %} <h1 class="custom-survey-name"> {{ aSurveyInfo.name }}</h1> {% endif %} {# Tên nhóm #} {{ include('./subviews/survey/group_subviews/group_name.twig') }} {# Mô tả nhóm #} {{ include('./subviews/survey/group_subviews/group_desc.twig') }} {# TRÌNH BÀY CÂU HỎI Đây là phần chính. Nó sẽ hiển thị từng câu hỏi cho nhóm này #} <!-- PRESENT THE QUESTIONS --> {% cho aQuestion trong 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>
- Thêm nội dung như thế này vào /upload/themes/survey/yourThemeName/css/custom.css :
.navbar-thương hiệu { chiều cao dòng: 60ph1.custom-survey-name { lề: 0; căn chỉnh văn bản: giữa; }
- Chuyển tùy chọn chủ đề "Tên khảo sát bên dưới thanh tiến trình" thành "Có"
- Bạn sẽ thấy điều này:
Tải xuống
- Chủ đề mở rộng mẫu: Media:Test_survey_names.zip
Tạo chủ đề từ đầu
Sắp có tài liệu.
Hiện tại chỉ đưa ra vài lời khuyên thôi.
Cấu trúc chủ đề
Tệp và thư mục
Khi bạn tạo Chủ đề từ đầu, bạn không cần phải tôn trọng cấu trúc tệp/thư mục/css/js từ Vanilla. Css/js bắt buộc được thêm vào theo lõi (bạn vẫn có thể xóa nó nếu cần)
Các tệp duy nhất mà chủ đề của bạn phải có là các tệp bố cục:
- layout_global.twig : hiển thị các trang để thực hiện khảo sát
- layout_survey_list.twig : hiển thị danh sách khảo sát (nếu chủ đề này được đặt làm mặc định)
- 'layout_errors.twig' : được sử dụng để hiển thị các lỗi chặn hiển thị khảo sát. ( id khảo sát sai, nhóm trống trong nhóm xem trước, v.v.)
- layout_user_forms.twig: hiển thị các biểu mẫu người dùng như: token (người tham gia khảo sát) và đăng ký.
- 'layout_print.twig' : dùng để in bản khảo sát ra pdf
- layout_printanswers.twig: in câu trả lời
Nội dung của các tệp đó, các tệp có chứa hay không, hoàn toàn tùy thuộc vào bạn. Tất cả các tệp và thư mục khác mà bạn tìm thấy trên Vanilla hoàn toàn là tùy chọn, vui lòng sắp xếp mã theo cách bạn muốn.
Nội dung
Trong bố cục_global.twig của Vanilla, bạn sẽ thấy chúng tôi sử dụng một biến có tên là "include_content" để quyết định nội dung sẽ hiển thị https://github.com/LimeSurvey/LimeSurvey/blob/2398dda3b425da1a37d4611cd7963d39ac739987/themes/survey/vanilla/views/ bố cục_global.twig#L114-L115
{% set sViewContent = './subviews/content/' ~ aSurveyInfo.include_content ~ '.twig' %}
{% include './subviews/content/outerframe.twig' với {'include_content': sViewContent } %}
aSurveyInfo.include_content cho bạn biết hành động nào hiện đang diễn ra: hiển thị câu hỏi? hiển thị kết quả gửi? hiển thị rõ ràng tất cả? v.v Như bạn có thể thấy, trong vanilla, chúng tôi tạo một tệp để đưa vào bằng hành động. Vì vậy, nếu bạn muốn biết danh sách các hành động, chỉ cần kiểm tra thư mục views/subviews/content của vanilla và xóa tiện ích mở rộng "cành cây" : 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
Nếu bạn đã tạo chúng cho phiên bản 2.x của LimeSurvey, bạn sẽ nhận thấy rằng hầu hết chúng đều tương ứng với các tệp pstpl cũ cho Limesurvey 2.x. Một lần nữa, trong chủ đề của bạn, bạn không có nghĩa vụ phải tạo các tệp đó, với những tên đó, trong thư mục này. Ví dụ: bạn có thể chỉ cần thêm một công tắc khổng lồ trong bố cục_global.twig với HTML mong muốn cho mỗi hành động.
Tệp kê khai config.xml
Tệp kê khai của chủ đề chứa thông tin chính về chủ đề của bạn. Khi bạn cài đặt một chủ đề, nội dung của tệp kê khai sẽ được tải trong cơ sở dữ liệu ở hai bảng khác nhau: template và template_configuration. Vì vậy, mỗi khi bạn sửa đổi bảng kê khai của một chủ đề, bạn phải gỡ cài đặt và cài đặt lại chủ đề đó (hoặc chỉ cần đặt lại chủ đề đó). Vì quá trình này gây khó chịu khi phát triển chủ đề nên bạn có thể buộc sử dụng trực tiếp tệp XML thay vì các mục nhập DB. Để làm như vậy, trong config.php hãy bật chế độ gỡ lỗi và 'force_xmlsettings_for_survey_rendering' thành true.
Phần siêu dữ liệu
Nothing complex: just the main infos about your theme. It will be pushed in the table 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>
Few remarks:
- name: will be used as a key in the db. So it must be unique, and it should not have any special chars (no spaces). Note that cases will not be taken in account
- Title: will be used to display your theme name in the different lists. It can have special chars
- description: will be used in the main list of survey theme. It can contains special chars, and even HTML code by using
- extends: optional, it defines the parent themes. So if any file is not present in this theme (twig/js/css/jpg, etc) it will look for it in the parent theme
The files section
This one is an important one. It will be pushed in the table template_configuration, in the field files_css, files_js, files_print_css as json arrays.
Eg: the files section of the Material Premium Theme:
<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>
All the CSS/JS files present in this section will be loaded at the launch of the survey (in ajax mode. If ajax mode is off, then of course all the files are reloaded at each page).
They will be added to a Yii Asset Packet based on the name of the theme. So when Asset Manager is on (debug mode being off), those files will be copied to the tmp directory with the rest of the theme (so you can use relative path in the CSS and JS to reach the image files).
About the Asset manager in Yii: https://www.yiiframework.com/wiki/148/understanding-assets
About packages in Yii: http://www.yiiframework.com/doc/api/1.1/CClientScript#packages-detail
They will use the inheritance system. It means that if you add a CSS/JS file to a theme, but it's not present in the theme, then the engine will look into all the mother themes of this theme and will use the first one it finds. So if a user extends your theme via the theme editor, all those files will be inherited in his theme. The keywords refer to this inheritance system.
- add : it will add the file to the theme, and to all its inherited theme
- replace: it will replace the the file of its mother theme
- remove: it will remove the file from any package, even the core package (since 3.14)
Few remarks on those keywords:
Inheritance tips
As explained before, the "add" keyword can refer to a file being in one of the mother theme. So you can "add" a file in this section, and still not having this file in your theme, but in one of its parents theme. The engine will look into all its parent themes and will use the first one it finds. If it can't find the file, and debug mode is on in config, and js frontend debug mode is on in global setting, a message in console will warn you. Eg: if we add in a my_theme: <add>css/unexisting.css</add>, in the console we'll see:
(¯`·._.·(¯`·._.· Theme Configuration Error ·._.·´¯)·._.·´¯)
Can't find file 'css/unexisting.css' defined in theme 'my_theme'
If the debug mode is off, then no error at all will be seen. The engine will just ignore the wrong add statements.
When to use add, when to use replace, when can I just leave it to the parent theme?
First: add and replace are the very same keyword. You can use the one or the other, the engine will just do the same. They are distinct for human readers, so they understand what was your intention.
You can't add a file with the same name as the mother theme: it will always replace it. eg: If you have a file called "my_mother_theme/foo.css" and you add a file called "foo.cs" in the daughter theme, only "daughter_theme/foo.css" will be added to the theme. If you want to keep "my_mother_theme/foo.css", just choose another name for "daughter_theme/foo.css", like "daughter_theme/bar.css". So the keyword "add" can be used as a "replace" keyword.
If you wonder why: this make much easier the automatic generation of inherited theme, copying the file section works out of the box (no need to rename "add" to "replace" when extending one the file).
To make it clear, let's take the Fruity example. Here its css file section:
<css>
<add>css/variations/sea_green.css</add>
<replace>css/animate.css</replace>
<replace>css/theme.css</replace>
<replace>css/custom.css</replace>
</css>
If you look to the custom.css file in fruity, it is exactly the same as the vanilla one. We could delete the custom.css file inside fruity, the one of vanilla would loaded. We could remove the statement <replace>custom.css</replace> from the Fruity manifest, the statement from vanilla will be used, and the vanilla custom.css would be loaded.
So why do we use the statement <replace>custom.css</replace> inside the fruity manifest? The answer is easy: because we want the end user to be able to extend the fruity theme, to modify the file in his local theme, and to load this modified file from his inherited theme. To understand, just extend fruity and have a look to the extended theme. THe extended theme doesn't even have the file custom.css. So the one of fruity will be used. But: if the user create this file in the extended theme (by clicking on "extend" in the theme editor), then this file will be loaded from his theme.
So in general:
if you create a theme from scratch not extending any theme, just use the add statement to add your css/js files. Easy peasy.
if you create a theme extending another theme, and you don't want the users to be able to extends the css/js file from the mother theme: don't use the add statement in your manifest. THe files will still be loaded from the mother theme configuration.
if you create a theme extending another theme, and you want to replace a file from the mother theme: use the replace keyword (the add keyword will have the same result)
if you create a theme extending another theme, if you don't replace a given file from css/js, but you want the users to be able to extend this file: then use the "replace" statement in your manifest for this file. Even if you don't replace the file, by using the keyword replace in the manifest: you allow the user to do it if he wants to do it.
Only this very last case needs a bit of mental gymnastic ot understand, all the other cases are trivial.
You can also register CSS and JS files directly from the twig code. Those files will be loaded only when the twig file is asked. If you want the users to be able to inherit those JS/Css files from the theme editor, remember to use the functions Template:RegisterTemplateCssFile('my style.css') and Template:RegisterTemplateScript('my script.js'). If you don't use those functions, your theme may work, but inheritance on it will be broken. It is the same logic as the Template:Image('my picture.jpg') function
The remove keyword
The remove keyword is available only since 3.14. With this one, you can remove any css/file from any package, even the core ones. It is used in Material Premium Theme to remove the Awseome Bootstrap Checkbox's files:
<remove>awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css</remove>
so you should use the very same syntax as the package's file (eg: "awesome-bootstrap-checkbox.css" alone without it's folder path would not work). You'll find the complete list of core packages and their files in /application/config/packages.php and config/third_party.php. For example, for 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',
),
Another way to find the exact name to use in the remove tag is to turn asset manager on (turning debug mode off or setting 'use_asset_manager'=>true in the config). Then, the path to use will be the one just after the random directory in the tmp directory. For example, for awesome-bootstrap-checkbox.css:
<link rel="stylesheet" type="text/css" href="/tmp/assets/cbc4e3cb/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css" />
Files you should not remove:
jquery-3.1.1.min.js : needed
jquery-migrate-3.0.0.min.js : needed
survey.js : needed
moment-with-locales.min.js : needed for date question type (and some other i think)
em_javascript.js : needed for all ExpressionScript javascript
The options section
This section is relative to the option of your theme. It will be used to feed the filed "options" of the table template_configuration as a json array.
Further information
Some notes
NOTE: if you edit the XML file of a theme, you must uninstall and reinstall the theme so it's taken into account.
NOTE: to avoid that, you can force the use to the XML rather than DB. In config.php turn debug mode on and uncommment:
'force_xmlsettings_for_survey_rendering' => true, // Uncomment if you want to force the use of the XML file rather than DB (for easy theme development)
Becareful: everything will be loaded from the XML (included options, etc)
NOTE: if you manually edit the CSS/JS files (without using the Theme Editor), and if debug mode is off, you can now force the asset to be flushed. In "Global Settings", "General tab", click the button "Clear assets cache".
NOTE: if you remove the section