一鍵收藏至Github

因本人比較喜歡對一些技術文章進行收藏，並進行整理。像Pocket、Evernote這些工具均可以進行離線收藏，都是很不錯的工具，但我就想把這些喜歡的文章，進行收藏整理至github，而且一鍵提交（順便還能夠刷刷Github的活躍度），同時省了本身的時間，只須要在固定的時間，對這些進行整理便可。

簡單需求

首先，簡單得說一下本身的需求，根據天天的閱讀文章經過天天歸類顯示，並按照每個月來生成文章，具體的文章輸出結果顯示如2016.01閱讀文章。

技術搭建

這裏主要的技術主要兩個難點：

• 一鍵點擊插件的生成

• 腳本編寫生成對應的markdown

技術實現

1. JS來獲取當前文章的標題以及連接
   這裏參照百度首頁連接的添加，經過JS先獲取到document以及location對象，而後經過它倆來拿到當前窗口的連接以及標題，而後調用本地服務的一個請求，傳遞給本地服務，來進行當前網址的記錄。主要的代碼以下：

javascript: ((function(s, d, e) {
    var u = location;
    var f = 'http://localhost:3000/create?link=' + e(u.href) + '&title=' + e(d.title) + '&_t=' + new Date().getTime();
    function a() {
        if (!window.open(f, '', 'toolbar=0,status=0,resizable=1,width=700,height=450,left=' + (s.width - 700) / 2 + ',top=' + (s.height - 650) / 2)) u.href = f
    };
    if (/Firefox/.test(navigator.userAgent)) setTimeout(a, 0);
    else a()
})(screen, document, encodeURIComponent));

從上述的代碼能夠看到，最主要的代碼就是經過window對象來打開一個新的窗口，指定窗口就是我們本地的一個API請求，連接格式爲http://localhost:3000/create, 以及兩個參數link和title，對應我們生成markdown的內容。

這裏如何使用呢？在app/views/welcome/index.html.erb中，將上述的Js代碼放置在一個a標籤中，將代碼做爲連接href屬性的值。啓動rails的服務器，輸入http://localhost:3000/index 就會顯示這個相對應的url，咱們將其拖拽至咱們的書籤欄，則就會使用咱們的插件工具了。

1. 搭建獲取連接的API
   這裏主要使用Ruby on Rails來搭建一個本地的服務器，畢竟是號稱10分鐘建立一個完整的Web應用程序的語言。

對應的主要代碼目錄在app/controllers/article_controller.rb文件中，經過api請求http://localhost:3000/create?link={0}&title&{1} 來獲取須要保存的連接，主要代碼以下：

class ArticleController < ApplicationController

  def create
    title = params[:title]
    link = params[:link]
    data = []
    file_name = Rails.root.to_s + '/README.md'
    status = 'ok'
    if title.nil? or link.nil?
      status = 'error'
    else
      if(Date.today.mday == 1)
        new_file_name = "#{Rails.root.to_s}/#{Date.today.prev_day.strftime('%Y-%m').to_s}.md"
        File.rename(file_name, new_file_name)
        File.new(file_name, 'w+')
      end
      data = DataHelper.append_to(file_name, title, link)
      if !data.nil?
        DataHelper.write_to(file_name, data)
      end
    end
    GitHelper.commit(title)
    render json: {'status' => status, 'data' => data}
  end
end

上述代碼中，主要的邏輯有三處：

• 判斷當天是否爲當月的第一天，如果的話，則須要重命名README.md文件爲上個月的文件，形如‘2016-01.md'格式的文件。主要的目的是將我們的文章按每月份來分類。

• 經過DataHelper類來添加連接及其對應的標題，能夠看到主要經過DataHelper的append_to和write_to方法來實現連接標題的添加。代碼以下：

module DataHelper

  # 根據文件獲取添入標題和連接以後的最新文本內容
  def self.append_to(file_name, title, link)
    data = []
    changed = false
    inserted = false

    File.open(file_name).each do |line|
      if !inserted and line.start_with?('###') 
        # 當前行爲具體的日期
        date_str = line.slice(3, 3 + 10).squish
        if(is_date(date_str))
          # 當前日期爲今天，則在當前天下添加新的一行數據
          if(Date.parse(date_str) == Date.today)
            data.push line
            data.push "+ [#{title}](#{link})<br>\n"
            changed = true
            inserted = true
          # 當前日期小於今天，則新建今天的數據
          elsif(Date.parse(date_str) < Date.today)
            data.push "### #{Date.today}<br>\n"
            data.push "+ [#{title}](#{link})<br>\n"
            data.push "\r\n"
            inserted = true
          end
        end
      end
      if !changed
        data.push line
      end
      changed = false
    end
    # 若沒有添加，則表示是個新建的文件，直接添加今天的數據
    if(!inserted)
       data.push "### #{Date.today}<br>\n"
       data.push "+ [#{title}](#{link})<br>\n"
       data.push "\r\n"
    end
    data
  end

  # 向文件中寫入data
  def self.write_to(file_name, data)
    file = File.new(file_name, 'w+')
    data.each do |line|
      file.write line
    end
    file.close
  end

  # 判斷字符是否爲一個日期
  def self.is_date(str)
    result = false
    begin
      Date.parse(str)
      result = true
    rescue ArgumentError
      result = false
    end
    result
  end

end

在Datahelper的append_to方法中，是經過逐行讀取文件，根據文件對應的日期標題，獲取到相應的日期，判斷當前日期是否大於獲取的日期，大於的時候則可直接添加，等於的時候則可在日期下面的第一行中插入，最後咱們獲取的將是一個data的數組。另外，使用write_to將data中的數據，逐行寫入文件中。

• Git的自動提交，這裏實現的主要的代碼在GitHelper中，其中的代碼呈上：

module GitHelper

  def self.commit(title)
    t = fork do
      Signal.trap("HUP") {
        system 'git status'
        system 'git add .'
        system "git commit -am 'add #{title}'"
        system 'git pull --rebase'
        system 'git push'
      }
    end
    Process.kill("HUP", t) 
  end
end

咱們知道Git提交是件耗時的操做，因此爲了提升API的響應速度，這裏經過使用異步來提交Git請求，能夠看到使用rebase來提交請求，因此出現衝突的時候，咱們得本身手動解決了。

使用

• 打開項目所在的目錄，使用 rails s來啓動服務

• 在瀏覽器中輸入 http://localhost:3000/index 來顯示咱們須要的書籤連接，如圖所示；

• 將上圖中的連接拖拽至chrome的書籤欄中，如圖：

• 點擊fav書籤，就可保存當前的頁面了，並自動提交了。

總結

這樣，咱們一個很簡單的文章記錄加自動提交的功能就完成了。固然還有許多功能能夠作一些擴展，例如，能夠支持不一樣的GitHub的倉庫；作成chrome的插件來方便使用。最後，放上代碼地址：代碼地址

版權歸做者全部，轉載請註明 原文連接