全网通用的markdown文章图床实现与图片盗链解决方案!

HTML+CSS实现图片悬停/方向转换 原理: 当鼠标移动至有效区域内,所有图片向右转向,鼠标悬停的图片不进行翻转,此图片后的所有图片,向左转向。 层叠样式属性: position:指定元素在文档中的定位方式 取值 属性 static 默认值,没有定位。 absolute 绝对定位。 relative 相对于正常位置,进行定位。 fixed 绝对定位,相对于浏览器窗口。 inherit 从父元素继承position的值。 disp... 阅读详情
博客图床与盗链

上周主要的时间,都用在搭建个人博客上。个人一直是在简书平台上使用markdown发文,在这次的博客文章迁移中,遇到了很多坑,其中最为麻烦的就是文章的图床盗链问题。

现在绝大多数的网站都做了反盗链的防护,导致从简书导出的文章,图片链接全部失效,使我基本处在崩溃边缘。几百张的历史博客图文,难道要一点点搬迁吗?答案当然是否定的,最终通过爬虫的方式解决了600张图片的迁移,并完成博客的正常发布与展示。喜欢的朋友可以去我的博客逛逛。

我的个人博客: https://qingfengpython.cn

还不了解如何搭建个人博客的朋友,可以看看我上一篇文章:

5分钟教你免费搭建个人博客,并部署上线:https://mp.weixin.qq.com/s/JmzV8eIc_llIizmthlL9gg

今天,就为大家介绍一下,全网通用的markdown文章,图床搭建、迁移方案与代码实现!

markdown插入图片

随着越来越多的人开始使用markdown写作,在对markdown的语法简洁高效而欢喜的同时,却对markdown的图片展示而发愁。如何在markdown中插入图片,相信已经成为很多人的苦恼所在。来看看这篇文章的阅读量就知道了,只是几百字的文章,发文两年阅读量45万。

image-20201227231002749

那么今天,就教大家如何彻底解决markdown图床问题,并且针对已经在其他平台发布过的markdown文章,给出通用的反盗链图片迁移方式。

markdown图片语法

在markdown中,针对图片的语法格式为:

