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 [email protected]/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 [email protected]/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/>
   </>
  )
}

以上就是博客详细页面制作全过程,我们主要实现了详细页的文章导航效果,到目前为止,基本的用户前台部分就已经制作基本完成了,但是还有很多细节需要我们在中台和后台都开发完成后,再不断打磨。所以大家不要走开,跟着码云笔记一起学下去。

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » P08:博客详细页面制作

发表评论

提供最优质的资源集合

立即查看 了解详情