yuanchunfa (chunfa)

个人用 Rails 边学边做的一个社区的总结

yuanchunfa — Sat, 24 Aug 2013 10:00:30 +0800

过年时期想在家里面做点事，先打算做个网站，于是参考 ruby china 和 rabel 两份源码弄起来。首页是一个接活宣传页，然后一个简易社区功能，不过没有等到同事一起来做，光杆司令也就没做了，又出去打工了，用 Unity3d 做做手游了。这网站也就闲置了，现在突然想到把首页宣传去掉，留下社区功能开源，希望对新手有些帮助。开发中间我在 ruby china 提了不少问题，得了很多人的帮助，我在这里感谢各位。总结经验教训有： 1、不要去追求小众，不成熟的东西，比如 slim，参考 ruby china 一个 ajax 回复效果，用 slim 来一直没搞定，最后觉得是 slim 的解析的硬伤，最后把这个 ajax 改成 erb 了，同时用两种模板引擎让我如鲠在喉。 2、不要到{wrap}bootstrap 买 themes，看起来好看，用起来又是一回事，而且跟 rails asset 整合麻烦。下载后都是些静态演示，很多压缩后的 css，js 文件，不好调试跟踪。是授人以鱼，而不是授人以渔。 3、如果是要一个网站，而不是学习的话，还是直接用 PHP 之类的，部署 PHP 的地方多，PHP 资源也很多。开始想一步到位，导致真正要做的事没去做。后面做一个项目，需要用到简单的后台管理，要部署简单，尝试用用 PHP 发现非常好，step by step 非常易用，你可以写个步骤，让不是专业的人完成。哦哦，这个是多么痛的领悟。 演示地址： http://www.ycusrx.com/ 这个站点部署在 Appfog 上，每次上传更新空间都会删除掉，而且站点是国外，图片什么的速度就非常不理想了。我这个后面用了阿里云的 OSS，这两个暂时都免费的，挺好的部署组合。感谢 @huacnlee、@Victor。 最后奉上 Git 地址： https://github.com/yuanchunfa/ycusrx

PS：为什么最后两处粗体、的 markdown 格式不支持呢？

请问有什么好部署的地方，阿里云 OSS 怎么用起来？

yuanchunfa — Tue, 26 Feb 2013 15:05:39 +0800

参考学习 ruby china，一个还没有太完善的网站赶鸭子上架目前部署在 Appfog，在后台加内容，上传图片，不过网页图片经常打不开，寻思用一个又拍云，或者阿里云 OSS，先尝试用@huacnlee的 carrierwave-aliyun，按使用创建了 config/initializes/carrierwave.rb 及在阿里云 OSS 控制台创建了 bucket，填好 id,key 这些，测试发现还是上传到了服务器本地硬盘上了，请@huacnlee帮忙指正。个人觉得 Appfog 使用蛮简单的，也同时尝试使用 Openshift，把一个 Rails 新建的工程推送上去，确没有看到部署成功。我的网站www.ycusrx.com，感谢 ruby china，在这里学习了很多，得到了很多帮助。

求教服务端 ajax 问题

yuanchunfa — Fri, 08 Feb 2013 23:25:52 +0800

还在边学边写，参考 ruby-china 源码，在回复中用到 ajax，根据日志解决了 create.js.slim 错误，服务端通过样的，不过客户端就是没半点效果，我这边样式反复对比跟 ruby-china 一样的，为什么客户端看不到效果呢，还有就是 alert("test");这样的都不起作用。看了 Rails 3.2 的 Ajax 向导 http://chloerei.com/2012/04/21/rails-3-2-ajax-guide/ 用 firebug 的 XHR 进行跟踪，服务端 OK 了啊。求教

现在还能不能申请到 SAE 的 RAILS 邀请码？

yuanchunfa — Sun, 03 Feb 2013 15:13:26 +0800

看到发送 SAE 的 RAILS 邀请码帖子，那都是 7、8 个月前的事了，现在不知道有没有啊？很想要一个，买个云主机，一是要钱，二是要备案，看着备案的流程不想弄。

js 执行的怪异问题

yuanchunfa — Sat, 26 Jan 2013 12:08:47 +0800

前端用一套现成的 js 和 css，有一个搜索和主菜单下拉菜单效果在 scripts.js 里面，发现在 root_path 时 scripts 不执行，即在http://localhost:3000/scripts确认执行，比如http://localhost:3000/notices时这个scripts能够执行，但是不知道要执行多少次，只能把firebug的断点去掉了。尝试在application.js中使用不执行，其他路径时这个 //= require_tree . 这个 scripts 是执行了，但是一个 UI 组件又冲突了显示不了，所以都加载进去很不行。上代码： application.js

