Gem Deface

Deface là một thư viện cho phép bạn chèn hoặc ghi đè vào các file HTML( erb, haml, slim) trong ứng dụng Rails của mình mà không cần phải sửa đổi trực tiếp trên file đó.

Cách sử dụng

Có 2 cách để sử dụng Deface: - Sử dụng Deface::Override : sử dụng lớp Deface::Override để chèn hoặc ghi đè những nơi bạn muốn. - Sử dụng Deface DSL( .deface files) : Cho phép bạn ghi đè file đã định nghĩa. Bạn có thể sử dụng cả 2 cách trên cũng với nhau và có thể định nghĩa lại các orverride trước đó bằng cách sử dụng cách còn lại.

Sử dụng Deface::Override

Bạn nên lưu các tùy chỉnh của mình trong folderapp/overrides, thông thường, một tùy chỉnh sẽ được định nghĩa trong 1 file sử dụng tên file giống với tham số name Một thực thể mới của lớp Deface::Override được thành lập cho mỗi tùy chỉnh mà bạn muốn định nghĩa. Khi thành lập tùy chỉnh mới, bạn phải cung cấp các tham số: target, action, source và một số tùy chọn khác.

• Target: :virtual_path - template/partial/layout nơi mà bạn muốn chèn hoặc ghi đè. VD: "shared/errors_mesages", nó sẽ áp dụng cho tất cả các action của controller gọi đến template khai báo này.
• Action :remove - Loại bỏ tất cả các phần tử phù hợp với selector đã cung cấp. :replace - Thay thế tất cả các phần tử phù hợp với selector đã cung cấp. :replace_contents - Thay thế nội dung của tất cả các phần tử phù hợp với selector đã cung cấp. :insert_after - Chèn vào sau tất cả các phần tử phù hợp với selector đã cung cấp. :insert_before - Chèn vào trước tất cả các phần tử phù hợp với selector đã cung cấp. :insert_top - Chèn làm phần tử con đầu tiên của tất cả các phần tử phù hợp với selector đã cung cấp. :insert_bottom - Chèn làm phần tử con cuối cùng của tất cả các phần tử phù hợp với selector đã cung cấp. :set_attributes - Thêm thuộc tính cho tất cả các phần tử phù hợp với selector đã cung cấp, thay thế giá trị của những thuộc tính đã tồn tại bằng giá trị mới. :add_to_attributes - Thêm giá trị cho thuộc tính của tất cả các phần tử phù hợp với selector đã cung cấp, thêm mới nếu thuộc tính chưa có. :remove_from_attributes - Xóa giá trị của một thuộc tính của tất cả các phần tử phù hợp với selector đã cung cấp.
• Source :text - Thêm sâu bao gồm nội dung muốn chèn hoặc ghi đè. :partial - Liên kết tới một partial nào đó. :template - liên kết tới template. :cut - Di chuyển một phần tử hoặc một loạt các phần tử từ template hiện tại sử dụng selector css. Có 2 cách di chuyển: - selector - di chuyển một phần tử đã chọn( sử dụng selector css), phần tử đầu tiên đươc sử dụng nếu - {:start => 'selector_a', :end => 'selector_b'} - chọn các phần tử trong khoảng từ :start tới :end (:start và :end là các selector css). Phần tử cuối cùng phải cùng cấp với phần tử đầu tiên. :copy - Sao chép một phần tử hoặc một loạt các phần tử từ template hiện tại sử dụng selecter css. Có 2 cách sao chép:
  • selector - Sao chép một phần tử được chọn(xác định nhờ selector css), phần tử đầu tiên tìm được sẽ được sử dụng.
  • {:start => 'selector_a', :end => 'selector_b'} - sao chép các phần tử nằm trong khoảng từ :start đến :end. Phần tử cuối cùng phải cùng cấp với phần tử đầu tiên.