![图片链接文字](图片路径)
![image-20201227231002749](https://gitee.com/BreezePython/blogimages/raw/master/images/image-20201227231002749.png)
![清风Python](https://gitee.com/BreezePython/blogimages/raw/master/images/31d6706e483911eb9a5a002b67682234.png)

其中图片链接的url,可以是url的链接方式,也可以是保存在本地的目录方式。那么,不管是针对本地的图片还是之前在其他网站,使用网站床图上传的历史图片,我们都可以通过今天的文章来实现自己的床图搭建!

个人床图实现方案

网上那些床图工具七牛云等等,始终不是自己,今天就来教大家完成个人床图的搭建。

首先,我们需要创建一个git仓库,github、或者码云都可以。(推荐后者,访问速度快....)

上次在给大家介绍博客搭建时,模拟创建了一个BlogTest的仓库,其实本人自用的是Blog仓库以及搭配的blogimages仓库。

image-20201227233311106

申请好仓库后,我们在仓库下创建一个images文件夹,上传一张图片,然后开始分析仓库的url,码云和github基本类似:

image-20201227235214348

大家可以看到,仓库下存储的图片url,和图片展示的url,存在一定的切换逻辑。码云上只是将tree改为了raw,github变更的稍微多一些,但都有迹可循。

那么,我们的图床就可以通过往仓库上传图片的方式来实现了!

本地图床实现

本人日常编写markdown,都是使用Typora工具,这里就不多介绍了截个图吧,简单几个字来形容:用过都说好!

image-20201227235534205

那么,关于本地markdown图传实现方式,我就介绍通过Typora的操作来实现。

  1. 我们通过Typora的文件 ==> 偏好设置==>图像,设置插入图片时,复制到制定路径,然后将路径定位到咱们clone到本地的床图仓库images文件夹内。此时我们本地编写markdown时,已经可以通过粘贴的方式自动将图片拷贝至床图仓库地址了。Typora生成的图片路径为:

    ![image-20201227235713536](https://upload-images.jianshu.io/upload_images/5847426-23be11f7680121c8.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

image-20201227235713536
  1. 当文章写完后,我们将markdown进行全文替换:

    比如,初始链接:
    https://gitee.com/BreezePython/blogimages/raw/master/images/image-20201227235713536.png
    我们将:https://gitee.com/BreezePython/blogimages/raw/master/images/
    替换为仓库的图片展示地址:
    https://gitee.com/BreezePython/blogimages/raw/master/images/
  2. 然后使用 git add 、 git commit 、git push 三连击,将仓库下本次通过Typora添加的图片上传至仓库,即可完成博客床图的生成与展示,是不是很方便呢?

历史图片爬虫迁移

笔者在简书,存在200多篇的历史博文,所有文章共计涉及到将近600张图片的迁移,如果手动操作,我需要:

  1. 逐篇文章打开,检索图片链接字段
  2. 拷贝图片的链接信息
  3. 粘贴至浏览器
  4. 下载该图片,并设置图片uuid名称。
  5. 保存至床图仓库
  6. 修改历史文章内部的图片url链接
  7. 最终完成文章保存于图片上传仓库操作

如果这么手动操作,给我一个月都弄不完,估计最终电脑都可能比我气得摔了。所以手动操作自然是行不通的,那么如果通过代码来实现呢?只要50行,连编码,带迁移,半个小时的时间足够了。来说说具体实现吧....

其实代码只是把上面的手工操作,使用文件读写、正则匹配、爬虫下载的方式实现而已,其中比较绕的就是正则了,有一句话这么说:

当一件事情遇到了正则,那么它就变成了两件事...

正则遇到的坑

首先,通过正则判断哪些是图片,这个还算比较简单:

re.compile('!\[.*\]\(https://.*(png|jpg|gif)')

比对markdown的格式,叹号开头、中括号包含图片说明、小括号涵盖url链接。ok吗?看着没问题,然后第一次迁移发现只有200多张图片....错在哪里?

image-20201228001606744

很多时候我们的图片,尤其是通过Typora来编写的markdown,在图片前面都会添加一段空白,导致最终匹配错误...所以我们需要在正则的开头,添加 \s* 用来匹配一个或者多个空白字符。

解决了这个问题,我又遇到了新的情况:

![文章被锁定](https://upload-images.jianshu.io/upload_images/5847426-00e191420386f54c.gif?imageMogr2/auto-orient/strip)

简书的url链接是上面这样的,我在下载后,需要进一步的匹配判断问号等情况的匹配。

根据url使用requests进行图片下载,这里由于是床图,网站是不会添加cookie等限制的,直接无脑下载即可。

图片下载好后,我们需要使用uuid库,为我们的图片创建唯一识别码。当然你也可以向Typora那样使用毫秒级别的时间戳,看个人爱好。

最终代码如下:

# -*- coding: utf-8 -*-
# @Author   : 王翔
# @微信号   : King_Uranus
# @公众号    : 清风Python
# @GitHub   : https://github.com/BreezePython
# @Date     : 2020/12/28 23:53:52
# @Software : PyCharm
# @version  :Python 3.7.3
# @File     : download_images.py
import os
import re
import uuid
import requests


class DownloadImages:
    def __init__(self, file_path, git_image_path, expects):
        self.file_path = file_path
        self.remote_path = git_image_path
        self.expect_dict = expects

    def read_file(self):
        for root, dirs, files in os.walk(self.file_path):
            if os.path.split(root)[-1] in self.expect_dict.get('dirs'):
                continue
            for file in files:
                if file in self.expect_dict.get('files'):
                    continue
                self.analysis_url(os.path.join(root, file))

    def analysis_url(self, file):
        file_info_list = list()
        with open(file, 'r', encoding='utf-8') as f:
            data = f.readlines()
        for line in data:
            markdown_pattern = re.compile('\s*!\[.*\]\(https://.*(png|jpg|gif)')
            if markdown_pattern.match(line):
                url_pattern = re.compile('https://.*(png|jpg|gif)')
                url = url_pattern.search(line)[0]
                git_url = self.download(url)
                file_info_list.append(re.sub('https://.*(png|jpg|gif).*', git_url+')', line))
            else:
                file_info_list.append(line)
        with open(file, 'w', encoding='utf-8') as f:
            f.writelines(file_info_list)

    def download(self, url):
        print(url)
        image_type = url.split('.')[-1]
        image_name = '%s.%s' % (uuid.uuid1().hex, image_type)
        image_path = os.path.join(self.remote_path, image_name)
        response = requests.get(url)
        img = response.content
        with open(image_path, 'wb') as f:
            f.write(img)
        return 'https://gitee.com/BreezePython/blogimages/raw/master/images/%s' % image_name


if __name__ == '__main__':
    markdown_path = r'D:\blog\markdown'
    remote_path = r'D:\blogimages\images'
    expect_dict = {"dirs": ['.git', '.idea', 'static'],
                   "files": ["README.md", "_sidebar.md"]}
    main = DownloadImages(markdown_path, remote_path, expect_dict)
    main.read_file()

最终,572张历史markdown图片迁移成功

image-20201228002613832

最后的最后,把本地仓库下的图片一股脑上传到码云、github上即可。

上面的代码适配了例外路径和文件,针对码云仓库拿来即用,只需要简单修改下你的本次仓库、目录和url前缀即可!

个人博客的重要性

之前的文章已经强调过了,坚持写博客不论是对知识积累巩固与面试加分上都占有举足轻重的地位,个人博客的免费搭建、历史博文的迁移、日常markdown博客的床图,这些都帮大家捋顺了,你还有什么理由不开始坚持学习与总结呢?

今天的文章就到这里,码字不易,觉得有收获还望点赞支持。好东西要用来分享,欢迎转发文章给你身边同样需要它的朋友。

HTML中,使用hover属性完成鼠标悬停切换图片效果 HTML中经常需要完成这样的一个效果:鼠标悬停切换图片:效果如下: 阅读详情

相关推荐

实现鼠标悬停图片切换的动态交互

本文还有配套的精品资源,点击获取 简介:在网页开发和用户界面设计中,“鼠标移动,图片自动切换”是一种增强用户体验的交互效果。通过使用HTML构建图片展示结构、CSS设置图片隐藏样式,以及JavaScript监听鼠标 mousemove 事件并处理图片切换逻辑,可以实现这一交互功能。本文将详细介绍这一效果的实现原理和代码示例,包括鼠标位置计算、图片显示状态更新等...

weixin_42518874的博客 1782

html页面中鼠标悬停更换图片

<img src="images/mybook.png" onmouseover="this.src='images/mybook2.png'" onmouseout="this.src='images/mybook.png'"/> onmouseover鼠标悬浮在图片上使用这个图片 onmouseout当鼠标离开该图片使用这个图片

kaszxc的博客 1万+

基于C# winform实现图片上传功能的方法

本文所述实例实现将一张图片上传到指定的文件夹,然后在窗体上的PictrueBox控件中显示出来。 具体功能代码如下: private void btnUpload_Click(object sender, EventArgs e) { //创建一个对话框对象 OpenFileDialog ofd = new OpenFileDialog(); //为对话框设置标题 ofd.Title = "请选择上传的图片"; //设置筛选的图片格式 ofd.Filter = "图片格式|*.jpg"; //设置是否允许多选 ofd.Multiselect = false;

当鼠标光标放在一张图片上,如何显示另一张图片?

我们会遇到一种情境,这种情境是当正常打开一个页面,有文字配有图片,可是当鼠标的光标移动到这张图片上时,会显示另一张图片。2.我们目的是想要第一张照片正常显示在页面,想要第二张照片在鼠标移动到第一张照片上显示出来。这个代码的意思就是当鼠标光标移动到这个div上时,不让第一张照片显示。以下,是我关于这个效果写的代码,大家可以复制到编辑器运行一下,加深印象。这个代码的意思就是当鼠标光标移动到这个div上时,让第二张照片显示。意思就是不将鼠标光标移动到第一张照片上时,不让第二张照片显示。5.对第二张照片设置。

杜永康的博客 7865

因时机器人-灵巧手配置方案(Ubuntu18.04)

因时机器人-灵巧手配置方案(Ubuntu18.04)

CH_monsy的博客 3848

PyTorch实战:5步搞定Res2Net图像分类模型(附完整代码)

本文详细介绍了如何使用PyTorch在5步内构建高性能Res2Net图像分类模型,包括环境配置、核心模块实现、完整网络架构搭建、训练流程优化及模型部署技巧。Res2Net通过多尺度特征融合机制显著提升图像分类性能,附完整代码帮助开发者快速实践。

java5的博客 1023

html鼠标移到按钮上显示图片的方式

【代码】html鼠标移到按钮上显示图片的2种方式。

1002710030 3457

第4章 部署负载均衡 Keepalived + HAProxy

本章在所有 Master 节点部署 Keepalived + HAProxy,为 kube-apiserver 提供高可用入口。Keepalived 实现 VIP(192.168.3.59)漂移,HAProxy 轮询转发请求至三个 Master 的 6443 端口(监听 6444 避免冲突)。健康检查脚本连续 5 次失败则停止 Keepalived,触发 VIP 自动切换。本章还包含配置详解、日常运维和问题排查。

幸福街--linux技术分享 120

HTML 网页中 自定义图像单击或鼠标悬停时放大

HTML 网页中 自定义图像单击或鼠标悬停时放大

hello:code I am captain 1万+

ABB机器人刷功能选项全一篇就够——不怕丢失程序和IO配置数据

ABB机器人刷功能选项

m0_66701835的博客 1260

V90伺服 EPOS模式下回原(详细配置+SCL源代码)

/ 输出上限 100.0%rSetPoint : Real;// 设置目标值工程量。// 通道转换参考值。Td : Real;

RXXW_Dor的博客 2665

在html中三个图片切换,轻松搞定网页中的图片切换

生活中经常看到,像新浪等很多门户网站的首页都有滚动图片的展示,如下图所示:某网站首页滚动切换图片这样不但可以减少文字的单一、乏味,而且可以直观内容,更好的吸引用户。那在我们做软件系统时,是否也可以首页中加入滚动图片呢?答案是肯定的。今天就给大家介绍三种类似的展现方式。实现方式这些滚动展现方式,主要用到了我们平常学习到的网页HTML、样式CSS和JavaScript等知识。在具体实现时,需要结合实际...

weixin_34646820的博客 1万+

AI人工智能代理工作流 AI Agent WorkFlow:在股票市场预测中的应用

AI人工智能代理工作流 AI Agent WorkFlow:在股票市场预测中的应用 作者:禅与计算机程序设计艺术 / Zen and the Art of Computer Programming 关键词: AI Agent, W

AI天才研究院 859

鼠标悬停时,图片切换的方法

在我们写前端页面时,经常会遇到这种情况,就是鼠标悬停某个图标或者图片时,图片颜色发生了变化或者图片发生改变。 这种情况如何实现? 1、直接在html样式里进行切换 <div class="container"> <img src="../img/icon-social-ip-white.png" onmouseover="this.src='../img/icon-social-ip-blue.png'" onmouseout="this

hanrabbit的博客 1万+

【经验&技巧】IBIS AMI模型眼图仿真问题探讨

在ADS的仿真环境中,不论发送和接收的AMI模型是否为true或者false,都可以将通道仿真设置为统计模式,但是,如果有一方的Init函数为false,在统计模式下,处于false状态的模型将不能执行其自带的后处理功能,如下图所示,左边的统计模式和右边的逐比特模式眼图存在明显的差异,原因在于,接收端的init函数为false导致在统计模式中不能对眼图进行DFE处理,换言之,此时统计模式下的眼图就是未经任何处理的“生图”。

一只豌豆象的博客 1767

FPGA原型验证(七):如何选择、搭建原型验证平台?

本篇概要::讨论了在项目初期选择目标FPGA平台的重要性,包括自制板卡与购买现成板卡之间的决策。主要是为那些希望建立基于FPGA的原型平台的工程师和设计师提供了深入的技术细节和决策指导,无论是选择自制还是购买现成的解决方案。

叫好与叫座虽然不是对立面,但想在同一个作品中达到双重效果很难。 943

HTML实现鼠标悬浮、移走图片更改效果的几种方法

1,通过更改图片坐标,对图片添加阴影实现更改图片的颜色 原图片效果展示:2,通过jQuery中的鼠标悬浮和移除时间更改图片效果 效果图:

weixin_43642752的博客 6791

最新的sdio 4.0 spec 协议标准 带书签 高清完整PDF版

Part-E1-SDIO-Specification-Ver4.00-Final-120220.pdf:最新的sdio 4.0 spec 协议标准 带书签 高清完整PDF版,包括SDIO 接口的外设,SDIO 接口官方协议等。

鼠标移动切换图片操作

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;script type="text/javascript"&gt;     functio

wdbk_xiaotu的博客 1837

win10 跳过U8环境检测的IE WebControls.rar

win10 安装u8的时候 提示IE WebControls 不通过,这个工具可以欺骗u8的检查。 跳过U8环境检测的IE WebControls。提示导入失败后,重新检测通过。

OV9734 DATASHEET,完整规格书

OV9734完整规格书,包括电气参数,尺寸规格,寄存器配置表等

鼠标经过切换图片

鼠标经过切换图片 使用onMouseOver和onMouseOut,(不区分大小写,但一定要写对.) html代码: <img alt="" src="图1.jpg" onMouseOver="this.src='图2.png'" onMouseOut="this.src='图1.jpg'"/> 效果就是,在鼠标没有经过时,这个所在的位置,显示图1,当鼠标滑上来时候,显示图2,当鼠标离开时,恢复显示图1. 请注意, ①onmouseover和onmouseout并不区分大小写,但必须写对,且字母

m0_47505062的博客 921

廖雪峰Python教程[完整版]

廖雪峰的python教程整理的,已经排好版了,而且还是完整的,适合小白

html css样式实现鼠标悬浮到a标签可以选择图片

a href="#02" 可以填写具体的需要跳转的路径 a href="#"则表示当前页面当前位置 a href="index.html"跳转到具体的html文件。这里使用的是用表格限制其文件框架区域,用无序列表和a链接设置锚点,a标签引用class link-with-image"确认。当我们想要在链接中添加图片时,可以使用以上提供的CSS样式。",并将其上下左右边距设为0,这将使图片与链接的边缘保持一定距离。接下来,我们将链接图像的。然后,我们设置一个相对定位的样式类名为",这将使图像与链接的。

qq_61549190的博客 1768

html+js实现鼠标移入和移出的图片切换

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...

lr_wlr_w的博客 4503

HTML图片变(鼠标移上去变另一张)

onmouseover="this.src='img/b2.png '"  onmouseout="this.src='img/Cutter_2017-11-28 06_59_20.011.png'">

遗声落西秦 1万+

鼠标放上去图片切换效果

鼠标放上去图片切换效果 需要在页面中添加以下JS代码:   function changeImg(obImg,sNewURL)   {        if(sNewURL!="") obImg.src=sNewURL;   }   将需要切换图片的标签代码按照以下示例编写,将以下代码的"图片地址"更换为自己所要切换的图片就可以了。 是不是很简单?

CDSN大帝的专栏 955

鼠标移动区域,图片局部放大、点击左右按钮可以进行图片切换、鼠标悬停到图片上面,下面小图和主图自动切换

1、鼠标移动区域,图片局部放大 2、点击左右按钮可以进行图片切换 3、鼠标悬停到图片上面,下面小图和主图自动切换

qq_920189602的博客 1381
上一篇: 5分钟教你免费搭建个人博客,并部署上线!
下一篇: 2020个人总结 VS 2021目标与展望
清风Python
博客等级 码龄7年 406粉丝 267原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值