//= require jquery.min
//= require modernizr.custom.87724
//= require bootstrap.min
//= require ddsmoothmenu-min
//= require jquery.dcjqaccordion.2.7.min
//= require jquery.easytabs.min
//= require slide-to-top-accordion-min
//= require jquery.easing-1.3.min
//= require jquery.flexslider-min
//= require responsive-tables
//= require jquery.fitvid
//= require lemmon-slider-min
//= require scripts

scripts.js

$(document).ready(function(){
  $('.search input').hide();
    $('.search #search-trigger').click(function(){
    $('.search input').slideToggle('fast').focus(); 
    $('.search #search-trigger').toggleClass('active');
  });
});

在 AlphaLiu 帮助下，我要的 Affix 效果有了，不过 IE 下又不兼容了，求教！

yuanchunfa — Sat, 19 Jan 2013 13:12:49 +0800

把 docs.css 下好了，然后达到了 bootcss 的效果，不过宽度太宽了，于是自己设置一下宽度，在 Firefox，Chrome 上都达到要求了，但是 IE9 上依然还是默认宽度。搜索加上!important 也没有达到效果，现在用 win7 的多吧，IE9 还是有很多人用吧，WinXP 下的 IE6、7、8 就不去管了，求指导！ IE9 效果： Firefox18 效果：代码：

div class="row"
  div class="span2 bs-docs-sidebar"
    ul class="nav nav-list bs-docs-sidenav affix" style="width:150px!important;"
      li class="active"
        a href="#about"
          i class="icon-chevron-right"
          | 关于我们
      li
        a href="#train"
          i class="icon-chevron-right"
          | 关于培训
  div class="span10"
    section id="about"
      div class="page-header"
        h6 关于我们

折腾半天无果，深夜求教 bootstrap 的 affix 问题

yuanchunfa — Fri, 18 Jan 2013 23:16:58 +0800

google 没有找到 affix 组件更多使用方式，用 firebug 查看 bootcss 代码，写出来了，但是效果不一样，我要的是 bootcss 上 affix 的效果。我这边箭头没有居右，不能把 spin2 长度整个显示出来，比较 html 代码很一致，就是不知道是不是还要 css 上做点什么？上图上代码求教。我的 affix: 我想要的，bootcss 上 affix 的效果

div class="row"
  div class="span2 bs-docs-sidebar"
    ul.nav.nav-list
      li.active
        a href="#"
          i.icon-home.icon-white
          = '首页'
    ul class="nav nav-list bs-docs-sidenav affix"
      li class="active"
        a href="#about"
          i class="icon-chevron-right"
          | 关于我们
      li
        a href="#train"
          i class="icon-chevron-right"
          | 关于培训
  div class="span10"
    section id="about"
      div class="page-header"
        h6 关于我们

初次使用 rails 就遇到的几个坑

yuanchunfa — Wed, 16 Jan 2013 13:47:24 +0800

以前只是关注 Rails，经常看看 ruby-china，在图书馆翻了两本 Rails 的书，其中有一本还是 rails 2.x 的，看了下了解了 Rails 的架构，熟悉了一下流程，知道怎么去看代码，不过还是没有动手写点东西，没有项目驱动。最近想给自己即将盘下的电脑培训工作室写个网站，终于开始动手写了。没有任何前端经验的我还想写个酷炫的网站，注定不会顺利，刚开始就遇到两大大坑，没有能力去解决，只能另选方案绕过了。

一、compass-twitter-bootstrap 在 ruby-china 看到《聊聊主流框架，Less/Sass/Compass/Bootstrap/H5bp》得出总结最好的组合是:SASS+Compass+Bootstrap，于是首先选择这个作为网页布局的框架，花了若干天，居然搞清楚 SASS 及 Compass 的关系与 Bootstrap 的大概使用了。试着写写 layouts 的头部布局，想法是左边 Logo，居右是个登录的 Form，发现不是固定式布局，总是会按窗口比例缩放，查资料也只是说 container 就是固定布局，无解，后面也觉得这个样子不好看，于是换用 Bootstrap 黑又硬的 navbar，在写下拉项时有遇到下拉项显示不出来，群里问来问去无果，突然想到我先写静态 html 来测试，发现这新的 bootstrap 的 navbar 默认已经不是黑色的，这下拉项也没有问题，遂醒悟 compass-twitter-bootstrap Out 了，换用 bootstrap-sass，这几个无解的都解，container 就是固定布局，下拉项也出来了，navbar 默认白色也更有爱了。

