Cập nhật các theme với các tập tin của riêng bạn- 123docz.net

1. NHỮNG VẤN ĐỀ PHÁT TRIỂN THEME TRONG LIFERAY

1.3.5.Cập nhật các theme với các tập tin của riêng bạn

Bây giờ bạn biết làm thế nào một bộ khung theme mới được tạo ra với kịch bản tạo ra theme và các tập tin trong css, hình ảnh, javascript, và các mẫu thư mục con sao chép từ khi kiến triển khai lệnh được thực hiện trong Liferay Plugins SDK. Bạn cũng biết cấu trúc của mỗi mẫu Velocity trong theme. Đó là thời gian để cập nhật theme với các tập tin của riêng bạn.

1.3.5.1. Thay đổi cấu hình để khởi động chế độ phát triển

Liferay Portal là linh hoạt trong cấu hình của thuộc tính hệ thống và thuộc tính cổng thông tin bằng cách thiết lập tên cặp giá trị tên thuộc tính trong system.properties và portal.properties, tương ứng. Hai tập tin được đóng gói trong ${PORTAL_ROOT_HOME} / WEB-INF/lib/portal-impl.jar. Theo mặc định, một số các thuộc tính cổng thông tin đã được cấu hình sẵn cho nhanh hơn hiệu suất trong sản xuất. Tuy nhiên, những thiết lập mặc định không phù hợp cho các kỹ sư trong chế độ phát triển.

25 phát triển để thay đổi các thiết lập mặc định và cho phép máy chủ cổng thông tin nhanh hơn và thuận tiện hơn sự phát triển của Liferay plugin chẳng hạn như theme và portlet. Một cách đơn giản để tạo ra một máy chủ cổng thông tin phát triển thân thiện hơn là để sao chép các mã sau đây từ các cổng thông tin developer.properties cho cổng thông tin ext.properties trong $ {PORTAL_ROOT_HOME} / WEB-INF/classes. Tạo portal- ext.properties tập tin nếu nó không tồn tại:

theme.css.fast.load = false theme.images.fast.load = false javascript.fast.load = false javascript.log.enabled = true layout.template.cache.enabled = false browser.launcher.url = velocity.engine.resource.manager.cache.enabled = false com.liferay.portal.servlet.filters.cache.CacheFilter = false com.liferay.portal.servlet.filters.themepreview. ThemePreviewFilter = true

Với phương pháp này để kích hoạt chế độ nhà phát triển, tuy nhiên, các nhà phát triển sẽ cần phải sửa đổi các tập tin portal-ext.properties bất cứ lúc nào khi bạn chuyển đổi giữa phát triển và dàn dựng / thử nghiệm môi trường. Một cách tiếp cận tốt hơn là để thay đổi JVM tham số trên máy chủ của nhà phát triển như hình sau:

"Dexternal-properties =portal-developer.properties"

Một khi các chế độ Liferay phát triển đã được kích hoạt, bạn có thể sử dụng plugin Firebug của Firefox như một công cụ gỡ lỗi trong phát triển theme của bạn. Xin vui lòng tham khảo tài liệu tại portal.properties $ {PORTAL_ROOT_HOME} /WEB-INF/lib/portal-impl.jar tập tin cho một sự hiểu biết tốt hơn về những ý nghĩa của các thuộc tính này.

1.3.5.2. Sửa đổi các tập tin được tạo ra

Các tập tin đầu tiên mà bạn có thể muốn thay đổi là $ {liferay.plugins.sdk.home} /themes / {your.theme.home} / docroot / WEB-INF / Liferay-plugin-package.properties. Bạn có thể muốn thay đổi giá trị mặc định của page-url cho URL tổ chức của bạn trang web hoặc cá nhân, tác giả tên riêng của bạn, và các loại giấy phép. Ngoài ra, giá trị tài sản gia tăng phiên bản mô-đun được thêm vào các tập tin WAR theme tên. Ví dụ:

