前言
之前两篇文章简述了项目的大致架构，这篇文章不再逐步讲解简单的细节和代码，主要分析个人博客网站中较难的技术点，也是该系列的最后一篇。
问题分析
在搭建网站的过程中碰到的较难的部分便是文章的上传。因为以前写了很多文章，但都是word,而一些在网页上解析word的插件，效果总是不好还十分臃肿卡顿，并且对于文章的图片处理起来较为棘手。
经过深思熟虑和认真调查，准备将word文档用软件批量转换为markdown格式，直接将其文本上传到数据库，前端请求后调用插件解析文本。Markdown中引用图片可以直接用<img>标签，只需要在服务器上建立一个类似图床的存在，前端就可以直接通过<img>标签远程获取图片并展示。
问题解决
1.Word格式转markdown格式
Work转markdowm的软件很多，可以自行百度’word转markdown’，
小编参照的是这篇文章：
https://blog.csdn.net/xl_lx/article/details/80482245
2.建立图床
模拟图床建立很简单，只需要将服务器端口映射到某个文件夹，并且允许访问文件夹内容。这样访问该端口就能直接显示对应文件夹的内容，在端口后添加文件名，就可下载该端口文件夹下对应文件。
图2.1 图床
打开iis服务，新建网站，填写对应配置。
图2.2 新建iis网站
图2.3 iis网站配置
根据标号点击，打开目录浏览功能。图床功能便完成，可以在里面放置图片，尝试在网页中用<img>标签引用，好像要用https链接才可访问，所以别忘了配置https访问。
图2.4 打开网站目录浏览功能
图2.5 图床内的图片访问
前端上传图片后返回对应https访问链接，大致效果如下。
图2.6 前端上传图片
3.自动替换链接
获得图床链接后，还需要用这些链接替换文章中的原图片链接。Markdown的文件引用，常用的有两种。
|
方式一 |
<div> <img src='assets/20191117-01 -01.png' width='80%'> </div> |
|
方式二 |
 |
方式一直接替换其src内的内容即可，方式二需要用<img src=’图床链接’/>的格式替换。可以在前端用js替换也可以在后端替换。下方是后台Python处理代码。
|
def mk_img(self,file_txt, mdb_ls): #file_txt为文本内容，mdb_ls为对应文本图片的图床链接列表 mdb_ls = mdb_ls.split(',') for i in range(len(mdb_ls)): mdb_ls[i] = '<img src="{}" />'.format(mdb_ls[i]) for i in range(len(mdb_ls)): try: strs = re.search(r"!\[\]\((.*?)\)", file_txt) strs_ = "<img src=\"" + strs.group(1) + "\">" file_txt = re.sub(r"!\[\]\((.*?)\)", strs_, file_txt) except AttributeError: pass for i in mdb_ls: file_txt = re.sub(r"<img src=(\'|\")[^https](.*?)>", i, file_txt, count=1) return file_txt |
4.前端markdown文本解析
借助了mavonEditor插件，解析markdown文本，对于markdown格式的文本，该插件可将其解析为html代码。mavonEditor gitHub地址:
https://github.com/hinesboy/mavonEditor
图4.1 解析markdown文本并展示
该插件也可用于markdown文本在线编辑
图4.2 在线编辑展示
总结
如果你看到这了，何不尝试搭建自己的博客网站呢？可以来算法与编程之美公众号点击加入圈子，来交流讨论你的看法和遇到的问题吧。
END
主 编 | 王文星
责 编 | 马原涛
where2go 团队