这是我参与「第四届青训营 」笔记创作活动的第3天
在这次组队大项目中,我们小组选择的是仿掘金项目.我负责了目录滚动高亮这一块.第一次自己自主的完成了一个较为完善的功能模块.对我来说非常有意义,写篇笔记复习一下整个过程,也留下一些纪念.
注:文章内容顺序仅代表实现功能时的过程经历,并不一定正确
1.目录中的内容是哪来的
有目录的前提是得有文章,首先观察掘金的各种文章,可以发现并不是所有文章都有目录.有目录的文章都有一个特点:目录所对应的内容在页面中都是h1~6标签.
从这里我们已经可以得到一个结论,目录中的内容来自页面文章中的h1~6标签中的内容
2.文章预览
知道目录内容从何而来之后,首先要解决的是文章预览的问题.
现在我们写文章一般有两种编辑器:Markdown编辑器和富文本编辑器.
这两种编辑器生成的内容是不一样的(我一开始没有这个认知,因为之前使用过富文本编辑器,我知道富文本编辑器生成的内容实际上就是html文档,所以当时以为markdown生成的内容也是html,实际上还是markdown的内容),但是两者在页面上显示的内容是一样的,都是html文档.
因为没有去做验证,我的猜测是要么写文章保存之后,返回给后台的是直接转化成html的内容,保存在数据库中,要么是文章加一个标记,表示不同的文档格式,在页面渲染时根据不同的文档用的不同的渲染方式,在这里Markdown还是会转化成html,所以我更倾向第一种方案,文章保存的时候保存一次就行了.
这里其实我是有一个疑问的:我没有找到文章内容对应的网络请求
2.1获取文章内容
因为前面提到的我没有找到文章内容对应的请求,所以我只能通过其他途径来获取文章的内容.
方法很简单直接cv,但是这样得到的是纯文本,如果直接放在页面上完全没有格式.
解决这一个问题我使用了Typora编辑器,这是一个Markdown编辑器,有经验的同学应该是知道的.
MarkDown编辑器其实分为两种,一种是我们在掘金写文章的这种,源码和预览分开的;另一种就是像Typora那样写完之后直接转化成html显示的,Typora内置了开发者工具,不能说和浏览器很像,只能说一模一样.
在复制页面文章到Typora之后,神奇的事情发生了,格式完全保留下来,就是图片也都还在.这一部分确实是我的知识盲区了,不知道怎么个原理.
然后我通过开发者工具的控制台,先获取包含文章内容的dom元素,再通过innerHTML得到html格式的文章内容
这样我就拿到了对应的html内容
到这里有些同学可能已经在心底骂我了,确实该骂,直接在浏览器中做这一步不是一样吗?
确实如此,后面我才想起来这一步完全可以在浏览器中实现,但当时我也不知道这些,都是自己一步步探索的;而且我写文章的时候才发现如果直接从浏览器中做这一步,不仅能拿到文章内容,连预览的样式都在这里面,这样的话完全避免我后面为了解决文章预览样式花的时间.只能说还是太年轻了.
就这样我拿到了文章内容
不知道有没有人好奇这个图2中temp1是怎么冒出来的?
这里做一个解答,鼠标右键点击元素,最下面有一个保存为全局变量.
可以直接拿到点击的dom元素,也是个挺好用的小技巧
2.2引入文章内容
因为毕竟我是学前端的,所以打算详情页就只用一篇文章来做演示就好了.所以一开始是打算保存为txt文件,然后引入项目中使用,尴尬的是我并不会这一步.后面谷歌一下发现本地引入的我都不太明白,所以还是打算放服务器上引入,毕竟更贴合实际的业务场景,前面无限滚动的接口也是我写的,所以直接把txt文件放进koa项目的public文件夹中,通过路径就能直接引入.
async function getData() {
axios.defaults.headers.post["Content-Type"] =
"application/json;charset=UTF-8";
let res = await axios.get("http://xxx.xx.xx.xxx:3334/detailText.txt");
console.log(res.data)
}
就这样成功引进了文章的内容,但是这里有一个问题,文章没有样式,因为我这样拿到的只是html,并没有css. 我一直不知道怎么找到对应的css文件,也许是时候谷歌一下了.
虽然这个不是重点,但是一点样式都没有,看起来真的很难看,因为问题解决了,所以就不放图了.
思考之后意识到,这个没样式的问题在于,我直接就把内容引入到页面,这里应该需要一个预览组件. 然后谷歌markdown编辑器预览,我找到了v-md-editor
这个markdown编辑器有专门的预览组件,我在它文档中的编辑器中试了一下,确实可以将html预览出来,样式大体上没有问题,但是还是有问题的(这个问题产生的原因在于它本身是预览markdown的),比如代码高亮没有,还有加粗的效果有问题.
但是我当时的任务是解决目录滚动高亮的问题,所以文章大体上没问题我就将就着用了. 通过使用v-md-editor的预览组件,我暂时完成了文章内容的展示.
这里其实用它的html预览组件会更好,毕竟我文章内容本身是html,它的预览组件应该是为markdown文档服务的
精力有限,写到这里已经1600+字了,所以心路历程还是分成几篇文章来写吧.
然后再提取精华写一篇相对正确的具体的实现方式