name=Palm-Tree Publications Theme module-group-id=liferay module-incremental-version=1 tags= short-description= change-log= page-url=http://www.palmtreepublications.com author=Frank Yu licenses=

Khi theme được xây dựng và đóng gói, bạn sẽ thấy một tập tin theme WAR có dạng của <plugin name-theme>-<version number>.<module-incremental-version> với một phần mở rộng WAR, cho ví dụ palmtree-theme-6.0.5.1.war.

Nếu bạn muốn thay đổi các giá trị mặc định trong các mục cho mỗi theme được tạo ra từ lệnh tạo ra, bạn có thể giải nén $ {liferay.plugins.sdk.home}/themes/ theme.zip một theme địa phương đặt tên thư mục, thay đổi các giá trị mặc định trong /theme/docroot /WEB-INF/Liferay-plugin-package.properties, và nén lại theme thư mục để theme.zip, và ghi đè lên $ {liferay.plugins.sdk.home} /themes/ theme.zip. Từ bây giờ, tất cả các theme được tạo ra từ theme tạo lệnh trong SDK Plugins sẽ có giá trị mặc định của riêng bạn.

27 Như đã giải thích trước đó, bạn có thể chạy ant deploy để xây dựng, đóng gói, và triển khai theme được tạo ra từ lệnh theme create . Tuy nhiên, theme được đóng gói có các tập tin mặc định từ Liferay Portal và không phải là những gì bạn muốn sử dụng ứng dụng của riêng của bạn.

Để đạt được phong cách riêng của bạn về thiết kế theme, bạn cần để tạo ra CSS riêng, hình ảnh, JavaScript, và thậm chí cả các mẫu Velocity của bạn. Trong hầu hết trường hợp, may mắn thay, bạn không cần phải tạo ra hàng trăm tập tin như vậy từ đầu. Bạn có thể tận dụng hầu hết các của các tập tin hiện có sao chép từ Liferay Portal, và tạo ra hoặc sửa đổi chỉ có các tập tin bạn cần cho thiết kế của riêng bạn.

Về mặt lý thuyết, bạn có thể trực tiếp sửa đổi hoặc ghi đè lên bất kỳ tập tin trong css, hình ảnh, js, và các mẫu thư mục con theo thư mục docroot của theme tự động sao chép từ Liferay Portal. Sau đó, bạn có thể chạy ant deploy để xây dựng WAR tập tin, triển khai các theme trong Liferay Portal, và xem các thay đổi của bạn khi theme được áp dụng cho một trang web hoặc một trang cá nhân.

Tuy nhiên, đây là một sai lầm phổ biến cho các nhà phát triển nhiều theme cho nhiều lý do:

 Với hàng trăm các tập tin trong thư mục docroot của theme, nó sẽ được khó khăn cho các nhà phát triển theme để theo dõi những gì đã được thay đổi theme của riêng bạn

 Quan trọng hơn, trực tiếp thay đổi trong css, hình ảnh, js, và các mẫu các thư mục con sẽ bị mất vì các thư mục con này sẽ được xóa hoàn toàn khi nhiệm vụ kiến sạch là chạy

 Các cơ sở mã của theme của bạn sẽ không được duy trì

May mắn thay, Liferay Portal cung cấp một cơ chế tốt hơn và duy trì cho các nhà phát triển theme để tạo ra các tập tin của riêng mình hay sửa đổi bất kỳ tập tin hiện có, trong

28 khi trong khi chờ đợi, để có thể tận dụng hầu hết các tập tin hiện có sao chép Liferay Portal.

Bên trong các theme mới được tạo ra, bạn có thư mục / docroot / _diffs. Thư mục _diffs là điểm khởi đầu mà tất cả các mới của bạn hoặc chỉnh sửa CSS, hình ảnh, JavaScript, các mẫu Velocity các tập tin được lưu lại. Hãy nhớ rằng bạn đặt chỉ có sự khác biệt của theme tùy chỉnh trong _diffs thư mục và không sao chép Liferay ban đầu không thay đổi các tập tin trong thư mục này. Sau này thực hành tốt nhất, bạn sẽ có một cơ sở duy trì mã nhiều hơn nữa và một nhiệm vụ dễ dàng hơn nhiều khi di chuyển các theme một phiên bản mới hơn trong tương lai.

