基于.NetCore开发博客项目 StarBlog - (17) 自动下载文章里的外部图片
系列文章
- 基于.NetCore开发博客项目 StarBlog - (1) 为什么需要自己写一个博客?
- 基于.NetCore开发博客项目 StarBlog - (2) 环境准备和创建项目
- 基于.NetCore开发博客项目 StarBlog - (3) 模型设计
- 基于.NetCore开发博客项目 StarBlog - (4) markdown博客批量导入
- 基于.NetCore开发博客项目 StarBlog - (5) 开始搭建Web项目
- 基于.NetCore开发博客项目 StarBlog - (6) 页面开发之博客文章列表
- 基于.NetCore开发博客项目 StarBlog - (7) 页面开发之文章详情页面
- 基于.NetCore开发博客项目 StarBlog - (8) 分类层级结构展示
- 基于.NetCore开发博客项目 StarBlog - (9) 图片批量导入
- 基于.NetCore开发博客项目 StarBlog - (10) 图片瀑布流
- 基于.NetCore开发博客项目 StarBlog - (11) 实现访问统计
- 基于.NetCore开发博客项目 StarBlog - (12) Razor页面动态编译
- 基于.NetCore开发博客项目 StarBlog - (13) 加入友情链接功能
- 基于.NetCore开发博客项目 StarBlog - (14) 实现主题切换功能
- 基于.NetCore开发博客项目 StarBlog - (15) 生成随机尺寸图片
- 基于.NetCore开发博客项目 StarBlog - (16) 一些新功能 (监控/统计/配置/初始化)
- 基于.NetCore开发博客项目 StarBlog - (17) 自动下载文章里的外部图片
前言
好久没更新博客了,上个月底更新了一篇关于StarBlog博客开发的文章之后,就因为线下培训、诗词大会之类的杂七杂八的事浪费了很多时间,有段时间一直在忙这些事情都没空写代码……
PS:我在诗词大会上分享了这首诗:读白居易的《禽虫十二章》
然后最近买了杨中科大佬新出的《AspNetCore技术内幕》,看得津津有味,花了一个多星期的时间,把书里的内容大致看了一遍,DDD(领域驱动设计)我早就想学了,不过一直没找到好的入门资料,大佬的这本书就很不错,很好懂,尽管如此,DDD还是一个相对复杂的方法,需要通过不断的实践来掌握。
虽然最近做了这么多事,但同时工作也很忙,有个项目需要在九月前上线,本来我打算来实践一下DDD的,不过写着写着发现还是把握不住,只好先用我之前的DjangoStarter框架,后面再慢慢把我的StarBlog博客用DDD思想进行改造~
对了,这么久没更新博客的原因,还有一点是我在使用过程中对目前的管理后台非常不满(使用Vue2+ElementUI开发),用户体验极差,所以我同时在构思用何种技术对管理后台前端项目进行重构,目前有几个备选项:
- blazor(使用C#开发前端,很酷)
- react(相对其他的来说,我最喜欢的前端技术栈)
- 仍然vue,但重写现有架构(工作量较小)
还没拿定主意,在重构完成之前,只能先捏着鼻子用现有的管理后台,同时大概率也不会在现有的前端项目中增加新功能了。
回到正题
OK,说回本文的内容。在博客的使用过程中,有时候我会从其他网站复制一些markdown片段,或者是从我在其他平台的博客上复制markdown内容(博客园、掘金之类的),这时候复制过来的markdown内容里面可能会有一些图片,如果不做处理,可能会产生某些问题,如因图片防盗链功能导致网络图片在StarBlog博客中无法显示、网站运营商关闭导致图片丢失等,对于数据,还是牢牢掌握在自己的手中比较放心。
于是,我就做了这个功能:将markdown文章中的网络图片下载下来,并且替换markdown中的链接。
原理很简单,扫描markdown,把图片链接拿出来下载,同时把图片链接替换成StarBlog上的地址。下面一步步介绍如何在代码中实现。
下载图片
首先是下载图片的功能,C#中访问网络,可以使用HttpClient这个标准库
最简单的用法是这样:
var client = new HttpClient();
await client.GetAsync("图片地址");
不过官方文档中并不推荐这种用法,最佳实践是一个程序中只维护一个HttpClient的对象
在AspNetCore中,我们可以利用依赖注入IHttpClientFactory
来管理HttpClient对象。
在Program.cs
中注册服务
builder.Services.AddHttpClient();
在需要的地方注入IHttpClientFactory
,比如在本项目中,我们新建一个CommonService.cs
来放下载文件的代码,考虑到这个功能以后别的地方也可能用到,所以做成通用的,不和PostService
耦合在一起。
代码如下:
public class CommonService {
private readonly ILogger<CommonService> _logger;
private readonly IHttpClientFactory _httpClientFactory;
public CommonService(ILogger<CommonService> logger, IHttpClientFactory httpClientFactory) {
_logger = logger;
_httpClientFactory = httpClientFactory;
}
public async Task<string?> DownloadFileAsync(string url, string savePath) {
var httpClient = _httpClientFactory.CreateClient();
try {
var resp = await httpClient.GetAsync(url, HttpCompletionOption.ResponseHeadersRead);
// 生成随机文件名
var fileName = GuidUtils.GuidTo16String() + Path.GetExtension(url);
var filePath = Path.Combine(savePath, WebUtility.UrlEncode(fileName));
await using var fs = new FileStream(filePath, FileMode.OpenOrCreate, FileAccess.Write);
await resp.Content.CopyToAsync(fs);
return fileName;
}
catch (Exception ex) {
_logger.LogError("下载文件出错,信息:{Error}", ex);
return null;
}
}
}
分析一下部分代码:
- 第13行代码使用HttpClient的
GetAsync
方法下载数据,添加了个HttpCompletionOption.ResponseHeadersRead
参数,这样我们不必等全部信息加载到内存中后再进行流读取之类的操作,而是在请求头返回的时候就可以进入下一步处理。避免因为要下载的文件太大而导致OutOfMemoryException
,这对下载文件的程序来说很重要! - 第16行,使用封装好的Guid工具生成16位的GUID,直接用
Guid.NewGuid().ToString()
也行,这是32位的。 - 第18-19行,将Http响应内容写入文件流
搞定,下载文件代码比较简单,涉及到IO操作这种容易出错的地方,细节要处理好,才能保证程序的稳定性。
PS:别忘了注册服务!
builder.Services.AddSingleton<CommonService>();
处理Markdown
下载图片的功能搞定了之后,我们继续来做markdown处理的部分
关于C#处理Markdown,之前已经有过多次探索了,可以说是轻车熟路了hhh~
附上之前关于Markdown处理的文章:
依然是用Markdig这个库(貌似.NetCore处理markdown上也没其他选择)
在PostService.cs
中增加代码
/// <summary>
/// Markdown中外部图片下载
/// <para>如果Markdown中包含外部图片URL,则下载到本地且进行URL替换</para>
/// </summary>
private async Task<string> MdExternalUrlDownloadAsync(Post post) {
if (post.Content == null) return string.Empty;
// 得先初始化目录
InitPostMediaDir(post);
var document = Markdown.Parse(post.Content);
foreach (var node in document.AsEnumerable()) {
if (node is not ParagraphBlock {Inline: { }} paragraphBlock) continue;
foreach (var inline in paragraphBlock.Inline) {
if (inline is not LinkInline {IsImage: true} linkInline) continue;
var imgUrl = linkInline.Url;
// 跳过空链接
if (imgUrl == null) continue;
// 跳过本站地址的图片
if (imgUrl.StartsWith(Host)) continue;
// 下载图片
_logger.LogDebug("文章:{Title},下载图片:{Url}", post.Title, imgUrl);
var savePath = Path.Combine(_environment.WebRootPath, "media", "blog", post.Id!);
var fileName = await _commonService.DownloadFileAsync(imgUrl, savePath);
linkInline.Url = fileName;
}
}
await using var writer = new StringWriter();
var render = new NormalizeRenderer(writer);
render.Render(document);
return writer.ToString();
}
代码说明:
- 第9行的初始化目录就是检查这篇文章有没有对应的目录,没有就先创建,很简单就不贴代码了。可以在github项目里看到完整代码
- 第12行开始的两层循环通过遍历markdown文档树,把图片链接找出来
- 第22行检查图片是站外还是站内的,站内图片不用下载
这样就完成了markdown里站外图片的下载和链接替换~
修改文章保存逻辑
接下来修改一下文章的保存逻辑
还是在这个PostService.cs
里,保存和新增文章共享一个方法:InsertOrUpdateAsync
直接上代码
public async Task<Post> InsertOrUpdateAsync(Post post) {
// 是新文章的话,先保存到数据库
if (await _postRepo.Where(a => a.Id == post.Id).CountAsync() == 0) {
post = await _postRepo.InsertAsync(post);
}
// 检查文章中的外部图片,下载并进行替换
post.Content = await MdExternalUrlDownloadAsync(post);
// 修改文章时,将markdown中的图片地址替换成相对路径再保存
post.Content = MdImageLinkConvert(post, false);
// 处理完内容再更新一次
await _postRepo.UpdateAsync(post);
return post;
}
代码说明:
- 新文章的话,会先保存一次,作为草稿。
- 先下载外部图片,再替换本地图片链接(关于图片链接替换的,可以参考本系列第4篇文章,上面有链接)
- 完成这些之后再保存,注意这时文章还是草稿状态,需要通过另一个方法将文章的
IsPublish
属性设置为true,不过与本文关系不大,这里先不贴代码,后续在RESTFul接口开发部分的文章里会详细介绍这个流程。
到这里就搞定啦~
参考资料
- 官方文档:https://docs.microsoft.com/en-us/dotnet/api/system.net.http.httpclient?view=net-6.0
- c#:HttpClient使用详解:https://blog.csdn.net/u010476739/article/details/119782562
- C#中HttpClient的使用小结:https://zhuanlan.zhihu.com/p/89106847
基于.NetCore开发博客项目 StarBlog - (17) 自动下载文章里的外部图片的更多相关文章
- 基于.NetCore开发博客项目 StarBlog - (18) 实现本地Typora文章打包上传
前言 九月太忙,只更新了三篇文章,本来这个功能是从九月初就开始做的,结果一直拖到现在国庆假期才有时间完善并且写文章~ 之前我更新了几篇关于 Python 的文章,有朋友留言问是不是不更新 .Net 了 ...
- 基于.NetCore开发博客项目 StarBlog - (19) Markdown渲染方案探索
前言 笔者认为,一个博客网站,最核心的是阅读体验. 在开发StarBlog的过程中,最耗时的恰恰也是文章的展示部分功能. 最开始还没研究出来如何很好的使用后端渲染,所以只能先用Editor.md组件做 ...
- 基于.NetCore开发博客项目 StarBlog - (2) 环境准备和创建项目
系列文章 基于.NetCore开发博客项目 StarBlog - (1) 为什么需要自己写一个博客? 基于.NetCore开发博客项目 StarBlog - (2) 环境准备和创建项目 ... 基于. ...
- 基于.NetCore开发博客项目 StarBlog - (3) 模型设计
系列文章 基于.NetCore开发博客项目 StarBlog - (1) 为什么需要自己写一个博客? 基于.NetCore开发博客项目 StarBlog - (2) 环境准备和创建项目 基于.NetC ...
- 基于.NetCore开发博客项目 StarBlog - (4) markdown博客批量导入
系列文章 基于.NetCore开发博客项目 StarBlog - (1) 为什么需要自己写一个博客? 基于.NetCore开发博客项目 StarBlog - (2) 环境准备和创建项目 基于.NetC ...
- 基于.NetCore开发博客项目 StarBlog - (5) 开始搭建Web项目
系列文章 基于.NetCore开发博客项目 StarBlog - (1) 为什么需要自己写一个博客? 基于.NetCore开发博客项目 StarBlog - (2) 环境准备和创建项目 基于.NetC ...
- 基于.NetCore开发博客项目 StarBlog - (6) 页面开发之博客文章列表
系列文章 基于.NetCore开发博客项目 StarBlog - (1) 为什么需要自己写一个博客? 基于.NetCore开发博客项目 StarBlog - (2) 环境准备和创建项目 基于.NetC ...
- 基于.NetCore开发博客项目 StarBlog - (7) 页面开发之文章详情页面
系列文章 基于.NetCore开发博客项目 StarBlog - (1) 为什么需要自己写一个博客? 基于.NetCore开发博客项目 StarBlog - (2) 环境准备和创建项目 基于.NetC ...
- 基于.NetCore开发博客项目 StarBlog - (8) 分类层级结构展示
系列文章 基于.NetCore开发博客项目 StarBlog - (1) 为什么需要自己写一个博客? 基于.NetCore开发博客项目 StarBlog - (2) 环境准备和创建项目 基于.NetC ...
随机推荐
- OI中组合数学公式和定理90%歼灭
组合数学 基础概念 加法和乘法原理 加法原理 同一步下的不同选择,可以通过累加得到方案数. 乘法原理 整个流程的方案数可以由每一步的方案数相乘得到. 有了加法原理和乘法原理,就可以解决一些没有选择导致 ...
- 「文化课 · 校园生活」街舞社演出 & 校园十佳歌手决赛
女孩子跳舞很好看(流鼻血),男孩子跳舞很骚,跳的很有感觉.
- python实现对简单的运算型验证码的识别【不使用OpenCV】
最近在写我们学校的教务系统的手机版,在前端用户执行绑定操作后,服务器将执行登录,但在登录过程中,教务系统中有个运算型的验证码,大致是这个样子的: 下面我们开始实现这个验证码的识别. 1.图片读取 从网 ...
- 001 手把手用Git,Git从入门到上传本地项目到Github,看这篇就够了
安装git 下载Git 下载好后,一路next即可 安装好后,打开Git bash,进行配置 首先配置自己的身份 git config --global user.name "Name&qu ...
- 高性能 Jsonpath 框架,Snack3 3.2.29 发布
Snack3,一个高性能的 JsonPath 框架 借鉴了 Javascript 所有变量由 var 申明,及 Xml dom 一切都是 Node 的设计.其下一切数据都以ONode表示,ONode也 ...
- .Net Core 企业微信更新模版卡片消息
1.搭建回调服务器 可参考:https://www.cnblogs.com/zspwf/p/16381643.html进行搭建 2.编写代码 2.1接口定义 应用可以发送模板卡片消息,发送之后可再通过 ...
- 微信0day复现
由于微信采用的是google内核,前些日子google爆出0day远程代码执行漏洞,但是需要关闭沙箱,而微信采用的是老版本google内核,默认关闭沙箱,因此只要微信用户点击恶意连接,可直接获取该PC ...
- python小题目练习(十二)
题目:如下图所示 代码展示: """Author:mllContent:春节集五福Date:2020-01-17"""import rand ...
- Python自动化办公:27行代码实现将多个Excel表格内容批量汇总合并到一个表格
序言 (https://jq.qq.com/?_wv=1027&k=GmeRhIX0) 老板最近越来越过分了,快下班了发给我几百个表格让我把内容合并到一个表格内去.还好我会Python,分分钟 ...
- NC16783 [NOIP1998]拼数
NC16783 [NOIP1998]拼数 题目 题目描述 设有 \(n\) 个正整数(\(n ≤ 20\)),将它们联接成一排,组成一个最大的多位整数. 例如:\(n=3\) 时,\(3\) 个整数 ...