Rails應用開發點滴

時間 2019-12-01

標籤 rails 應用開發點滴简体版

原文原文鏈接

1. Bootstrap安裝javascript

Gemfile加入:

gem 'bootstrap-sass', '~> 3.1.1'

命令行運行 bundle install
app\assets\stylesheets\增長文件 bootstrap_and_overrides.css.scss,內容爲

@import "bootstrap";

app\assets\javascripts\application.js

//= require bootstrap

2. simple_form安裝配置css

Gemfile加入:

gem 'simple_form'

運行集成bootstrap的生成器html

rails generate simple_form:install --bootstrap

3. /config/application.rb中進行配置更改java

在註釋出現的相應位置,加入行node

config.time_zone = 'Beijing'

config.i18n.default_locale = :cn

4. locale關於中文的處理bootstrap

在/config目錄中: 複製en.yml,命名爲cn.yml; 複製simple_form.en.yml, 命名爲simple_form.cn.yml;緩存

並打開這兩個文件進行相應翻譯調整.sass

5. /app/assets/stylesheets/application.css中, 定製action中設置的notice的顯示樣式,加入app

.alert-notice{
    background-color: #dff0d8;
    border-color: #b2dba1;
    color: #3c763d;
}

這樣能夠在/app/views/layouts/application.html.erb中的<%= yield %>之間, 一次性插入ide

      <% flash.each do |key, value| %>
      <p class="alert alert-<%= key %>"><%= value %></p>
      <% end %>

從而規範了全部使用該layout的頁面的顯示方式,而缺省狀況下alert-notice的樣式未被定義,Rails生成的頁面裏都會(不太符合DRY)被加入

<p id="notice"><%= notice %></p>

這樣能夠把頁面裏的這行冗餘代碼刪除了.

6. 注意redirect_to兩種調用方式對notice的影響

經實際測試, 形式爲:

redirect_to ***_path, notice: "****"

的調用, notice消息可以顯示; 而形式爲:

redirect_to action :actionname, notice: "****"

的調用, notice消息不可以顯示;

7. CKEditor安裝配置

gem 'ckeditor'

在app/assets/javascripts/application.js中加入

//= require ckeditor/init

對定義爲text類型的field如:content, 對simple_form生成的代碼進行以下修改:

<%= form.input :content, :as => :ckeditor, :input_html => { :ckeditor => {:toolbar => 'Full'} } %>

其中{:toolbar => 'Full'} 也能夠設爲{:toolbar => 'mini'}, 這樣toolbar更加緊湊

此外, CKEditor是在加載時動態替換textarea, 這與Rails的Turbolinks緩存頁面機制衝突,會致使再次訪問頁面時CKEditor顯示爲textarea, 須要在使用它的頁面進行更改:

<body data-no-turbolink="true">

8. Link_to的bootstrap效果調整, 相似下面的設置, 黑色字體在深藍底色下顯示不夠明顯

<%= link_to '新建字典類型', new_manage_dict_type_path, class: "btn btn-primary btn-sm" %>

在app\assets\stylesheets\增長文件 bootstrap_and_overrides.css.scss中加入如下代碼解決

a.btn-primary{ /*缺省a的字體顏色爲黑色,不適合*/
    color: #fff !important;
}

9. 樹控件dtree的安裝與設置

解壓縮 dtree.zip, 三個部分拷貝到不一樣位置:

img文件夾 -> public

dtree.css -> app\assets\stylesheets

dtree.js -> app\assets\javascripts

在 dtree.css 中的

.dtree a.node:hover, .dtree a.nodeSel:hover {

內加入以下代碼,解決bootstrap使<a>元素在hover時變黑的問題.

background-color: #dff0d8 !important;

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。