fix: 图床迁移整理

Author: iamStephenFang

src/content/blog/Design_Thoughts.md

@@ -23,19 +23,19 @@ description: 学习了一部分 Design + Code 课程，在 Dribbble 发布了一
 
 由于并不是设计出身，我自学了 Design + Code 的设计课程，包括Sketch的使用、字体、动画的应用等等，并且学习了少数派的「比身边人多懂一点设计」课程，后者非常推荐没有设计基础的人仔细阅读。目前能做出一些符合我想发的、并不蹩脚的设计，如 App 的 icon 设计、UI设计等等。
 列举两个我发布在 Dribbble 上的作品，第一个是对 Notion 图标的重新设计。由于 Notion 是一款笔记应用，我能够联想到彩色的便签与装帧精美的册子，那如何体现 Notion 的品牌意义呢？我参考了原版 Notion 的图标，为了使得大写字母显得不那么突兀，我为其加上了阴影。最后参照 Logic Pro X等 App 给予其一个恰到好处的倾角。该图标被 Andreas Storm 等人Rebound，也算是一个不小的成就。
-![](http://image.stephenfang.me/%E6%88%AA%E5%9B%BE2020-07-12%20at%2001.21.51.png)
+![](https://image.stephenfang.me/mweb/notion_redraw.png)
 另一个设计方案就是我的音乐播放器设计，目前编码已经完成了1/2，是我目前完成的第一个“有设计”的App，至少MockUp看起来还不错。其设计理念十分简洁，一个页面只完成一个类别的功能，充分利用 UIKit，目前仍然有不少功能想做，包括接入 Apple Music、从LyricsKit获取歌词等等，无法确定何时上架。
-![](http://image.stephenfang.me/%E6%88%AA%E5%9B%BE2020-07-12%20at%2001.33.30.png)
+![](https://image.stephenfang.me/mweb/muzik_concept.png)
 最后放出我在 Dribbble 的地址： https://dribbble.com/stephenfang
 
 ## 最近的摄影
 
 因为疫情缘故今年并没有出门，连寒假旅行也连带取消了，只能通过 Unsplash 发一些先前的照片，我所理解的低阶摄影（也就是我目前实践的）满足于把画面交代清楚，以不一样的构图拍出比游客照更具有感觉的东西。好的照片应该是能够讲述故事的，这也是街头摄影之所以能打动人的原因，显然我并没有做到，但是我仍在不断尝试让平凡的照片看起来具有不平凡的内容。例如对于物体的拍摄，我希望画面能够传递一定的感情信息，例如以下的猫狗照片，你可能会思考它们此刻在想些什么。
-![](http://image.stephenfang.me/%E6%88%AA%E5%9B%BE2020-07-12%20at%2013.52.32.png)
-![](http://image.stephenfang.me/%E6%88%AA%E5%9B%BE2020-07-12%20at%2013.54.52.png)
+![](https://image.stephenfang.me/mweb/unsplash_cat..png)
+![](https://image.stephenfang.me/mweb/unsplash_dog.png)
 另一个要点就是构图，简单的构图方式可能得到不同的效果。构图方式可以简单复制，而建筑和你的视角则不会。
-![](http://image.stephenfang.me/%E6%88%AA%E5%9B%BE2020-07-12%20at%2013.56.52.png)
-![](http://image.stephenfang.me/%E6%88%AA%E5%9B%BE2020-07-12%20at%2013.59.12.png)
+![](https://image.stephenfang.me/mweb/unsplash_hkbuilding.png)
+![](https://image.stephenfang.me/mweb/unsplash_hzbuilding.png)
 罗伯特·卡帕说过“如果你拍得不够好，是因为你离得不够近”，不做这句话的过分解读，但我确实能够以此作为我玩摄影的一条箴言。以下为在上海人民英雄纪念碑下拍摄的照片，当时只是感觉自己被震撼到了就按下了快门，没有想到登上了 Unsplash 的信息流推荐，这也促使着我业余时间在该平台下继续深耕。
-![](http://image.stephenfang.me/%E6%88%AA%E5%9B%BE2020-07-12%20at%2014.00.55.png)
+![](https://image.stephenfang.me/mweb/unsplash_shbuilding.png)
 最后放出我在 Unsplash 的地址： https://unsplash.com/@stephenfang

src/content/blog/GoodCode-BadCode.md

@@ -25,4 +25,4 @@ description: 记得初入公司的时候mentor在审核我的代码的时候会
 目前看到这本书的中文版也出版了，由于我看的是英文原版书，在整理的时候自己的翻译难免会存在一些错误，欢迎在下面评论指正。
 https://image.stephenfang.me/GoodCode.jpg
 
-![GoodCode](https://image.stephenfang.me/GoodCode.jpg)
+![GoodCode](https://image.stephenfang.me/mweb/GoodCode.jpg)

src/content/blog/Haze-Free.md

@@ -43,10 +43,10 @@ end
 
 OpenCV 框架由 C++ 进行编码，通过将 C++ 代码插入 Objective-C 就成为了 Objective-C++ 代码。但是 Swift 本身与 Objective-C / Objective-C++ 并不兼容，所以需要一个Bridging Header 将 OpenCV 的功能接口暴露给 Swift。
 以下为简单的示意图。
-![](http://image.stephenfang.me/%E6%88%AA%E5%9B%BE2020-07-12%20at%2015.18.30.png)
+![](https://image.stephenfang.me/mweb/opencv_bridge.png)
 
 添加一个 Objective-C 文件到项目中将其命名为“OpenCvWrapper”，包含`OpenCvWrapper.h`与`OpenCvWrapper.m`两个文件，需要将文件扩展名“.m”改为“.mm”。如果自动弹出提示是否添加 Bridging-Header 文件选择添加；如果没有提示，则手动添加一个 Bridging-Header 文件，即添加一个头文件（Header file），重命名为“项目名-Bridging-Header.h”（本例中为：Haze-Free-Bridging-Header.h），部分项目结构图如下。
-![](http://image.stephenfang.me/%E6%88%AA%E5%9B%BE2020-07-12%20at%2015.54.22.png)
+![](https://image.stephenfang.me/mweb/opencv_bridgeh.png)
 
 ## 业务逻辑
 
@@ -142,45 +142,45 @@ using namespace cv;
 ## 错误
 
 在写 App 的过程中遇到了一个重大问题，去雾算法验证无误后始终无法得到正确的去雾图像，于是开始对去雾步骤中所有的阶段性图像打断点，一一验证得到的图像结果。最后根据StackOverFlow 上的解释以及断点结果查明了原因，原因出在 `UIImageToMat` 方法返回的Mat 类型上。
-![](http://image.stephenfang.me/%E6%88%AA%E5%9B%BE2020-07-12%20at%2016.40.11.png)
+![](https://image.stephenfang.me/mweb/opencv_debug.png)
 `UIImageToMat` 方法返回的Mat类型为 `CV_8UC4`，而程序中需要的 Mat 格式为 `CV_8UC3`，需要使用`cvtColor()` 方法对其进行转换，改正后程序正常运行。
 在使用 SFSymbols 时遇到了一些bug，UIButton的 image 使用 SFSymbol出现了无法显示Background 的问题，Debug View Hierarchy也看不出来名堂，最后只好换了自定义的icon。
-![](http://image.stephenfang.me/%E6%88%AA%E5%9B%BE2020-07-12%20at%2016.51.25.png)
+![](https://image.stephenfang.me/mweb/opencv_symbol.png)
 
 ## App 总结
 
 ### UI总结
 
 研究了iOS的设计原则后，针对该程序设计了以下页面，包含欢迎页面、权限获取页面、图像浏览页面、图像处理页面与图像分享页面，尽最大程度减少不同页面之间的耦合，使整体的页面逻辑更加清晰。
-![](http://image.stephenfang.me/%E6%88%AA%E5%9B%BE2020-07-12%20at%2016.56.25.png)
+![](https://image.stephenfang.me/mweb/opencv_privacy.png)
 在对iOS开发框架进行实践后，为 App 增加了中值滤波和灰度转换的功能，同时嵌入了Unsplash 获取图像的SDK，使得程序不仅能够从相册、相机获取图像，还能够直接从 Unsplash 无版权图像网站通过关键字检索获取图像。同时新增了图像分享的入口。为了适应新的变化将页面进行了部分重组，使其更加符合开发需求。
-![](http://image.stephenfang.me/%E6%88%AA%E5%9B%BE2020-07-12%20at%2016.58.22.png)
+![](https://image.stephenfang.me/mweb/opencv_storyboard.png)
 未来可能会考虑将该项目进行开源，现阶段仍然希望其具备更多的功能，以下为软件的运行测试。
 
 ### 页面逻辑
 
-![](http://image.stephenfang.me/%E6%88%AA%E5%9B%BE2020-07-12%20at%2016.44.23.png)
+![](https://image.stephenfang.me/mweb/opencv_logic.png)
 
 - 开启App后进入引导页面，提示用户使用该App需遵守相关用户协议。
 - 点击开始处理后跳转至第二个页面，页面显示提示需要选择图像
 - 点击选择图像后，用户需要在三种图像获取图形中做出选择，或选择取消
 
 ### 运行测试
 
-![](http://image.stephenfang.me/%E6%88%AA%E5%9B%BE2020-07-12%20at%2016.46.41.png)
+![](http://image.stephenfang.me/mweb/opencv_demo.png)
 
 - 处理相册图片实例，点选最近拍摄的照片，程序在本视图中加载此图像
 - 点击三个处理按钮中的最右者，即中值滤波效果，视图会进行跳转
 - 新的视图包含了保存和分享图像的功能，若点击保存，程序会将图像写入相册并告知用户
 
-![](http://image.stephenfang.me/%E6%88%AA%E5%9B%BE2020-07-12%20at%2016.51.50.png)
+![](https://image.stephenfang.me/mweb/opencv_share.png)
 
 - 尝试从相册加载一张新图像，可以看到图像中的树林被雾霾覆盖
 - 点击最左侧的去雾操作，由于去雾操作运算量较大，并且为了避免用户在运算过程中点按按钮，整个可操作区域不可点按，同时有活动指示环展示加载进度
 - 需要注意的是三个图像操作都采用了多线程的方式
 - 处理完成图像后可以点击分享按钮使用系统内建的分享服务进行图像的分享
 
-![](http://image.stephenfang.me/%E6%88%AA%E5%9B%BE2020-07-12%20at%2016.54.28.png)
+![](https://image.stephenfang.me/mweb/opencv_save.png)
 
 - 尝试从相机拍摄一张图像
 - 点击拍摄按钮后图像被获取，可以使用该图像进行处理

src/content/blog/HongKongGapYear.md

@@ -30,7 +30,7 @@ description: 我愿意把这一年看作是给自己放假的一年，我人生
 
 很庆幸，在好友的帮助下，我DIY了申请材料并海投了一众海外高校。给我抛来橄榄枝的是香港理工大学的计算学系。还记得收到offer的那天是平安夜的凌晨，这是一个一生难忘的圣诞礼物，当时脑海中浮现了在香港旅游的场景。我对香港一直也抱有一种奇怪的好感，每次去深圳都会拿着港澳通行证赶去口岸，但是对香港的了解也仅限于中环、尖沙咀、铜锣湾这些热门的旅游景点，现在我终于有更多的时间去了解这座城市了。
 
-![第一次来香港拍摄的照片](https://image.stephenfang.me/HK1.jpg)
+![第一次来香港拍摄的照片](https://image.stephenfang.me/mweb/HK1.jpg)
 
 > 第一次来香港拍摄的照片
 
@@ -44,7 +44,7 @@ description: 我愿意把这一年看作是给自己放假的一年，我人生
 
 既然解决不了问题，只能想办法规避问题。除了下载Uber，我能关于香港的详尽生活攻略都是出自小红书———这个几年前被知乎博主炮轰的平台。作为一个“RSS原教旨主义者”，我起初还是很反感这类推荐算法决定你该看什么的平台，但当我在小红书的帮助下预约了身份证、办理了学生八达通、领到了香港消费券、我完全改变了对这个平台的看法，我甚至知道了哪里可以买到便宜又好吃的三送饭、哪里可以买到平价的日用品、哪座山适合什么季节去…等等。
 
-![拿到博物馆通行证后我几乎走遍了香港所有博物馆](https://image.stephenfang.me/HK2.JPG)
+![拿到博物馆通行证后我几乎走遍了香港所有博物馆](https://image.stephenfang.me/mweb/HK2.JPG)
 
 > 拿到博物馆通行证后我几乎走遍了香港所有博物馆
 
@@ -60,7 +60,7 @@ description: 我愿意把这一年看作是给自己放假的一年，我人生
 
 在沙田玩一把赌马，在赤柱赏一晚日落，在会展听一场演唱会，在尖沙咀看一场电影，在西九龙等一次夜幕降临，在艺术馆看一次展览，在旺角买一张唱片，在九龙城吃一碗牛腩面，在南丫岛点一碗豆花，在宋王台影一块石碑，在屯门坐一次轻轨，在天水围逛一次湿地公园，在科大行一圈山，在将军澳踩一次单车，在荃湾绕一圈水库，在中环海滨晒一天太阳。
 
-![浅水湾的日落](https://image.stephenfang.me/HK3.jpg)
+![浅水湾的日落](https://image.stephenfang.me/mweb/HK3.jpg)
 
 > 浅水湾的日落
 
@@ -70,7 +70,7 @@ description: 我愿意把这一年看作是给自己放假的一年，我人生
 
 在来到香港之前我一直长期生活在杭州，对探索城市这件事情并不感兴趣，周末我更喜欢在家里看视频、听音乐、写代码，潜意识里每个城市都差不多，我们每天不过是在不同的钢筋水泥之间穿梭。似乎只有那种坐在露天的咖啡厅里喝着咖啡的精英主义的生活才是值得被记录的，抑或是那种在山顶的帐篷里看着夜景的生活。
 
-![长洲岛的糯米糍](https://image.stephenfang.me/HK4.JPG)
+![长洲岛的糯米糍](https://image.stephenfang.me/mweb/HK4.JPG)
 
 > 长洲岛的糯米糍
 
@@ -82,13 +82,13 @@ description: 我愿意把这一年看作是给自己放假的一年，我人生
 
 然而孤独和寂寞又是不同的，人终究是群居动物，孤独是一种自由，而寂寞是一种需要排解的情愫。每周我会集中时间给家人打几通视频电话，我会告诉他们我在香港的所见所闻，信息大都是正向的。
 
-![一起爬山的兄弟们](https://image.stephenfang.me/HK5.JPG)
+![一起爬山的兄弟们](https://image.stephenfang.me/mweb/HK5.JPG)
 
 > 一起爬山的兄弟们
 
 剩下的空白则是身边的朋友和远方的朋友共同填补的，在周末以及没课的的时候约上好友一同行山、看电影、吃饭，同时也会在IM软件里和远方的朋友分享自己的生活和感受，果然人只有在交流中才能感受到自己的存在。很庆幸，在学校里我遇到了值得交心的朋友们和现在的伴侣，从这个角度来说，我还是幸运的。
 
-![旅游小分队](https://image.stephenfang.me/HK6.JPG)
+![旅游小分队](https://image.stephenfang.me/mweb/HK6.JPG)
 
 > 旅游小分队
 

src/content/blog/Muzik_GettingStarted.md

@@ -45,7 +45,7 @@ struct Song {
 来到与该`ViewController`相对应的`ViewController.swift`文件，由于是在Storyboard中创建`UITableView`，所以需要通过`@IBOutlet`连接之前创建的`UITableView`，方法如Ctrl+拖拽，同时需要在`viewDidLoad()`中设置`UITableView`对象的`delegate`与`dataSource`。需要注意的是使用`UITableView`的方法需要 conforms to 相关的 protocols, 以上均为基本操作。
 我需要在`viewDidLoad()`阶段加载歌曲的相关信息，于是创建`configureSongs()`方法为`songs`数组添加相关数据（需要在之前创建）。
 尝试完成页面功能布局，作为Demo该 TableView 对象只包含一个 Section 的内容，如果需要调用系统音乐资料库的 `MPMediaItem`，需要使用 NSRange 对不同 Section 的内容进行排序（A-Z）。为了避免列表中图片大小显示不一致问题，我将 Row 的高度更改为60。在`cellForRowAt`方法中定制 cell，在`didSelectRowAt`方法中令其 present 播放器页面，相关内容在后文中讨论，目前这个页面看起来是这样的(先忽略 Tab 的效果)。
-![](http://image.stephenfang.me/screen1.png)
+![](http://image.stephenfang.me/mweb/muzik_screen1.png)
 懒人代码如下：
 
 ```swift
@@ -107,7 +107,7 @@ class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSour
 ## 正在播放界面
 
 创建`PlayerViewController`展示正在播放的页面，不需要与任何View进行连接，之后创建一个 UIView 令其紧贴 Safe Area 将其命名为 holder。这次我采用代码进行布局，最终看起来应该是这样的，虽然很不美观但是 it just works。
-![](http://image.stephenfang.me/screen2.png)。
+![](https://image.stephenfang.me/mweb/muzik_screen2.png)。
 在开始代码注解前了解一下我的思路。其中`viewDidLayoutSubviews`方法在controller 的子视图的 position 和 size 被改变的时候被调用。在 view 已经被设计 subviews 并且还没有被展示在屏幕上时候，可以调用此方法改变这个view。任何依赖于 bounds 并且需要完成的操作都应该放在`viewDidLayoutSubviews`中而不是`viewDidLoad`或`viewWillAppear`中，因为 view 的 frame 和 bounds 直到 AutoLayout 完成工作的时候才会被确定，所以在执行完Auto Layout之后会调用此方法。
 当用户点击上一首歌曲或下一首歌曲按钮后，需要改变控件内容的显示，我的想法是通过调用`removeFromSuperview()`方法，该方法即进行视图节点删除的操作，执行这个方法等于在 View 的树形结构中找到该节点并删除该节点及其子节点，而并非只是删除该节点自己，同时把该对象从响应者链中移除。在ARC的情况下执行`removeFromSuperview`方法多次也没有问题因为由系统自动管理。
 那么在调用`removeFromSuperview`后势必需要重新载入页面元素，并且控制播放的过程，这个时候可以采用一个统一的方法在页面载入、切换的时候进行操作。对于 `AVAudioPlayer`的调用方面，需要导入`AVFoundation`框架并初始化`AVAudioPlayer`对象。由于之前导入了 .mp3 文件，需要做的是让`AVAudioPlayer`获取待播放的歌曲 url，之前的 ViewController 对 Song 的具体内容有定义，而`Bundle.main.path`代表获取工程目录下的文件。系统启动时会激活 `AVAudioSession`，通过设置`active`为"true"激活 Session，设置为“false”解除 Session 的激活状态，`options`使用 “.notifyOthersOnDeactivation” 使音频会话停用时其它音频会话可以返回到其它活动状态。对于`sharedInstance`包含五种设置方法，希望深入了解的参见这篇文章 [AVAudioSession - Category、Model、Options、Error参数详解](https://www.jianshu.com/p/ae843162ace1)

src/content/blog/Muzik_Progress.md

@@ -24,7 +24,7 @@ description: 我希望有一款 Tab Based 的 iOS App 带来简约轻量的音
 
 ## 设计
 
-![截图2020-07-27 at 22.58.20](http://image.stephenfang.me/sketch.png)
+![截图2020-07-27 at 22.58.20](https://image.stephenfang.me/mweb/muzik_sketch.png)
 在项目开始编写代码前，我使用 Sketch 对整个App 进行设计，确定了字体与元素的使用规范，方便之后针对我想要实现的设计进行微调。其实这一步也可以直接在 StoryBoard 中完成，然而添加阴影等操作在 Sketch 等原型创作工具中更为直观。
 在完成设计后我尝试使用 Sketch Mirror、MockUp工具对 App 上手的感受进行评估，并发送原型给朋友了解他们提出的一些建议。
 ![](http://image.stephenfang.me/mweb/15958622925026.png)
@@ -38,7 +38,7 @@ description: 我希望有一款 Tab Based 的 iOS App 带来简约轻量的音
 
 按照 Sketch 中的页面设计，我将整体 App 分为精选、专辑、歌曲、音乐人、播放列表、正在播放这几个部分，其中我希望有一个小组件能像原生音乐App一样能够看到当前播放进度以及进行快捷操作，于是我将包含显示当前播放内容的 UIView 置于App的顶层位置，其中UIView中包含 UIProgressView 等控件。这是我目前能够想到且实现的理想方法，缺点即需要为下层的所有视图添加 Offset。
 Tab + Navigation 是 iOS 开发中一种非常常见的模式，每一个页面依次对应了精选、专辑、歌曲、音乐人、播放列表的功能。
-![](http://image.stephenfang.me/strc.png)
+![](https://image.stephenfang.me/mweb/strc.png)
 
 ## 页面实现
 

src/content/blog/Objc_Learning_1.md

@@ -155,7 +155,7 @@ id _objc_rootInit(id obj) {
 
 Objective-C 中声明的语法较为特别，方法名以冒号结束告诉编译器该方法有参数，在一对圆括号内指定参数的类型，与指定返回值的方法类似，和 C 类似整个声明以一个分号结束，给出一张图展示声明方法。
 
-![](http://image.stephenfang.me/obj1.jpg)
+![](https://image.stephenfang.me/mweb/obj_declaration.jpg)
 
 ## 规范注意