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

算法与编程之美

发布于 2020-05-25 16:49:19

1.2K0

发布于 2020-05-25 16:49:19

文章被收录于专栏：算法与编程之美算法与编程之美

前言

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

问题分析

在搭建网站的过程中碰到的较难的部分便是文章的上传。因为以前写了很多文章，但都是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>
方式二	![](assets/20190908-01 -01.png)

方式一直接替换其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