Semo系列文章之二：網文收錄小工具 semo-plugin-read

時間 2020-07-20

標籤 semo 系列文章之二收錄工具 plugin read 简体版

原文原文鏈接

前言

上一篇準備了兩年的 Semo，今天正式跟你們見面中，已經首次跟你們介紹了 Semo，相信你們看完以後應該仍是一頭霧水，不知道 Semo 究竟是個什麼東東，爲何要用，有學 Semo 的時間，本身不是也能夠擼出一個命令行工具麼？因此，本篇仍是不打算講 Semo 的原理，仍是再講講應用吧，今天給你們講講另外一個用 Semo 寫的插件：semo-plugin-read。html

背景

相信不少小夥伴對掘金都是大大點讚的，裏面有各類大神，大牛寫的長文教程，極大的下降了新手入門的門檻，面對一篇又一篇長文，你是否有收藏的衝動呢（好比收藏到有道雲筆記）？雖然網上有各類文摘工具，可是仍是想要 Markdown 版本，不像語雀，掘金貌似拿不到原文 Markdown，因此，這就是今天介紹的插件的開發初衷，固然實際開發之後就有點收不住了，:)git

思路

整個開發過程，做者一點衝擊核心問題的想法都沒有，就是想整合，找最好的工具，解決個人問題。因此，首先要找一個能分析出網頁主體 HTML 的包，而後再找一個 HTML 轉 Markdown 的包，最後，再把 Markdown 轉成想要的格式。github

固然提及來簡單，可是，每一步都是個坎，今天不具體講遇到的坑，就跟你們說說這東西怎麼用，若是感興趣能夠去看看倉庫代碼：semo-plugin-read-mono，之後有時間能夠拆解一下。web

安裝

必需要安裝 Semo 命令行工具 @semo/cli 和 semo-plugin-read 這個插件：npm

npm i -g @semo/cli semo-plugin-read
複製代碼

可選的，咱們能夠安裝一些 read 的插件，這裏能看出插件分兩種，一種是格式相關的，一種是數據源相關的，後面假設這些插件都安裝過了。瀏覽器

semo-plugin-read-extend-domain-jianshu
semo-plugin-read-extend-domain-juejin
semo-plugin-read-extend-domain-mp
semo-plugin-read-extend-domain-zhihu
semo-plugin-read-extend-format-editor
semo-plugin-read-extend-format-epub
semo-plugin-read-extend-format-mobi
semo-plugin-read-extend-format-puppeteer
semo-plugin-read-extend-format-wechat
複製代碼

幫助信息

因爲還在頻繁的開發，因此具體選項可能將來還會有變化。bash

$ semo read help

semo read [url]

Parse and read a url or a md file with your favorate format.

Options:
  --format, -F             Output format, use --available-formats to see all supported formats, default: markdown.
                                                                                                    [默認值: "markdown"]
  --clipboard, -C          Input from clipboard
  --proxy, -P              Proxy images to prevent anti-hotlinking.
  --port                   Web server port.                                                               [默認值: 3000]
  --domain                 Set source input from which domain, without protocol and www.
  --title                  Prepend title, use no-title to disable.
  --footer                 Append footer, use no-footer to disable.                                       [默認值: true]
  --toc                    Include TOC
  --rename, -R             New name, with extension.
  --output, -O             Location for output.
  --available-formats, -A  List all supported formats
複製代碼

再看看咱們有哪些格式可使用

$ semo read --available-formats

Supported formats: --format=[FORMAT]

  格式      :  說明                                                           :  別名      
  markdown  :  Markdown 格式                                                  :  md        
  debug     :  查看識別到的中間 HTML 結果                                     :            
  console   :  終端直接輸出                                                   :            
  clipboard :  輸出到剪切板                                                   :            
  editor    :  Markdown 的編輯器 基於國產的 Vditor                            :            
  epub      :  EPUB 格式，基於 Pandoc                                         :            
  mobi      :  MOBI 格式，基於 Calibre 的 ebook-convert                       :            
  pdf       :  PDF 格式，基於 puppeteer                                       :            
  png       :  PNG 格式，基於 puppeteer                                       :            
  jpeg      :  JPEG 格式，基於 puppeteer                                      :  jpg       
  html      :  Markdown 轉 HTML 格式，基於 puppeteer                          :            
  wechat    :  基於 Markdown 的微信公衆號文章編輯器，基於國產的 Markdown Nice :
複製代碼

看到 markdown, html 這些還好理解，哪些什麼 wechat 究竟是什麼鬼？這個，後面會給你們展現。微信

把網文存成 Markdown 文件，我要存檔

如今有什麼靜態博客工具，咱們不只能夠用來作博客，也能夠用來作資料庫，裏面的每篇文章能夠都是大牛的文章（固然這種就不建議你實際部署到網上了，本身看能夠），用這個插件能夠幫你搞定。markdown

我這裏隨便找了一篇掘金的文章，你們也能夠試試別的：dom

