当前位置：码云笔记 > 前端 > React.js教程 > P08：博客详细页面制作
码云码云 React.js教程

P08：博客详细页面制作

AI 概述
编写基本页面结构解析 Markdown 语法认识react-markdown组件react-markdown的安装和引入准备 md 相关数据使用react-markdown渲染 markdownMarkdown 导航制作认识markdown-navbar组件markdown-navbar的安装和使用 本文主要做一下博客前台的详细页面，详细页做的主要的一点是对Markdown语法的解析。 编写...
目录
文章目录隐藏
  1. 编写基本页面结构
  2. 解析 Markdown 语法
  3. Markdown 导航制作

本文主要做一下博客前台的详细页面，详细页做的主要的一点是对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：博客详细页面制作的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。

「点点赞赏，手留余香」

赞 0 赏

给作者打赏，鼓励TA抓紧创作！

微信微信 支付宝支付宝

还没有人赞赏，快来当第一个赞赏的人吧！

声明：本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符，请将相关资料发送至 admin@mybj123.com 进行投诉反馈，一经查实，立即处理！
重要：如软件存在付费、会员、充值等，均属软件开发者或所属公司行为，与本站无关，网友需自行判断
码云笔记 » P08：博客详细页面制作

码云 SVIP

分享到：

相关推荐

发表回复