[v] Rails app 接 Disqus 並編輯 Recommended Configuration Variables

Rails 要接 Disqus 很簡單,因為它是透過內嵌一段 JS 碼,而不是直接做在 Rails 上:

以一般常見的 blog 系統為例,有 posts, comments:

  1. 在 Disqus 註冊一個 Disqus 帳號
  2. 從 Disqus 的 Admin Panel 那邊選 Installing
  3. 在 Installation 頁面,選 Universal Code.
  4. 在 app/views/posts 底下新增一個 _disqus.html.erb partial
  5. 把 Disqus 留言板的 universal code 貼到 disqus partial 中,並 render 在你的 app 中想產生留言板的地方。我只有 posts#show 的地方會在該 post 底下有留言版,所以在 posts/show.html.erb 的最下方 render disqus partial.
  6. 刷新網頁就會看到該 post 底下已經出現 disqus 留言板了。

但這樣不夠,Disqus 建議我們編輯 Recommended Configuration Variables 來讓 Disqus 認得出各則留言分別是在哪個網站的哪個頁面底下留的言,將來 Disqus 要傳 comments 過來才不會出錯。

首先,我們看這篇:
https://help.disqus.com/customer/en/portal/articles/2158629

細部設定則看這篇:
https://help.disqus.com/customer/en/portal/articles/472098-javascript-configuration-variables

以下是我的設定

_disqus.html.erb

......

var disqus_config = function () {
    this.page.url = "<%= url_for([@post, {only_path: false}]) %>";
    this.page.identifier = "<%= @post.id %>";
    this.page.title = "<%= @post.title %>";
};

......

[v] 常用 git commands

基本的可以參考這篇

https://confluence.atlassian.com/bitbucketserver/basic-git-commands-776639767.html


我常用的

git init

git add

git commit -m "message"

git commit -am "message"

git push origin master

git push heroku master

git remote add origin <server>

git remote -v

git pull

git clone

git branch

git checkout -b <branchname>

git branch -d

git merge <branchname>

git status

參考資料

https://confluence.atlassian.com/bitbucketserver/basic-git-commands-776639767.html
https://gist.github.com/hofmannsven/6814451
http://zeroturnaround.com/rebellabs/git-commands-and-best-practices-cheat-sheet/

[v] 如何把 bootstrap 內容置中?

Offsetting columns

http://getbootstrap.com/css/#grid-offsetting

Move columns to the right using .col-md-offset-* classes. These classes increase the left margin of a column by * columns. For example, .col-md-offset-4 moves .col-md-4 over four columns.

這是一個 view template 中常見的 Bootstrap Grid System 起手式

<div class="container col-md-8 col-md-offset-2">

使用 Bootstrap Grid 要給一個 container 標籤,所以我們下 class="container"; Grid system 總共 12 columns, col-md-8 佔了 8 columns, col-md-offset-2 則是將 col-md 往右推 2 columns.

所以如果要將內容置中,也就是左右對稱,就用簡單的數學算一下,12 - 8 = 4, 4/2 = 2, 所以加上 col-md-offset-2 就能讓內容置中了。

如果是 col-xs-8, 就要用 col-xs-offset-* 來推,所以也可能有 col-md-6 col-xs-8 col-md-offset-3 col-xs-offset-2 的設定。

http://stackoverflow.com/questions/18153234/center-a-column-using-twitter-bootstrap-3
http://getbootstrap.com/css/#grid-offsetting
https://getbootstrap.com/examples/grid/