semo read https://juejin.im/post/5ee6c7ae6fb9a047e374ac47 --format=markdown
複製代碼

這裏的 --format=markdown 因爲是默認值，也能夠不寫，這樣執行之後，順利的話，你就能在當前目錄找到以文章 title 命令的 Markdown 文檔了。

若是不想存放到當前目錄，能夠用 --output 指定位置，若是不想每次都指定一遍，你就能夠用 Semo 的全局配置來設置了，好比個人配置是：

semo-plugin-read:
  output: /Users/semo/Downloads/webclips
複製代碼

也能夠用命令行作到這一點：

semo config set semo-plugin-read.output /Users/semo/Downloads/webclips -g
複製代碼

其餘選項也能夠這麼搞，只要是你不常常改的選項，並且即便這裏設置了，只要命令執行時傳的參數仍是優先的。

不存到本地文件，只存到剪切板吧

若是你不是用靜態博客工具或者 Github 參數來收集資料，你可能也用不到存儲的 Markdown 文件，若是用有道雲筆記來存 Markdown 也是很香的，我們能夠這樣傳參：

semo read https://juejin.im/post/5ee6c7ae6fb9a047e374ac47 --format=clipboard
複製代碼

若是你們以爲每次輸入命令時還得輸入地址，太麻煩，那麼不填也能夠，可是須要把地址放到剪切板

semo read --clipboard --format-clipboard
複製代碼

這樣就是一個從剪切板取地址，處理後再存到剪切板的效果了，另外，這裏輸入的剪切板不只能夠是 URL，弄一段 HTML 也是能夠的。

我仍是更喜歡 PDF 怎麼辦

那必須得安排，這裏爲了保證生成 PDF 的效果，沒有采用瀏覽器內的得打印保存 PDF 的方案，而是用 Puppeteer 的特性，先渲染再導出的，跟其餘方案相比，PDF 的分頁通常不會有切割內容斷字的狀況。

semo read https://juejin.im/post/5ee6c7ae6fb9a047e374ac47 --format=pdf
複製代碼

同時，這裏也支持生成 png, jpeg 和 html 文檔。

我還想再改改再存

說實話，自動解析的效果不是百分之百有效的，因此最好仍是校對和修改一下，若是你手頭沒有趁手的 'Markdown' 編輯器（雖然這種狀況幾乎不存在），這裏能夠給你提供一個

semo read https://juejin.im/post/5ee6c7ae6fb9a047e374ac47 --format=editor --proxy
複製代碼

因爲掘金的同窗開啓了防盜鏈，本地起的 Web 服務在預覽時顯示不出來圖像，加了 --proxy 就能夠了把那些圖片都代理一下，就能顯示出來了。

我想發微信公衆號文章，美化一下

安排，必須安排。其實掘金有至關的小夥伴都已經用 mdnice.com 的編輯器了，這裏給你們一個離線版，用法和上面的 editor 相似。

semo read https://juejin.im/post/5ee6c7ae6fb9a047e374ac47 --format=wechat --proxy
複製代碼

這裏有點兒沒弄好，首次打開會白屏，再刷新一下就行了。

這個編輯器仍是很不錯的，若是就是想隨手謝謝 Markdown，也能夠不傳 URL

semo read --format=wechat
複製代碼

若是嫌每次輸入 --format=wechat 太麻煩，能夠把這個寫到全局配置:

semo config set format wechat -g
複製代碼

這樣之後，直接 semo read 就開啓了一個 Mardown 編輯器，是否是很爽呀？

我比較喜歡用蘋果的 `Books` 軟件讀 `epub` 格式的電子書

這裏是基於 pandoc 從 Markdown 生成的，若是沒安裝能夠裝一下先。

brew install pandoc
semo read https://juejin.im/post/5ee6c7ae6fb9a047e374ac47 --format=editor --epub --toc
複製代碼

我比較喜歡 Kindle 來讀 mobi 格式的電子書

這裏是基於 Calibre 的 ebook-convert 生成的，須要先安裝 Calibre

semo read https://juejin.im/post/5ee6c7ae6fb9a047e374ac47 --format=editor --mobi
複製代碼

這裏有的 BUG，ebook-convert 不支持解析遠程圖片，這個很不方便，因此推薦你們先轉換成 epub 格式，而後再把 epub 轉成 mobi

ebook-convert a.epub b.mobi
複製代碼

比較少用的格式 `debug` 和 `console`

這兩種都是把解析結果輸出到命令行，用處不是很大，就不細說了。

關於適用範圍和限制

除了掘金，也能夠試試別的網頁，好比 csdn, 博客園 或者一些大牛的私人博客等等，不支持的主要是那些Ajax 渲染的文章，好比 infoq。另外，能識別的也不必定識別的很完美，須要經過 read 的 domain 插件作解析的預處理和後處理，都是一些正則替換，這部分還有不少工做要作，後面會重點把你們經常使用的幾個網站的解析規則弄好，也須要你們的支持和幫助。