谈一谈|个人博客网站开发记录三-难点技术分析

前言

之前两篇文章简述了项目的大致架构，这篇文章不再逐步讲解简单的细节和代码，主要分析个人博客网站中较难的技术点，也是该系列的最后一篇。

问题分析

在搭建网站的过程中碰到的较难的部分便是文章的上传。因为以前写了很多文章，但都是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 团队

微信号：算法与编程之美