前言

大约一个月前,微博的图片外链失效了,以及掘金因为盗链问题也于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:OBkoro1、邮箱:obkoro1@foxmail.com

以上2019.06.04

博客图片失效?使用npm工具一次下载/替换所有失效的外链图片的更多相关文章

  1. Atitit qzone qq空间博客自动点赞与评论工具的设计与实现

    Atitit qzone qq空间博客自动点赞与评论工具的设计与实现 Qzone发送评论的原理 首先,有个a标签, <a class="c_tx3" href="j ...

  2. 如何获取Flickr图片链接地址作为外链图片

    Flickr,雅虎旗下图片分享网站.为一家提供免费及付费数位照片储存.分享方案之线上服务,也提供网络社群服务的平台.其重要特点就是基于社会网络的人际关系的拓展与内容的组织.这个网站的功能之强大,已超出 ...

  3. 用nginx做反向代理来访问防外链图片

    用nginx做反向代理来访问防外链图片 女儿的博客从新浪搬到wordpress后,发现原来博客上链接的新浪相册的图片都不能访问了,一年的博客内容,一个个去重新上传图片,修正链接也是个大工程.还是得先想 ...

  4. 微信小程序-显示外链图片 bug

    微信小程序-显示外链图片 bug 显示外链图片 bug 403 bug 禁止外链,未授权 https://httpstatuses.com/403 image component 图片.支持 JPG. ...

  5. Hexo next博客的pjax一个Bug引发的关于pjax用法的小技巧-----pjax后图片点击放大的js失效

    文章目录 广告: 背景 发现 解决 get技能 广告: 本人博客地址:https://mmmmmm.me 源码:https://github.com/dataiyangu/dataiyangu.git ...

  6. 如何高效的编写与同步博客 (.NET Core 小工具实现)

    一.前言 写博客,可以带给我们很多好处,比如可以让我们结识更多志同道合的人:在写博客过程中去查技术资料或者实践可以让我们对知识的掌握和理解更加深刻:通过博客分享能帮助他人收获分享的快乐等等.写博客真的 ...

  7. 国内博客(blog)搬家工具(服务)大全

    如今网络上的博客搬家 服务,博客搬家工具 越来越多,博客联盟 大概收集了下,希望对那些想搬家的博客有所帮助. 一.和讯博客的“搬家公司”提供博客搬家 服务 搬家服务地址:点这里 目标对象:新浪博客 . ...

  8. Typora常用编辑方法-一个能将写博客变作享受的工具

    1,标题 ctrl+数字(1~5) 2,序号 数字序号 数字 + . +空格,之后回车换行会自动产生数字序号 非数字序号 有三种 实心圆 ,非实心圆与实心方框 都是 +空格 ,之后按tab键向内缩进, ...

  9. 一步步开发自己的博客 .NET版(9、从model first替换成code first 问题记录)

    为什么要改用code first 用过code first的基本上都不会再想用回model first或是db first(谁用谁知道).不要问我为什么不一开始就直接使用code first,因为那个 ...

随机推荐

  1. 使用Python控制1602液晶屏实时显示时间(附PyCharm远程调试)

    前言 原创文章,转载引用务必注明链接.水平有限,如有疏漏,欢迎指正. 本文介绍一下UP板的GPIO资源使用,以及一个使用Python演示一个简单的demo. 本文使用Markdown写成,为获得更好的 ...

  2. 随着ScrollView的滑动,渐渐的运行动画View

    今天是实现了一个小功能的东西.看看效果图: 实现方式: 1.自己定义ScrollView   复写onScrollChange方法,来计算滑动的位置. 2.自己定义接口,通过接口来在ScrollVie ...

  3. fruitstrap 安装.app文件

    1. 下载ipa的ios文件然后解压成.app的文件 2. 进入fruitstrap文件夹,copy .app文件到fruitstrap文件夹中 执行./fruitstrap -b umetrip.a ...

  4. Sharepoint2013 列表的NewForm 页面加入一个 保存新建 button

    昨天一同事问我怎样在sharepoint2013的NewForm.aspx页面上加入一个 save and new的button.实现save 和new的功能.save的功能和默认的save按钮效果一 ...

  5. VC编码规范(转)

    1    项目风格   1.1    项目取名     在VC之中,项目名为最后可执行文件名,所以项目名最好以最终的可执行文件名一致. 1.2    项目目录设置     为保证VC项目的备份方便.快 ...

  6. Qt5官方demo解析集13——Qt Quick Particles Examples - Image Particles

    本系列全部文章能够在这里查看http://blog.csdn.net/cloud_castle/article/category/2123873 接上文 Qt5官方demo解析集12--Qt Quic ...

  7. TCP客户服务端

    创建TCP服务端1.创建一个ServerSocket对象.2.调用accept()方法接收客户端请求.3.从Socket中获取I/O流.4.对I/O流进行读写操作,完成与客户端的交互.5.关闭I/O流 ...

  8. xalion三层与Web开发帖子一览表 good

    使用http.sys,让delphi 的多层服务飞起来(Delphi借用http.sys充当http服务器,也就可以发送返回JSON等信息,当然浏览器也可以使用)http://www.cnblogs. ...

  9. (深入理解计算机系统) bss段,data段、text段、堆(heap)和栈(stack)

    bss段: bss段(bss segment)通常是指用来存放程序中未初始化的全局变量的一块内存区域. bss是英文Block Started by Symbol的简称. bss段属于静态内存分配. ...

  10. js与原生的交互

    一.与安卓的交互 Android与js通过WebView互相调用方法,实际上是: Android去调用JS的代码 JS去调用Android的代码 二者沟通的桥梁是WebView 对于android调用 ...