妹子ui看起来很不错,以为在rails里面添加自定义的css和js和平时一样,结果可想而知,不过弄完以后发现还是比较简单的,这里记录一下
妹子ui需要加载的css和js如下
http://cdn.amazeui.org/amazeui/2.2.0/css/amazeui.csshttp://cdn.amazeui.org/amazeui/2.2.0/css/amazeui.min.csshttp://cdn.amazeui.org/amazeui/2.2.0/js/amazeui.jshttp://cdn.amazeui.org/amazeui/2.2.0/js/amazeui.min.jshttp://cdn.amazeui.org/amazeui/2.2.0/js/amazeui.legacy.jshttp://cdn.amazeui.org/amazeui/2.2.0/js/amazeui.legacy.min.jshttp://cdn.amazeui.org/amazeui/2.2.0/js/amazeui.widgets.helper.jshttp://cdn.amazeui.org/amazeui/2.2.0/js/amazeui.widgets.helper.min.js
一个css,3个js
rails4里面有个个asset pipeline,大概是用来压缩css,js等等,提升速度的,具体可以看下
rails程序会默认加载三个路径的资源
app/assetslib/assetsvendor/assets
妹子ui是妹子公司出的,就放vendor了
贴一下路径,大概是
└── vendor └── assets ├── amazeUI │ └── assets │ ├── css │ │ ├── admin.css │ │ ├── amazeui.css │ │ ├── amazeui.flat.css │ │ ├── amazeui.flat.min.css │ │ ├── amazeui.min.css │ │ └── app.css │ ├── fonts │ │ ├── FontAwesome.otf │ │ ├── fontawesome-webfont.eot │ │ ├── fontawesome-webfont.svg │ │ ├── fontawesome-webfont.ttf │ │ ├── fontawesome-webfont.woff │ │ └── fontawesome-webfont.woff2 │ ├── i │ │ ├── app-icon72x72@2x.png │ │ ├── examples │ │ │ ├── admin-chrome.png │ │ │ ├── admin-firefox.png │ │ │ ├── admin-ie.png │ │ │ ├── admin-opera.png │ │ │ ├── admin-safari.png │ │ │ ├── adminPage.png │ │ │ ├── blogPage.png │ │ │ ├── landing.png │ │ │ ├── landingPage.png │ │ │ ├── loginPage.png │ │ │ └── sidebarPage.png │ │ ├── favicon.png │ │ └── startup-640x1096.png │ └── js │ ├── amazeui.js │ ├── amazeui.legacy.js │ ├── amazeui.legacy.min.js │ ├── amazeui.min.js │ ├── amazeui.widgets.helper.js │ ├── amazeui.widgets.helper.min.js │ ├── app.js │ ├── handlebars.min.js │ ├── jquery.min.js │ └── polyfill │ ├── rem.min.js │ └── respond.min.js
在页面加载显示,有两种模式,
1,全局加载
在app/assets的application.js里面添加
//= require assets/js/amazeui//= require assets/js/amazeui.legacy//= require assets/js/amazeui.widgets.helper
application.css添加
*= require assets/css/amazeui
在你的view,xxx.erb里面添加全局加载
<%= stylesheet_link_tag "application" %><%= javascript_include_tag "application" %>
然后就可以直接用了
2,根据controller独立加载
在app的js目录添加controller名字,我的是admin.js
//= require assets/js/amazeui//= require assets/js/amazeui.legacy//= require assets/js/amazeui.widgets.helper
css目录添加admin.css
/* *= require assets/css/amazeui */
自己的view,xxx.erb
<%= javascript_include_tag params[:admin] %>