江湖險惡,我從來都不輕易留下我的姓名。

憑你的智慧,我唬得了你嗎?

Octopress的進階技巧

| Comments

這篇Blog我記錄了一些我在網路上找到的資料, 很多分享, 也滿受用的

我整理在底下, 內容有

  1. 進階的安裝文章分享
  2. 多台電腦上寫作同步
  3. 加上分類雲
  4. 程式碼高亮
  5. imgcap的使用
  6. google analytics

Octopress一些進階的安裝文章分享

  1. Octopress 安裝教學、心得筆記 (Windows)
    • 提到如何分類, 以及分類模組安裝
  2. Octopress 精益修改 (1)
    • 一些進階的應用

Octopress 重新安裝或者在多台電腦上寫作同步

主要是參考這篇 Set up Octopress environment on another computer

簡單描述如下

  1. 先將github上存放blog的repo, clone到本地端的octopress來, 注意clone的branch是source branch

     git clone -b source git@github.com:kennytu/kennytu.github.com.git octopress
    
  2. 接下來進入octopress, 將master branch的文件cloen到_deploy

     cd octopress
     git clone git@github.com:kennytu/kennytu.github.com.git _deploy
    

不用加-b的選項, 預設就會是master

接著執行以下指令, 要在octopress目錄下

    gem install bundler
    bundle install

這樣就可以了

PS: 注意不要使用rake install 默認主題,不然會把自定義的主題恢復到默認狀態

最後, 在octopress目錄下, 執行

cd octopress
git pull origin source  
cd ./_deploy
git pull origin master 

OK, 大功告成

替octopress加上分類列表(分類雲)

參考 octopress-tagcloud

  1. 右下方點選Download zip
  2. 解壓縮到octopress相同目錄下, 覆蓋相同資料夾(不用擔心其他檔案會不見)
  3. 修改_config.yml, 找到 default_asides, 加入 custom/asides/category_list.html 這個項目到List當中, 如下

     default_asides: [custom/asides/category_list.html, ...]
    
  4. 執行rake generate

在文章的分類部分, 有下列幾個分法

單一分類 categories: abc

多重分類: 使用LIST

categories: [aaa, bbb, ccc]

多重分類: 使用 -

categories:
- aaa
- bbb
- ccc

程式碼高亮語法

參考 Sharing Code Snippets

這個功能需要安裝Python

Discover if a number is prime點擊查看
1
2
3
4
5
 class Fixnum
    def prime?
      ('1' * self) !~ /^1?$|^(11+?)\1+$/
    end
  end

語法是 三個``` [language] [title] [url] [link text]

``` ruby Discover if a number is prime http://www.noulakaz.net/weblog/2007/03/18/a-regular-expression-to-check-for-prime-numbers/ 點擊查看
空一列
class Fixnum

  def prime?

    ('1' * self) !~ /^1?$|^(11+?)\1+$/

  end

end
空一列   
```

上面的空一列是新增一行空白列的意思, 若沒有空一列, 有些內嵌的程式碼的語法可能會讓Markdown解釋錯誤, 要記得

連結圖片

參考 Image Captions for Octopress

將相對應的程式碼修改一下, 就可以使用imgcap的語法, 例如

{ % imgcap /images/dog.jpg 看三小朋友 % }

就可以在圖片底下加上說明

若圖檔在本地端, 只要將圖檔放在source底下的images目錄, 然後引用就可以了

效果如下

看三小朋友

google analytics

octopress目錄底下找到_config.yml

開啟_config.yml, 找到底下(大約在97行左右)

# Google Analytics
google_analytics_tracking_id: UA-71198893-1 

其中google_analytics_tracking_id右邊的一組號碼, 是你自己必須要到Google Analytics (分析)去註冊, 然後取得一組序號, 貼在上面

接著, 在octopress\source\_includes目錄下找到google_analytics.html

打開它, 然後你要到你剛剛申請的Google Analytics找到追蹤程式碼

複製追蹤程式碼, 到google_analytics.html中, 完成之後類似這樣

source/_includes/google_analytics.html
1
2
3
4
5
6
7
8
9
10
11

  <script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-你的Analytics識別碼', 'auto');
  ga('send', 'pageview');
</script>

完成之後, 存檔, 然後在rake deploy佈署上去就可以了!

Comments