P08:博客详细页面制作
本文主要做一下博客前台的详细页面,详细页做的主要的一点是对Markdown
语法的解析。
编写基本页面结构
在pages
文件夹下新建一个detailed.js
,放入相关引入
import React,{useState} from 'react' import Head from 'next/head' import {Row, Col , Space ,Breadcrumb} from 'antd' import {ClockCircleOutlined,VideoCameraOutlined,FireOutlined} from '@ant-design/icons' import Header from '../components/Header' import Author from '../components/Author' import Advert from '../components/Advert' import Footer from '../components/Footer'
编写return
部分的jsx
代码
<> <Head> <title>博客详细页</title> </Head> <Header /> <Row className="comm-main" type="flex" justify="center"> <Col className="comm-left" xs={24} sm={24} md={16} lg={18} xl={14} > <div> <div className="bread-div"> <Breadcrumb> <Breadcrumb.Item><a href="/">首页</a></Breadcrumb.Item> <Breadcrumb.Item>教程列表</Breadcrumb.Item> <Breadcrumb.Item>xxxx</Breadcrumb.Item> </Breadcrumb> </div> <div> <div className="detailed-title"> React 实战教程笔记-码云笔记开发 </div> <div className="list-icon center"> <IconText icon={ClockCircleOutlined} text="2020-12-01" key="list-vertical-star-o" /> <IconText icon={VideoCameraOutlined} text="前端教程" key="list-vertical-like-o" /> <IconText icon={FireOutlined} text="5498 人" key="list-vertical-message" /> </div> <div className="detailed-content" > 这里是详细内容,接下来编写 </div> </div> </div> </Col> <Col className="comm-right" xs={0} sm={0} md={7} lg={5} xl={4}> <Author /> <Advert /> </Col> </Row> <Footer/> </>
然后编写样式,在/styles
文件夹下建立一个detailed.css
文件,代码如下:
.bread-div{ padding: .5rem; border-bottom:1px solid #eee; background-color: #e1f0ff; } .detailed-title{ font-size: 1.8rem; text-align: center; padding: 1rem; } .center{ text-align: center; } .detailed-content{ padding: 1.3rem; font-size: 1rem; } code { display: block ; background-color:#f3f3f3; padding: .5rem !important; overflow-y: auto; font-weight: 300; font-family: Menlo, monospace; border-radius: .3rem; } .title-anchor{ color:#888 !important; padding:4px !important; margin: 0rem !important; height: auto !important; line-height: 1.2rem !important; font-size: .9rem !important; border-bottom: 1px dashed #eee; } .active{ color:rgb(30, 144, 255) !important; } .nav-title{ text-align: center; color: #888; border-bottom: 1px solid rgb(30, 144, 255); }
此时,我们打开浏览器看一下效果:
解析 Markdown 语法
作为一个技术博客,一定是要使用Markdown
来编写文章,所以对Markdown
文件的解析也是前端必须要作的一件事。我这里使用了react-markdown
。
认识react-markdown组件
react-markdown
是 react 专用的 markdown 解析组件,目前来看是非常不错的。我公司用了marked + highlight.js
,觉的还是不太好,所以博客中尝试使用react-markdown
。
它支持代码高亮,表格,而且解析的非常好。
github 网址:点击这里
目前已经有 6000+多 star 了,算是比较好和火的 React 组件。
react-markdown的安装和引入
可以直接使用npm
来进行安装,代码如下:
npm install --save react-markdown
或者你也可以使用yarn
命令来安装
yarn add react-markdown
安装好后,使用import
进行引入,代码如下:
import ReactMarkdown from 'react-markdown'
准备 md 相关数据
因为目前还没有后端程序,所以需要伪造一个 md 数据,让 web 页面可以渲染。
这里声明一个markdown
变量,当然内容全部是我胡乱写的,为的就是可以顺利渲染出来。
let markdown='# P01:课程介绍和环境搭建\n' + '[ **M** ] arkdown + E [ **ditor** ] = **Mditor** \n' + '> Mditor 是一个简洁、易于集成、方便扩展、期望舒服的编写 markdown 的编辑器,仅此而已... \n\n' + '**这是加粗的文字**\n\n' + '*这是倾斜的文字*`\n\n' + '***这是斜体加粗的文字***\n\n' + '~~这是加删除线的文字~~ \n\n'+ '\`console.log(111)\` \n\n'+ '# p02:来个 Hello World 初始 Vue3.0\n' + '> aaaaaaaaa\n' + '>> bbbbbbbbb\n' + '>>> cccccccccc\n'+ '***\n\n\n' + '# p03:Vue3.0 基础知识讲解\n' + '> aaaaaaaaa\n' + '>> bbbbbbbbb\n' + '>>> cccccccccc\n\n'+ '# p04:Vue3.0 基础知识讲解\n' + '> aaaaaaaaa\n' + '>> bbbbbbbbb\n' + '>>> cccccccccc\n\n'+ '#5 p05:Vue3.0 基础知识讲解\n' + '> aaaaaaaaa\n' + '>> bbbbbbbbb\n' + '>>> cccccccccc\n\n'+ '# p06:Vue3.0 基础知识讲解\n' + '> aaaaaaaaa\n' + '>> bbbbbbbbb\n' + '>>> cccccccccc\n\n'+ '# p07:Vue3.0 基础知识讲解\n' + '> aaaaaaaaa\n' + '>> bbbbbbbbb\n' + '>>> cccccccccc\n\n'+ '``` var a=11; ```'
使用react-markdown渲染 markdown
现在组件和 markdown 文件都准备好了,可以进行渲染了。代码如下:
<div className="detailed-content" > <ReactMarkdown source={markdown} escapeHtml={false} /> </div>
现在可以到浏览器中预览一下了,如果一切正常,应该可以正常接入markdown
语法了。
Markdown 导航制作
有时候我的博客文章都是长文章,所以需要一个类似书籍目录的东西,对文章进行导航。这个导航方便小伙伴们阅读,大大提升了博客的体验度。React
有着极好的技术生态,基本你能想到的技术需求都可以找到对应的轮子,所以我们依然适应第三方组件markdown-navbar
.
认识markdown-navbar组件
markdown-navbar
组件是一款第三方提供的组件,因为这个是比较小众的需求,所以使用的人并不多。目前只有 18star,这个是国人开发的,我用起来还不错,希望作者可以一直维护下去(目前看来是不进行维护了,但是用起来还是挺好用)。
markdown-navbar
的基本属性:
- className: 可以为导航定义一个 class 名称,从而进行 style 样式的定义。
- source:要解析的内容,也就是你的 Markdown 内容。
- headingTopOffset:描点距离页面顶部的位置,默认值是 0.
- ordered: 显示数字编码,默认是显示的,也就是 true,设置为 false 就不显示了。
markdown-navbar的安装和使用
用npm install
进行安装,命令如下:
npm install --save markdown-navbar
用yarn add
进行安装,命令如下:
yarn add markdown-navbar
安装完成后,直接在要使用的页面用import
进行引入,需要注意的是你还需要引入css
。
import MarkNav from 'markdown-navbar'; import 'markdown-navbar/dist/navbar.css';
这样就引入成功了,现在就可以制作导航了,代码如下:
<div className="detailed-nav comm-box"> <div className="nav-title">文章目录</div> <MarkNav className="article-menu" source={markdown} ordered={false} /> </div>
在浏览器中预览一下,可以看到效果了。但现在有一个需求,就是这个导航要一直在页面的右侧。我们经常叫这个需求为固钉
。Ant Desgin
中提供了Affix
.
先用 import 引入 Affix 组件。
import {Row, Col ,Affix, Icon ,Breadcrumb } from 'antd'
引入后在需要固钉的外层加上 Affix 组件就可以了。
<Affix offsetTop={5}> <div className="detailed-nav comm-box"> <div className="nav-title">文章目录</div> <MarkNav className="article-menu" source={markdown} ordered={false} /> </div> </Affix>
写完这段代码,到浏览器中预览一下,就可以实现固钉的效果了。
为了方便大家学习,将所有源码附上:
import React,{useState} from 'react' import Head from 'next/head' import {Row, Col, Space, Breadcrumb, Affix} from 'antd' import {ClockCircleOutlined,VideoCameraOutlined,FireOutlined} from '@ant-design/icons' import ReactMarkdown from 'react-markdown' import MarkNav from 'markdown-navbar'; import 'markdown-navbar/dist/navbar.css'; import Header from '../components/Header' import Author from '../components/Author' import Advert from '../components/Advert' import Footer from '../components/Footer' export default function Detailed(){ const IconText = ({ icon, text }) => ( <Space> {React.createElement(icon)} {text} </Space> ); let markdown='# P01:课程介绍和环境搭建\n' + '[ **M** ] arkdown + E [ **ditor** ] = **Mditor** \n' + '> Mditor 是一个简洁、易于集成、方便扩展、期望舒服的编写 markdown 的编辑器,仅此而已... \n\n' + '**这是加粗的文字**\n\n' + '*这是倾斜的文字*`\n\n' + '***这是斜体加粗的文字***\n\n' + '~~这是加删除线的文字~~ \n\n'+ '\`console.log(111)\` \n\n'+ '# p02:来个 Hello World 初始 Vue3.0\n' + '> aaaaaaaaa\n' + '>> bbbbbbbbb\n' + '>>> cccccccccc\n'+ '***\n\n\n' + '# p03:Vue3.0 基础知识讲解\n' + '> aaaaaaaaa\n' + '>> bbbbbbbbb\n' + '>>> cccccccccc\n\n'+ '# p04:Vue3.0 基础知识讲解\n' + '> aaaaaaaaa\n' + '>> bbbbbbbbb\n' + '>>> cccccccccc\n\n'+ '#5 p05:Vue3.0 基础知识讲解\n' + '> aaaaaaaaa\n' + '>> bbbbbbbbb\n' + '>>> cccccccccc\n\n'+ '# p06:Vue3.0 基础知识讲解\n' + '> aaaaaaaaa\n' + '>> bbbbbbbbb\n' + '>>> cccccccccc\n\n'+ '# p07:Vue3.0 基础知识讲解\n' + '> aaaaaaaaa\n' + '>> bbbbbbbbb\n' + '>>> cccccccccc\n\n'+ '``` var a=11; ```'; return ( <> <Head> <title>博客详细页</title> </Head> <Header /> <Row className="comm-main" type="flex" justify="center"> <Col className="comm-left" xs={24} sm={24} md={16} lg={18} xl={14} > <div> <div className="bread-div"> <Breadcrumb> <Breadcrumb.Item><a href="/">首页</a></Breadcrumb.Item> <Breadcrumb.Item>教程列表</Breadcrumb.Item> <Breadcrumb.Item>xxxx</Breadcrumb.Item> </Breadcrumb> </div> <div> <div className="detailed-title"> React 实战教程笔记-码云笔记开发 </div> <div className="list-icon center"> <IconText icon={ClockCircleOutlined} text="2020-12-01" key="list-vertical-star-o" /> <IconText icon={VideoCameraOutlined} text="前端教程" key="list-vertical-like-o" /> <IconText icon={FireOutlined} text="5498 人" key="list-vertical-message" /> </div> <div className="detailed-content" > <ReactMarkdown source={markdown} escapeHtml={false} /> </div> </div> </div> </Col> <Col className="comm-right" xs={0} sm={0} md={7} lg={5} xl={4}> <Author /> <Advert /> <Affix offsetTop={5}> <div className="detailed-nav comm-box"> <div className="nav-title">文章目录</div> <MarkNav className="article-menu" source={markdown} ordered={false} /> </div> </Affix> </Col> </Row> <Footer/> </> ) }
以上就是博客详细页面制作全过程,我们主要实现了详细页的文章导航效果,到目前为止,基本的用户前台部分就已经制作基本完成了,但是还有很多细节需要我们在中台和后台都开发完成后,再不断打磨。所以大家不要走开,跟着码云笔记一起学下去。
码云笔记 » P08:博客详细页面制作