博客圖片失效？使用npm包20行代碼一次下載/替換全部失效的外鏈圖片

前言

大約一個月前，微博的圖片外鏈失效了，以及掘金由於盜鏈問題也於2019/06/06決定開啓防盜鏈，形成的影響是：我的博客網站的引用了這些圖片外鏈都不能顯示。

目前微博和掘金的屏蔽，在CSDN和segmentfault都是能夠正常顯示的，隻影響我的博客。

好比前段時間個人博客:http://obkoro1.com上引用的微博圖片都不能顯示了。

由於我寫博客比較頻繁，被屏蔽的圖片不在少數，確定不能一個個手動的替換，查了一番沒有找到現成的解決方案，作了個腳本工具，而且寫了文檔把它開源出來了。

markdown-img-down-site-change(下載/替換markdown中的圖片)

搜索目標文件夾中的markdown文件，找到目標圖片，提供下載圖片，替換圖片連接的功能-一般用於markdown 圖片失效。

簡介

這是一個極爲輕量的腳本，引用包，設置好參數，經過API便可輕鬆上手。

解決什麼問題？

1. 集中下載markdown文件中某個域名下的圖片到一個文件夾下。
2. 用新的圖片連接替換markdown文件中某個域名的圖片連接。

// 1. 下載這兩個圖片
// ![](https://user-gold-cdn.xitu.io/2019/5/20/圖片名字?w=2024&h=1240&f=png&s=339262)
// ![](https://user-gold-cdn.xitu.io/2018/6/16/圖片名字)
// 2. 替換成：github的連接
![](https://raw.githubusercontent.com/OBKoro1/articleImg_src/master/juejin/圖片名字?w=2024&h=1240&f=png&s=339262)
![](https://raw.githubusercontent.com/OBKoro1/articleImg_src/master/juejin/圖片名字)

安裝:

npm i markdown-img-down-site-change -S

文檔：

Github

API

更新日誌

數據安全：

剛上手可能不瞭解腳本的功能，須要調試一番，這時候萬一把markdown文件給改壞了，豈不是要哭死？

腳本有兩種形式來防止這種狀況發生：

1. 腳本會默認備份你的文件。
2. 默認開啓測試模式，等到調試的差很少了，能夠關閉測試模式。
3. 建議：再不放心的話，能夠先用一兩個文件來測試一下腳本

使用：20行代碼不到

在項目中有一個使用栗子，裏面加了蠻多註釋和空行的，實際代碼20行都不到，能夠說很簡單了，以下：

// npm i markdown-img-down-site-change -S 
const markdownImageDown = require('markdown-img-down-site-change'); // 文件模塊

// 傳參： 這也是腳本的默認參數，根據狀況能夠自行修改
let option = {
    replace_image_url: 'https://user-gold-cdn.xitu.io/',
    read_markdown_src: './source', // 要查找markdown文件的文件夾地址
    down_img_src: './juejin', // 下載圖片到這個文件夾
    var_number: 3 // url前半部分的變量數量 好比上面的日期: /2019/5/20/、/2018/6/16/
}

// 初始化
const markdownImage = new markdownImageDown(option)

// 下載外鏈
markdownImage.checkDownImg();

// 上傳下載下來的圖片文件夾到雲端 用戶本身操做

// 上傳圖片以後 
// 腳本會把之前的外鏈替換成雲端地址+拼接一個圖片名
markdownImage.updateOption({
    new_image_url: 'https://xxx.com/目錄地址/', // 圖片上傳的地址
    add_end: '?raw=true' // github圖片地址有後綴 直接進去是倉庫
})

// 替換外鏈 
// 把replace_image_url的字符串換成new_image_url字符串
markdownImage.replaceMarkdown();

運行：

仔細閱讀文本，配置好參數以後

在項目根節點新建一個handleImg.js文件，安裝一下腳本，而後用node運行該文件：

npm i markdown-img-down-site-change -S
node handleImg.js

功能/參數簡介：

• checkDownImg()： 下載查找到的圖片
• replaceMarkdown(): 替換圖片連接爲新的圖片連接
• replace_image_url：要替換的圖片地址
• new_image_url：圖片的新地址
• test: 測試模式。
• var_number: 匹配圖片連接的圖片名以前的url，值爲變量數量
• is_link: 匹配連接。
• write_file_time: 間隔多久修改markdown圖片連接
• read_markdown_src：要查找markdown文件的文件夾地址
• down_img_src：下載圖片到這個地址下
• copy_item_data: 備份項目
• filter_item: 過濾某些文件夾，不查找markdown。
• add_end：在圖片連接後面添加後綴添加後綴

---

歡迎試用

有須要的小夥伴，趕忙來試試吧！文檔寫的很全，上手很是輕鬆，項目將會持續維護，有什麼問題，歡迎給我提issue~

若是以爲這個腳本還不錯的話，就給項目點個Star吧！

博客、前端積累文檔、公衆號、wx:OBkoro一、郵箱：obkoro1@foxmail.com

以上2019.06.04