• Tùy chọn :name - Tên cho các tùy chỉnh là duy nhất, vì vậy nó có thể được xác định và sửa đổi sau đó. Tên phải là duy nhất trong cùng một :virtual_path đã khai báo. :disabled - Nếu disabled set là true thì tùy chỉnh sẽ không được áp dụng. :original - Hoặc là một string bao gồm các đánh dấu ban đầu sẽ bị ghi đè hoặc là một string là hàm băm của các đánh dấu ban đầu. Nếu được cung cấp, Deface sẽ ghi lại log khi đánh dấu ban đầu thay đổi, giúp làm nổi bật các ghi đè cần chú ý khi nâng cấp các phiên bản ứng dụng nguồi. Tùy chọn này chỉ áp dụng cho action :replaace. Tất cả khoảng trắng sẽ bị xóa trước khi so sánh. Để tạo một hàm băm SHA1, sử dụng: Digest::SHA1.hexdigest(original_markup_string.gsub(/s/, ')) :closing_selector - Phần tử kết thúc thứ 2, cho phép bạn lựa chọn một loạt các phần tử để áp dụng một hành động. Tùy chọn này chỉ áp dụng cho action :replace và :replace_contents. :sequence - Sử dụng để đặt ứng dụng của một veride cho một khai báo virtual path, nó hữu ích khi một override phụ thuộc vào một veride khác đã được áp dụng trước. :sequence => n - trong đó, n là số nguyên, số nhỏ hơn được áp dụng trước, mặc định là 100. :sequence => {:before => "override_name"} -trong đó, override_name là tên của một override đã định nghĩa trong cùng một virtual_path, override hiện tại sẽ được áp dụng trước override đã đặt trước đó. :sequence => {:after => "override_name"} - override hiện tại sẽ được áp dụng sau override đã đặt trước đó. :attributes - Một hash chứa tất cả các thuộc tính muốn thêm cho các phần tử tìm thấy. Vd: :attributes => {:class => "green", :title => "some string"}
• Ví dụ: Xóa phần tử có idsearch-bar trong file _nave_bar.html.erb

Deface::Override.new(:virtual_path  => "spree/shared/_nav_bar",
                 :remove  => "#search-bar",
                 :name => "search_removal")

Thêm partial và đầu phần tử có thuộc tính[data-hook='admin_product_form_right'] trong file spree/admin/products/_form.html.erb

 Deface::Override.new(:virtual_path => "spree/admin/products/_form",
                    :insert_top   => "[data-hook='admin_product_form_right']",
                    :partial      => "spree/admin/products/group_buy_form",
                     :name         => "add_group_buy_to_admin_product_edit")

Thêm thuộc tính class và title cho tất cả các tag a có id link trong index.html.erb

Deface::Override.new(:virtual_path => 'posts/index',
                 :name => 'add_attrs_to_a_link',
                 :set_attributes => 'a#link',
                 :attributes => {:class => 'pretty', :title => 'This is a link'})

Sử dụng Deface DSL (.deface files)

Thay vì sử dụng các định nghĩa Deface::Override, bạn có thể thay thế file bằng cách thêm fiel .deface vào foldeer app/overrides và Deface sẽ tự động tìm kiếm và thực thi các file này. Đường dẫn của mỗi file ghi đè phải giống với đường dẫn của các template bạn muốn sửa đổi. Ví dụ bạn có template: spree/admin/products/edit.html.erb bạn cos thể ghi đè file này bằng cách thêm 1 file .deface vào folder overrides: app/overrides/spree/admin/products/edit/return_to_bulk_product_edit.html.haml.deface Định dạng của file .deface bắt đầu bằng một comment thông báo hành động được thực hiện. Ví dụ:

  /  replace "code[erb-loud]:contains('button_link_to t(:back_to_products_list)')"

= button_link_to t(:back_to_products_list), bulk_edit_admin_products_path, :icon => 'icon-arrow-left'

Bạn có thể sử dụng tất cả các tùy chọn thông thường như khi sử dụng Deface::Override trong comment trên. Nếu file ghi đề của bạn không yêu cầu một đánh dấu nào, ví dụ như các hành động :remove, :set_attributes, :remove_from_attributes, :add_to_attributes bạn có thể định nghĩa một file .deface thay vì .html.erb.deface hay html.haml.deface:

// file: app/overrides/spree/admin/products/edit/add_angular.deface 
add_to_attributes 'fieldset.no-border-top'
attributes 'ng-app' => 'admin.products'

Trên đây là những gì mình đã tìm hiểu và sử dụng trong ứng dụng của mình, mong nhận được sự góp ý của mọi người. Link tham khảo: https://github.com/spree/deface