Link Search Menu Expand Document

12. 拆開前後台的 CSS 和 JS

12-1 需求說明

我們學過如何拆 layout 了:預設的 layout 是 app/views/layouts/application.html.erb,而後台的 controller 我們透過 layout "admin" 可以改用 app/views/layouts/admin.html.erb

但是有個部分我們沒有拆開,那就是 css 和 javascript,到目前還是共享 app/assets/stylesheets/application.scssapp/assets/javascript/application.js

隨著 Plugins 功能越裝越多,有很多 css/js 前後台是不一樣的,例如我們後來裝的 select2nested_form_fields plugins,前臺目前沒有用到,但是因為前後台共享的關系,還是被用戶下載了。

這部分的 css/js 也可以前後台拆開,除了可以讓前臺下載更有效率,也可以讓代碼分開管理。

12-2 實作拆開

新增 app/assets/stylesheets/admin.scss

@import "bootstrap-sprockets";
@import "bootstrap";
@import "select2";
@import "select2-bootstrap";
@import "bootstrap-datepicker3";

新增 app/assets/javascripts/admin.js

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap-sprockets
//= require select2
//= require nested_form_fields
//= require bootstrap-datepicker/core
//= require bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN

修改 config/initializers/assets.rb

- # Rails.application.config.assets.precompile += %w( search.js )
+ Rails.application.config.assets.precompile += %w( admin.css admin.js )

這會告訴 Rails 編譯 assets 時要多編譯這兩個進入點檔案。

重啟 Rails 伺服器

修改 app/views/layouts/admin.html.erb,換成載入 admin css 和 js

-  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
+ <%= stylesheet_link_tag    'admin', media: 'all', 'data-turbolinks-track': 'reload' %>

-  <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
+  <%= javascript_include_tag 'admin', 'data-turbolinks-track': 'reload' %>

瀏覽看看後台,一切應正常。

如果檢視一下 HTML 源碼,可以看到已經順利改用 admin css 和 js 了:

image

既然是前後台拆開了,接著可以瘦身一下前臺的 css 和 js,來把 select2nested_form_fields 移除。

修改 app/assets/stylesheets/application.scss

   @import "bootstrap-sprockets";
   @import "bootstrap";
-  @import "select2";
-  @import "select2-bootstrap";
   @import "bootstrap-datepicker3";

修改 app/assets/javascripts/application.js

   //= require jquery
   //= require jquery_ujs
   //= require turbolinks
   //= require bootstrap-sprockets
-  //= require select2
-  //= require nested_form_fields
   //= require bootstrap-datepicker/core
   //= require bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN
   //= require_tree .

檢查看看前臺功能,應該一切正常。


Copyright © 2010-2021 Wen-Tien Chang All Rights Reserved.