因本人比較喜歡對一些技術文章進行收藏乞榨，并進行整理。像Pocket成肘、Evernote這些工具都可以進行離線收藏，都是很不錯的工具斧蜕，但我就想把這些喜歡的文章双霍，進行收藏整理至github，并且一鍵提交（順便還可以刷刷Github的活躍度）批销，同時省了自己的時間洒闸，只需要在固定的時間，對這些進行整理即可均芽。
簡單需求
首先丘逸，簡單得說一下自己的需求，根據(jù)每天的閱讀文章通過每天歸類顯示掀宋，并按照每月來生成文章深纲，具體的文章輸出結果顯示如2016.01閱讀文章。
技術搭建
這里主要的技術主要兩個難點：
- 一鍵點擊插件的生成
- 腳本編寫生成對應的markdown
技術實現(xiàn)
- JS來獲取當前文章的標題以及鏈接
這里參照百度首頁鏈接的添加劲妙，通過JS先獲取到document以及l(fā)ocation對象湃鹊，然后通過它倆來拿到當前窗口的鏈接以及標題，然后調(diào)用本地服務的一個請求镣奋，傳遞給本地服務币呵，來進行當前網(wǎng)址的記錄。主要的代碼如下：
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, 以及兩個參數(shù)link和title肛搬，對應咱們生成markdown的內(nèi)容。
這里如何使用呢毕贼？在app/views/welcome/index.html.erb中温赔，將上述的Js代碼放置在一個a標簽中，將代碼作為鏈接href屬性的值鬼癣。啟動rails的服務器陶贼，輸入http://localhost:3000/index 就會顯示這個相對應的url，我們將其拖拽至我們的書簽欄待秃，則就會使用我們的插件工具了拜秧。
- 搭建獲取鏈接的API
這里主要使用Ruby on Rails來搭建一個本地的服務器，畢竟是號稱10分鐘創(chuàng)建一個完整的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方法來實現(xiàn)鏈接標題的添加泣港。代碼如下：
module DataHelper
# 根據(jù)文件獲取添入標題和鏈接之后的最新文本內(nèi)容
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))
# 當前日期為今天暂殖，則在當前天下添加新的一行數(shù)據(jù)
if(Date.parse(date_str) == Date.today)
data.push line
data.push "+ [#{title}](#{link})<br>\n"
changed = true
inserted = true
# 當前日期小于今天，則新建今天的數(shù)據(jù)
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
# 若沒有添加爷速，則表示是個新建的文件央星，直接添加今天的數(shù)據(jù)
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方法中，是通過逐行讀取文件惫东，根據(jù)文件對應的日期標題莉给，獲取到相應的日期，判斷當前日期是否大于獲取的日期廉沮，大于的時候則可直接添加颓遏，等于的時候則可在日期下面的第一行中插入，最后我們獲取的將是一個data的數(shù)組滞时。另外叁幢，使用write_to將data中的數(shù)據(jù)，逐行寫入文件中坪稽。
- Git的自動提交曼玩，這里實現(xiàn)的主要的代碼在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來提交請求篙梢，所以出現(xiàn)沖突的時候顷帖，我們得自己手動解決了。
使用
- 打開項目所在的目錄渤滞，使用** rails s**來啟動服務
- 在瀏覽器中輸入 http://localhost:3000/index 來顯示我們需要的書簽鏈接贬墩，如圖所示；
- 將上圖中的鏈接拖拽至chrome的書簽欄中妄呕，如圖：
- 點擊fav書簽陶舞，就可保存當前的頁面了，并自動提交了绪励。
總結
這樣肿孵，我們一個很簡單的文章記錄加自動提交的功能就完成了论咏。當然還有許多功能可以做一些擴展，例如颁井，可以支持不同的GitHub的倉庫厅贪；做成chrome的插件來方便使用。最后雅宾，放上代碼地址：代碼地址
