因本人比较喜欢对一些技术文章进行收藏，并进行整理。像Pocket、Evernote这些工具都可以进行离线收藏，都是很不错的工具，但我就想把这些喜欢的文章，进行收藏整理至github，并且一键提交（顺便还可以刷刷Github的活跃度），同时省了自己的时间，只需要在固定的时间，对这些进行整理即可。
简单需求
首先，简单得说一下自己的需求，根据每天的阅读文章通过每天归类显示，并按照每月来生成文章，具体的文章输出结果显示如2016.01阅读文章。
技术搭建
这里主要的技术主要两个难点：
一键点击插件的生成
脚本编写生成对应的markdown
技术实现
- JS来获取当前文章的标题以及链接
这里参照百度首页链接的添加，通过JS先获取到document以及location对象，然后通过它俩来拿到当前窗口的链接以及标题，然后调用本地服务的一个请求，传递给本地服务，来进行当前网址的记录。主要的代码如下：
1
2
3
4
5
6
7
8
9
| 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，我们将其拖拽至我们的书签栏，则就会使用我们的插件工具了。
2. 搭建获取链接的API
这里主要使用Ruby on Rails来搭建一个本地的服务器，毕竟是号称10分钟创建一个完整的Web应用程序的语言。
对应的主要代码目录在app/controllers/article_controller.rb文件中，通过api请求http://localhost:3000/create?link={0}&title&{1} 来获取需要保存的链接，主要代码如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| 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方法来实现链接标题的添加。代码如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
| 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中，其中的代码呈上：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| 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来提交请求，所以出现冲突的时候，我们得自己手动解决了。
使用
- 将上图中的链接拖拽至chrome的书签栏中，如图：
- 点击fav书签，就可保存当前的页面了，并自动提交了。
总结
这样，我们一个很简单的文章记录加自动提交的功能就完成了。当然还有许多功能可以做一些扩展，例如，可以支持不同的GitHub的仓库；做成chrome的插件来方便使用。最后，放上代码地址：代码地址