二、slim 在 ruby-china 知道了 slim，比起冗余的默认模板 erb 真的喜欢，于是果断用起。没想到也是大坑，先上代码：

这个时候正常，本来 b class="caret"是要缩进去的，作为下拉项的子项，TAB、空格都试过，slim 解析就是出错，于是这下拉箭头不能出现在正确的地方。换回 ERB，没有问题。这个应该是 slim 的 BUG 吧？

这些天大坑就这些，总结经验教训：新手应该找好合适的文章，开源代码，源码跑通，跟着教程来做。一开始就堆积最佳方案，只怕会消化不了。

eamcs vim 双修及寻求帮助

yuanchunfa — Fri, 11 Jan 2013 16:21:36 +0800

在 Ruby China 收集了不少配置，在这里也放出自己的配置及寻求帮助。这几天开始动手写点 Rails，有一个问题还是让我抓狂，就是在编辑 sass、slim 文件自动缩进的问题，我使用了 auto-indent-mode，并设置 tab-width 默认为 2，在 ruby、c++ 缩进方面挺好的，就是 sass、slim 总是不能够正确缩进，手工按 tab 居然不是按 2 个空格来缩进，使用:w 居然把当前选中行缩进了，还有自动补全方面也是很不足。 (setenv "HOME" "D:/Tools/Emacs-24.2") (setenv "PATH" "D:/Tools/Emacs-24.2")

