现在列表也有了,点击文章列表的缩略图之后,就要直接展示博客内容了。大家知道一篇博客如果过长的话,会有一个导航栏,帮住用户快速的定位到某个位置,这里也要加入这个功能。
之前说过了,这里引入了react-markdown
,还有这个代码高亮的插件prismjf
,在Components中新建一个文件夹,用来保存markdown中可能存在的各种布局块,比如代码块,列表,字体等。可以通过自定义样式的方式添加不同字体和样式。代码可以参见code.js,引入了prismjs为代码块进行了高亮。至于显示的内容主体就直接把定义好的模板样式引入进来就好了,react-markdown会为你渲染的。
这样我们的markdown文件就可以在web端展示了,但是。。。
webpack配置
这么大的事情怎么能少得了webpack这位老兄,首先引入一个依赖包,
yarn add raw-loader -D
这个依赖包是用来解析markdown等文件的,
这里的设置,第一个排除了md文件,不让file-loader去解析md文件,使用raw-loader来对markdown文件进行解析。如果不解析,你会看到这样一个页面
直接显示了文件的路径名称。
添加了这段webpack配置以后,你会看到这样的结果,内容被解析出来了。
其实,在这里多说一句,webpack的工作原理也就出来了,就是解析你的文件,然后把解析完的东西交给你,让你读得懂。
好了,webpack暂时告一段落了,剩下的就是打包发布的配置了,这个放在后面说。
定位悬浮框
先说一下要做的东西,就是一个定位的悬浮框,然后鼠标放到上面显示文章结构,可以点击然后进行跳转。
统一规定,对markdown的一级标题,即对每一个 #
的标题进行跳转。这段对我来说是有点困难的,看懂他代码都费劲,好在他在我身边,有啥不会的能直接问…
先说一下引用吧,
<div style={{padding:10}}>
<div ref={(ins) => {
this.articleIns = ins
}}
style={{width:'95%',margin:'0 auto'}}>
<Article source = {this.state.md || null} />
</div>
{
this.articleIns && <AINav getElement = {()=>{return this.articleIns}} />
}
</div>
react的ref可以设置一个回调函数,组件挂载之后,回调函数立即执行,这也是官方推荐的用法。参数中的ins是改组件的一个具体实例。为这个AINav传入一个函数,这个函数可以获取到当前页面(即当前显示的文章),然后通过对这个元素进行操作,比如判断标签有多少,等等进行高度的测量和章节的定位。
对于articleInsideNav.js
这个文件的内容和对应的css内容,我不过多介绍了,这里设计了DOM操作,和css操作,我就照搬过来了,感兴趣的可以了解下。总归,文章现在是可以展示了。