Tạo CSS riêng của bạn định nghĩa trong / docroot /_diffs / css / custom.css

Ít nhất, bạn cần phải sửa đổi các tập tin custom.css để thay đổi cách theme của bạn trông. Đó là đánh giá cao đề nghị rằng tất cả các thay đổi được thực hiện để điều này custom.css, như tất cả các file CSS khác được sử dụng để cung cấp cấu trúc cơ bản của bạn theme. Bạn không cần phải sao chép CSS định nghĩa không thay đổi so với Liferay Portal vào tập tin này bởi vì họ sẽ được sao chép tự động khi theme được xây dựng và đóng gói. Bạn có thể tạo ra một css thư mục con trong thư mục _diffs và lưu custom.css vào thư mục /docroot/_diffs/css.

Tạo JavaScript của riêng bạn trong / docroot / _diffs / js / main.js

Tương tự như vậy, bạn có thể tạo ra main.js tập tin và thêm tất cả các mã JavaScript tùy chỉnh của bạn trong tập tin này và lưu nó dưới thư mục / docroot / _diffs / js. Một lần nữa, như là một phần của các thực hành tốt nhất của phát triển theme, bạn không cần phải sao chép bất kỳ mã JavaScript ban đầu không thay đổi từ Liferay Portal vào này main.js.

Tạo hình ảnh của riêng bạn trong / docroot / _diffs / images thư mục hoặc thư mục con. Nếu bạn cần phải ghi đè lên bất kỳ hình ảnh out-of-box được sao chép từ Liferay Portal đến thư mục /docroot/images của theme của bạn, bạn cần để tạo ra hoặc sửa đổi

nhắm mục tiêu hình ảnh, lưu nó như là tên cùng một tập tin, và sau đó đặt nó để tương ứng thư mục con dưới thư mục /docroot / _diffs / images. Hình ảnh của bạn sẽ ghi đè lên hình ảnh mặc định với cùng một tên tập tin. Bạn cần phải chắc chắn rằng bạn hoàn toàn kiểm tra thay đổi hình ảnh bao gồm cả màu sắc, kích thước của nó, và như vậy trong các cổng thông tin hoặc portlet. (adsbygoogle = window.adsbygoogle || []).push({});

Nếu bạn cần phải thêm một số hình ảnh mới cho theme của riêng bạn, bạn có thể lưu chúng trong thư mục /docroot/_diffs/images/custom hoặc thư mục con của nó, như bạn muốn. Bằng cách này bạn có thể tách rời hình ảnh của riêng bạn từ các out-of-the-box ban đầu hình ảnh. Bạn cũng có thể muốn tạo ra hai hình ảnh Screenshot.png và thumbnail.png để hiển thị một trang với theme hiện tại trông giống như. Bạn cũng có thể tạo ra một thư mục con thanh tìm kiếm và đặt tất cả các hình ảnh liên quan đến tìm kiếm trong này / docroot / _diffs / images/searchbar. Như bạn có thể thấy ở đây, tất cả các hình ảnh tùy chỉnh có nghĩa vụ phải được đặt trong theme /docroot/_diffs/images hoặc các thư mục con của nó. Tất cả những hình ảnh theme có thể được truy cập trong theme của bạn thông qua đường dẫn tương đối hoặc tuyệt đối con đường. Ví dụ, bạn có thể sử dụng tương đối sau đây trong custom.css:

background: url(../images/navigation/bullet_selected.png) no-repeat 5px 50%;

Bạn cũng có thể sử dụng đường dẫn sau đây tuyệt đối trong các mẫu Velocity của bạn như portal_normal.vm:

Trường hợp {theme-folder-name} được thay thế bằng tên thư mục theme như vậy của bạn như palm-tree-publications-theme.

