从零开始搭建一个基于React框架的博客发布系统 （五）展示博客内容

现在列表也有了，点击文章列表的缩略图之后，就要直接展示博客内容了。大家知道一篇博客如果过长的话，会有一个导航栏，帮住用户快速的定位到某个位置，这里也要加入这个功能。

之前说过了，这里引入了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操作，我就照搬过来了，感兴趣的可以了解下。总归，文章现在是可以展示了。

欢迎收看下一篇：从零开始搭建一个基于React框架的博客发布系统 （SIX） Webpack编译配置