专栏首页算法与编程之美谈一谈|个人博客网站开发记录三-难点技术分析

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

前言

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

问题分析

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

图4.1 解析markdown文本并展示

该插件也可用于markdown文本在线编辑

图4.2 在线编辑展示

总结

如果你看到这了,何不尝试搭建自己的博客网站呢?可以来算法与编程之美公众号点击加入圈子,来交流讨论你的看法和遇到的问题吧。

END

主 编 | 王文星

责 编 | 马原涛

where2go 团队

本文分享自微信公众号 - 算法与编程之美(algo_coding),作者:马原涛

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-05-21

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 谈一谈|使用Idea打开Maven项目的正确姿势

    在学习网上大神们的源码过程中,经常有一些打包好的项目可以提供给自己参考学习,其中不乏一些maven项目,因为自己使用的开发环境是Idea+Gradle。对于Ma...

    算法与编程之美
  • 数学|欧拉公式的简单证明

    在数学中,sin函数和cos函数是最近乎完美的周期函数,e是自然对数的底,i是数学界中唯一一个平方为负的数字,这几者一般很少有联系,而欧拉公式则很完美的将它们联...

    算法与编程之美
  • 网页|CSS字体介绍

    除了上一节我们讲到的背景以外,字体也是一个我们最常用到的属性,接下来我们就来讲一讲CSS字体。

    算法与编程之美
  • Python与kindle阅读器之间也有关系吗

    对于不了解Python的人来说,其实这样还是比较麻烦,最好的办法是直接发邮件或者连接数据线。当然此教程是学习经验和思路。

    Python知识大全
  • Python监视域名对应IP地址变化情况

    为了负载均衡或者增加黑客攻击难度,很多域名对应的IP地址是会经常变化的。 from time import sleep from socket import g...

    Python小屋屋主
  • Spring Boot 1.X和2.X优雅重启实战

    项目在重新发布的过程中,如果有的请求时间比较长,还没执行完成,此时重启的话就会导致请求中断,影响业务功能,优雅重启可以保证在停止的时候,不接收外部的新的请求,等...

    后端老鸟
  • springBoot学习(五)springBoot自定义banner与web开发

    通过 springBootTestRun.setBannerMode(Banner.Mode.OFF);

    杨小杰
  • spring cloud(学习笔记) Enreka服务治理

    服务治理是微服务架构最为核心和基础的模块,主要用来实现各个微服务实例的自动化注册和发现。

    Dawnzhang
  • Netty 系列四(ChannelHandler 和 ChannelPipeline).

        先来整体的介绍一下这篇博文要介绍的几个概念(Channel、ChannelHandler、ChannelPipeline、ChannelHandlerC...

    JMCui
  • 高端访谈:人工智能下一步会如何改变商业与生活

    大数据文摘

扫码关注云+社区

领取腾讯云代金券