Thêm mẫu vận tốc của riêng bạn trong /docroot/_diffs/templates

Bạn có thể muốn tạo ra một thư mục con mẫu theo theme / docroot / _diffs / và thêm các tập tin tốc độ mẫu tùy chỉnh như init_custom.vm, navigation.vm, portal_normal.vm,

portal_pop_up.vm, và portlet.vm. Một chiến lược tốt là để chỉ những tập tin với tên tương tự trong thư mục /docroot/templates như một điểm bắt đầu.

Xin lưu ý rằng bạn có thể sử dụng các tập tin JSP trong các tập tin mẫu dưới này / docroot / _diffs /templates. Bạn có thể sử dụng JSP trong các tập tin mẫu để đạt được linh hoạt hơn hoặc nếu bạn không biết rõ về velocity. Tuy nhiên, bạn sẽ không có quyền truy cập đến các biến velocity nếu JSP tập tin đang được sử dụng.

Bây giờ chúng ta hãy nhìn vào các mẫu cá nhân và làm thế nào bạn có thể tùy chỉnh nó.

init_cutom.vm

Trong file này, bạn có thể khai báo tất cả các biến được sử dụng trong portal_normal.vm. Ví dụ:

#set ($theme_name = "palm-tree-publications-theme") #set ($the_title = "Palm Tree Publications Theme") #set ($company_name = "Palm Tree Publications Inc.")

#set ($community_name = "Palm Tree Publication Reviewers") #set ($any_custom_name = "This is just a sample custom name")

Xin vui lòng lưu ý rằng bạn có thể thêm bất kỳ kê khai, biến velocity mới như $ Any_custom_name trên init_custom.vm trong tập tin này để sử dụng trong theme. Bạn cũng có thể ghi đè lên các giá trị của bất kỳ biến velocity hiện có như $ COMPANY_NAME trên nếu bạn có cùng tên biến ở đây.

Như đã giải thích trước đó, đây là tập tin cốt lõi để phục vụ như là khung chính cho mẫu. Bất kỳ biến mới hoặc hiện tại được định nghĩa trong file init_custom.vm có thể được gọi là portal_normal.vm này.

Bạn cũng có thể thêm mới hoặc cập nhật hiện có mã HTML, hoặc gọi các định nghĩa CSS trong tập tin này để đạt được thiết kế riêng của bạn. Ví dụ, bạn có thể muốn thay đổi nội dung hiển thị và / hoặc nhìn và cảm thấy trong tiêu đề hoặc khu vực chân trang.

Nếu bạn cần để tùy chỉnh các chân trang, bạn có thể làm như vậy bằng cách thay đổi các mã giữa <footer> và </ footer> yếu tố HTML5 trong file portal_normal.vm. Nếu bạn

cần phải thêm một mẫu Velocity mới, chẳng hạn như :

/docroot/_diffs/templates/any_custom_velocity_file.vm, dòng mã sau đây là bao gồm tập

tin này trong portal_normal.vm:

#parse ("$full_templates_path/any_custom_velocity_file.vm"). navigation.vm

Như đã giải thích trước đó, mẫu chuyển hướng này được gọi là, như thể hiện, portal_normal.vm để hiển thị menu:

#if ($has_navigation)

#parse ("$full_templates_path/navigation.vm") #end

Bạn có thể tùy chỉnh các tập tin navigation.vm nếu bạn muốn thay đổi màn hình hiển thị trình đơn menu.

portlet.vm

Mẫu Velocity quy định cụ thể như thế nào một portlet tiêu chuẩn sẽ được trả lại trên một cổng thông tin trang. Nó được gọi là, như thể hiện tiếp theo, trong portal_normal.vm: $ Theme.wrapPortlet ("portlet.vm", $ content_include) (adsbygoogle = window.adsbygoogle || []).push({});

