摘要:因本人比較喜歡對一些技術文章進行收藏,并進行整理。搭建獲取鏈接的這里主要使用來搭建一個本地的服務器,畢竟是號稱分鐘創建一個完整的應用程序的語言。主要的目的是將咱們的文章按每個月份來分類。另外,使用將中的數據,逐行寫入文件中。
因本人比較喜歡對一些技術文章進行收藏,并進行整理。像Pocket、Evernote這些工具都可以進行離線收藏,都是很不錯的工具,但我就想把這些喜歡的文章,進行收藏整理至github,并且一鍵提交(順便還可以刷刷Github的活躍度),同時省了自己的時間,只需要在固定的時間,對這些進行整理即可。
簡單需求首先,簡單得說一下自己的需求,根據每天的閱讀文章通過每天歸類顯示,并按照每月來生成文章,具體的文章輸出結果顯示如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})
" changed = true inserted = true # 當前日期小于今天,則新建今天的數據 elsif(Date.parse(date_str) < Date.today) data.push "### #{Date.today}
" data.push "+ [#{title}](#{link})
" data.push " " inserted = true end end end if !changed data.push line end changed = false end # 若沒有添加,則表示是個新建的文件,直接添加今天的數據 if(!inserted) data.push "### #{Date.today}
" data.push "+ [#{title}](#{link})
" data.push " " 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的插件來方便使用。最后,放上代碼地址:代碼地址
版權歸作者所有,轉載請注明 原文鏈接
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/79348.html
摘要:初始化項目測試服務已經準備前提已經準備好了注意一鍵部署都可以使用在根目錄新建文件夾類容如下類容如下文件類容如下正在發布到生產測試服務器這個路徑是你需要上傳到服務器的文件夾路徑發布失敗成功發布到生產測試服務器文件類容如下讀取環境變量文件判斷打 初始化vue項目, 測試服務已經準備(前提已經準備好了) 注意: 一鍵部署 vue2.0~3.0 都可以使用 1、在根目錄 新建deploy 文件...
閱讀 2323·2021-10-08 10:04
閱讀 1097·2021-09-03 10:40
閱讀 1150·2019-08-30 15:53
閱讀 3309·2019-08-30 13:13
閱讀 2925·2019-08-30 12:55
閱讀 2278·2019-08-29 13:21
閱讀 1330·2019-08-26 12:12
閱讀 2755·2019-08-26 10:37