(add-to-list 'load-path "~/.emacs.d/")

;; add extra store (require 'package) (add-to-list 'package-archives '("marmalade" . "http://marmalade-repo.org/packages/") t) (package-initialize)

;; this can auto install missing plugins (when (not package-archive-contents) (package-refresh-contents))

;; add in your own as you wish: (defvar my-package '(starter-kit starter-kit-bindings starter-kit-eshell starter-kit-lisp starter-kit-js starter-kit-ruby auto-complete auto-indent-mode autopair markdown-mode python-mode coffee-mode sass-mode scss-mode slim-mode tabbar tabbar-ruler yasnippet bm smex magit color-theme color-theme-monokai) "A list of packages to ensure are installed at launch.")

(dolist (p my-package) (when (not (package-installed-p p)) (package-install p)))

;; auto-complete (require 'auto-complete-config) (global-auto-complete-mode t) (setq-default ac-sources '(ac-source-words-in-same-mode-buffers)) (add-hook 'emacs-lisp-mode-hook (lambda () (add-to-list 'ac-sources 'ac-source-symbols))) (add-hook 'auto-complete-mode-hook (lambda () (add-to-list 'ac-sources 'ac-source-filename))) (set-face-background 'ac-candidate-face "lightgray") (set-face-underline 'ac-candidate-face "darkgray") (set-face-background 'ac-selection-face "steelblue") (define-key ac-completing-map "\M-n" 'ac-next) (define-key ac-completing-map "\M-p" 'ac-previous) (setq ac-auto-start t) (setq ac-dwim t)

;; yasnippet (require 'yasnippet) (yas-global-mode 1)

;; scss (setq scss-compile-at-save nil)

;; slim ;;(require 'slim-mode)

;; magit (require 'magit)

;; tabbar (require 'tabbar)

;; auto-indent-mode (setq auto-indent-on-visit-file t) (require 'auto-indent-mode) (auto-indent-global-mode)

;; autopair (require 'autopair) ;;(autopair-global-mode)

;; theme (require 'color-theme) (color-theme-monokai)

;; basic settings (fset 'yse-or-no-p 'y-or-n-p)

(setq-default make-backup-files nil) (setq auto-save-default nil) (setq innibit-startup-message t) (setq initial_scratch-message "")

;;(setq-default comment-style 'indent) (setq-default tab-width 2) (setq-default indent-tabs-mode nil)

(global-linum-mode t) (ido-mode t) (auto-image-file-mode t) (delete-selection-mode t)

;;(column-number-mode t) ;;(show-paren-mode t) ;;(menu-bar-mode t) ;;(scroll-bar-mode -1) ;;(tool-bar-mode -1) ;;(blink-cursor-mode -1) ;;(set-fringe-style -1) ;;(tooltip-mode -1)

;; other package ;; vimpulse (add-to-list 'load-path "~/.emacs.d/vimpulse") (require 'vimpulse)

;; vimpulse-plugins (add-to-list 'load-path "~/.emacs.d/vimpulse-plugins") (require 'vimpulse-cjk) (require 'vimpulse-operator-comment) ;;(require 'vimpulse-operator-moccur) (require 'vimpulse-relative-linum) (require 'vimpulse-textobj-between)

;; auto-complete-clang (add-to-list 'load-path "~/.emacs.d/auto-complete-clang") (require 'auto-complete-clang)

(setq ac-clang-auto-save t) (setq ac-auto-start t) (setq ac-quick-help-delay 0.5) (column-number-mode t) ;; (ac-set-trigger-key "TAB") (define-key ac-mode-map [(control tab)] 'auto-complete) (defun my-ac-config () (setq-default ac-sources '(ac-source-abbrev ac-source-dictionary ac-source-words-in-same-mode-buffers)) (add-hook 'emacs-lisp-mode-hook 'ac-emacs-lisp-mode-setup) ;; (add-hook 'c-mode-common-hook 'ac-cc-mode-setup) (add-hook 'ruby-mode-hook 'ac-ruby-mode-setup) (add-hook 'css-mode-hook 'ac-css-mode-setup) (add-hook 'auto-complete-mode-hook 'ac-common-setup) (global-auto-complete-mode t)) (defun my-ac-cc-mode-setup () (setq ac-sources (append '(ac-source-clang ac-source-yasnippet) ac-sources))) (add-hook 'c-mode-common-hook 'my-ac-cc-mode-setup) ;; ac-source-gtags (my-ac-config)

;; ide-skel (require 'ide-skel) (partial-completion-mode) (icomplete-mode)

;; code (setq default-buffer-file-coding-system 'utf-8) (prefer-coding-system 'utf-8)

;; shortcut (global-set-key [(control p)] 'tabbar-backward) (global-set-key [(control n)] 'tabbar-forward)

(global-set-key [f4] 'ide-skel-proj-find-files-by-regexp) (global-set-key [f5] 'ide-skel-proj-grep-files-by-regexp) (global-set-key [f10] 'ide-skel-toggle-left-view-window) (global-set-key [f11] 'ide-skel-toggle-bottom-view-window) (global-set-key [f12] 'ide-skel-toggle-right-view-window)

(global-set-key [C-f1] 'package-list-packages) (global-set-key [C-f3] 'revert-buffer) (global-set-key [C-f4] 'kill-this-buffer) (global-set-key [C-f5] 'shell) (global-set-key [C-f6] 'magit-status)

;; emacs auto save (custom-set-variables ;; custom-set-variables was added by Custom. ;; If you edit it by hand, you could mess it up, so be careful. ;; Your init file should contain only one such instance. ;; If there is more than one, they won't work right. '(auto-indent-next-pair-timer-geo-mean (quote ((default 0.0005 0)))) '(blink-cursor-mode nil) '(column-number-mode t) '(fringe-mode (quote (nil . 0)) nil (fringe)) '(menu-bar-mode t) '(show-paren-mode t) '(tool-bar-mode nil)) (custom-set-faces ;; custom-set-faces was added by Custom. ;; If you edit it by hand, you could mess it up, so be careful. ;; Your init file should contain only one such instance. ;; If there is more than one, they won't work right. '(tabbar-button-highlight ((t (:inherit tabbar-button)))) '(tabbar-default ((t (:inherit variable-pitch :background "gray82" :foreground "gray50" :height 0.8)))) '(tabbar-highlight ((t nil))) '(tabbar-selected ((t (:inherit tabbar-default :background "white" :foreground "blue" :box (:line-width 1 :color "black"))))) '(tabbar-separator ((t (:inherit tabbar-default :height 0.2)))) '(tabbar-unselected ((t (:inherit tabbar-default :background "gray72" :foreground "black" :box (:line-width 1 :color "black"))))))

请问 bootstrap 如何固定宽度？

yuanchunfa — Thu, 10 Jan 2013 22:13:59 +0800

关注 Rails、Ruby China 有一段时间，一直没有动手写东西，知识也是零零碎碎，没有什么 WEB 前端的知识，现在用 bootstrap 来建个网站练练手，一边学习 bootstrap 的过程，想把 container 居中固定住，左右两边空白可以随着浏览器大小变化就好了，中间不用变化，不够中间大小时，显示不了就是了。这个是我想要的效果这时候的缩放就不是我想要的 Google 搜索没有找到解决方法，加上 meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"没有我想固定宽度的效果，不知道要怎么做，还有右边登录的 form 怎么整体下降几个像素，记住我复选框的复选框能不能跟文字居中对齐，就这个 header 就问题这么多了你，需求帮助，感激感激。