Chrome có thể được tùy chỉnh bằng cách thêm một số chức năng khác như in ấn và giúp đỡ các biểu tượng hoặc gỡ bỏ một số các biểu tượng hiện có chẳng hạn như giảm thiểu, tối đa hóa, hoặc chặt chẽ trong các tập tin portlet.vm. Xin lưu ý rằng những thay đổi đến tập tin này sẽ được áp dụng cho tất cả các trang bằng cách sử dụng theme này.

Hãy xem xét kỹ hơn ở các dòng mã được đưa ra trước đó, bạn có thể thấy một danh sách của Velocity là theme của bạn trong các tập tin sau đây: ${liferay.portal.src.dir}\util-taglib\src\com\liferay\taglib\util\VelocityTaglib.java

Mỗi phương pháp trong tập tin này có sẵn trong các theme như là một thẻ Velocity thông qua $theme.{method.name} chẳng hạn như:

$ Theme.iconOptions () $ Theme.iconMinimize () $ Theme.iconMaximize () $ Theme.iconClose () $ Theme.iconPortlet () $ Theme.search () portal_pop_up.vm

Nếu bạn cần phải tùy chỉnh giao diện và cảm nhận (look and feel) của Liferay cửa sổ thông báo pop-up, bạn cần phải làm như vậy trong theme / docroot / _diffs / templates / file portal_pop_up.vm.

Xây dựng các theme như tập tin WAR và triển khai

Giờ đây, triển khai theme đã được tạo ra và cập nhật với các tập tin của riêng bạn. Đó là thời gian để xây dựng và triển khai nó trong Liferay Portal.

Như giải thích trong Chương 1, Liferay Portal gói các tập tin trong thư mục _unstyled cho một theme bộ khung cơ bản và các tập tin trong thư mục _styled nhờ phong cách thiết kế cơ bản cho bộ khung theme. Khi bạn tùy chỉnh theme của riêng bạn, bạn lưu các thay đổi của bạn trong theme của / docroot / _diffs. Bây giờ bạn sẽ có được các tập tin trong những điều sau đây ba thư mục:

${PORTAL_ROOT_HOME}/html/themes/_unstyled /css /images ${PORTAL_ROOT_HOME}/html/themes/_styled /css /images /js /templates ${PORTAL_ROOT_HOME}/themes/{your.theme}/docroot/_diffs /css /images /js /templates

Khi một theme mới được xây dựng và triển khai tác vụ ant complie copy tất cả các tập tin của thư mục ${PORTAL_ROOT_HOME}/html/themes/_unstyled/ tới thư mục docroot đầu tiên của theme. Sau đó sao chép tất cả các tập tin từ ${PORTAL_ROOT_HOME}/html/themes/_styled/ tới thư mục docroot tương tự. Sau đó, nó sao chép tất cả các tập tin từ các theme / docroot / _diffs thư mục vào cùng một thư mục docroot. Điều này có nghĩa là bất kỳ CSS hiện tại, hình ảnh, JavaScript, và các tập tin sao chép mẫu trực tiếp từ thư mục _unstyled hoặc _styled sẽ được ghi đè của bạn bằng phiên bản của tập tin từ thư mục con tương ứng trong docroot/_diffs thư mục.

Bây giờ css, hình ảnh, js, và các mẫu thư mục con theo docroot các theme thư mục chứa tất cả các file bị sáp nhập từ Liferay / _unstyled và / _styled thư mục và sau đó từ các tập tin của riêng bạn trong các theme / docroot / thư mục _diffs, theo thứ tự chỉ định. Điều này là làm thế nào Liferay Plugins SDK đảm bảo rằng tùy biến riêng của bạn trong thư mục _diff sẽ luôn luôn có ưu tiên cao nhất để ghi đè lên mặc định Liferay Bức ảnh, và do đó đạt được cái nhìn thiết kế của riêng bạn và cảm thấy.

Như đã giải thích trước đó, kiến triển khai các gói công việc và tiết kiệm theme trong tập tin WAR ${liferay.plugins.sdk.home}/dist, và trong khi chờ đợi, bản sao các WAR tập tin $ {liferay.bundles.home} / triển khai các thư mục cho triển khai. Nếu bạn thích