一键收藏到GitHub
2016-06-18 19:21
288 查看
转载自https://gold.xitu.io/entry/57295d62c4c971006089707b
一键点击插件的生成
脚本编写生成对应的markdown
这里参照百度首页链接的添加,通过JS先获取到document以及location对象,然后通过它俩来拿到当前窗口的链接以及标题,然后调用本地服务的一个请求,传递给本地服务,来进行当前网址的记录。主要的代码如下:
从上述的代码可以看到,最主要的代码就是通过window对象来打开一个新的窗口,指定窗口就是咱们本地的一个API请求,链接格式为http://localhost:3000/create, 以及两个参数link和title,对应咱们生成markdown的内容。
这里如何使用呢?在app/views/welcome/index.html.erb中,将上述的Js代码放置在一个a标签中,将代码作为链接href属性的值。启动rails的服务器,输入http://localhost:3000/index 就会显示这个相对应的url,我们将其拖拽至我们的书签栏,则就会使用我们的插件工具了。
搭建获取链接的API
这里主要使用Ruby on Rails来搭建一个本地的服务器,毕竟是号称10分钟创建一个完整的Web应用程序的语言。
对应的主要代码目录在app/controllers/article_controller.rb文件中,通过api请求http://localhost:3000/create?link={0}&title&{1} 来获取需要保存的链接,主要代码如下:
上述代码中,主要的逻辑有三处:
判断当天是否为当月的第一天,若是的话,则需要重命名README.md文件为上个月的文件,形如‘2016-01.md'格式的文件。主要的目的是将咱们的文章按每个月份来分类。
通过DataHelper类来添加链接及其对应的标题,可以看到主要通过DataHelper的append_to和write_to方法来实现链接标题的添加。代码如下:
在Datahelper的append_to方法中,是通过逐行读取文件,根据文件对应的日期标题,获取到相应的日期,判断当前日期是否大于获取的日期,大于的时候则可直接添加,等于的时候则可在日期下面的第一行中插入,最后我们获取的将是一个data的数组。另外,使用write_to将data中的数据,逐行写入文件中。
Git的自动提交,这里实现的主要的代码在GitHelper中,其中的代码呈上:
我们知道Git提交是件耗时的操作,所以为了提高API的响应速度,这里通过使用异步来提交Git请求,可以看到使用rebase来提交请求,所以出现冲突的时候,我们得自己手动解决了。
在浏览器中输入 http://localhost:3000/index 来显示我们需要的书签链接,如图所示;
将上图中的链接拖拽至chrome的书签栏中,如图:
点击fav书签,就可保存当前的页面了,并自动提交了。
简单需求
首先,简单得说一下自己的需求,根据每天的阅读文章通过每天归类显示,并按照每月来生成文章,具体的文章输出结果显示如2016.01阅读文章。技术搭建
这里主要的技术主要两个难点:一键点击插件的生成
脚本编写生成对应的markdown
技术实现
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,我们将其拖拽至我们的书签栏,则就会使用我们的插件工具了。
搭建获取链接的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书签,就可保存当前的页面了,并自动提交了。
相关文章推荐
- c++ 面试常见问题
- struts2文件下载
- java curl
- GitHub学习系列之-向GitHub 提交代码
- java环境变量配置方法
- PHP小常识分享
- 怎么使用github
- 2440按键中断编程
- lua 读取lua文件
- 【eclipse】相关插件
- JAVA字符串格式化-String.format()的使用
- JAVA中的format
- jvm性能分析工具之-- Eclipse Memory Analyzer tool(MAT)
- Java魔法堂:String.format详解
- PHP小常识分享
- python的变量作用域
- 深入理解Java:注解(Annotation)--注解处理器
- 深入理解Java:注解(Annotation)自定义注解入门
- 深入理解Java:注解(Annotation)基本概念
- Java注解教程及自定义注解