P08:博客详细页面制作

目录
文章目录隐藏
  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/>
   </>
  )
}

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

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » P08:博客详细页面制作

发表回复