React Hooks 搭建自己的博客(一)

Aweiweier192_
1,247 阅读3分钟

项目前端基础环境搭建

前端页面制作，分为文章列表和文章详情页面 GitHub

  • 为了利于SEO,选用Next.js框架辅助开发
  • 选用Ant Design作为UI交互库

create-next-app 创建项目

create-next-app就是Next.js的脚手架工具，先在全局安装

npm i -g create-next-app

安装完成后，选择一个位置开始创建项目

npx create-next-app

创建完成后根据提示运行项目

npm run dev

在浏览器中输入http://localhost:3000/，看到Welcome to Next.js!表示项目初始化成功

将Blog项目放到github

  1. 在github新建一个仓库
  2. 本地仓库与远程仓库建立链接
git remote add origin +  //远程仓库地址
  1. 将初始化的项目Blog提交到github
git push -u origin master
  1. 切换分支(可选)
git branch dev // 创建本地分支 dev
git checkout dev // 切换到分支 dev
git push -u origin dev:dev(本地分支:远程分支) // 创建并提交到远程分支(远程分支没有会自动创建)

创建博客首页

项目创建完完成后，主页是默认的，我们需要改成自己的样式

import React from 'react'
import Head from 'next/head'
const Home = () => (
  <>
    <Head>
      <title>MyBlog</title>
    </Head>
 </>
)
export default Home

安装@zeit/next-css使Next.js支持CSS文件

其主要功能是让Next.js可以加载CSS文件

npm install --save @zeit/next-css

安装完成后，在blog根目录下新建next.config.js(Next.js总配置文件),此后Next.js就支持CSS文件了

const withCss = require('@zeit/next-css')
if(typeof require !== 'undefined'){
    require.extensions['.css']=file=>{}
}
module.exports = withCss({})

安装Ant Design并按需加载

使用npm安装，输入如下命令

npm install antd --save

安装babel-plugin-import 实现按需加载

npm install babel-plugin-import --save-dev

在项目根目录下建立.babelrc文件，配置如下：

{
    "presets":["next/babel"],  // Next.js的总配置文件，相当于继承了它本身的所有配置
    "plugins":[     // 这个插件就是让antd可以按需引入，包括CSS
        [
            "import",
            {
                "libraryName":"antd"
            }
        ]
    ]
}

在pages目录下，新建style.js文件，然后将CSS进行全局引入

import App from 'next/app'
import 'antd/dist/antd.css'
export default App

此时，Ant Design就可以按需引入了

import React from 'react'
import Head from 'next/head'
import {Button} from 'antd'
const Home = () => (
  <>
    <Head>
      <title>Home</title>
    </Head>
    <div><Button>我是按钮</Button></div>
 </>
)
export default Home

编写公共组件Header、Footer、Author(作者简介)等

GitHub

博客详情页-解析Markdown语法

使用Markdown编写文章，用react-markdown来解析文章

  • react-markdown是react专用的markdown解析组件
  • react-markdown的安装和引入
npm i --save react-markdown
  • 在需要markdown的组件中引入
import ReactMarkdown from 'react-markdown'
  • 在组件中使用，并mock一份数据

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'
  //.................
<div className="detailed-content" >
    <ReactMarkdown
    // source数据源
      source={markdown} 
      escapeHtml={false}  
    />
</div>
// 此时就可以在浏览器中预览解析的文章
  • 制作markdown导航

使用第三方插件 markdown-navbar

  1. className: 修改默认样式
  2. source：要解析markdown内容
  3. ordered：默认显示数字编码，false不显示

markdown的安装及使用

npm install --save markdown-navbar

在用到的组件中import引入和CSS

import MarkNav from 'markdown-navbar'
import 'markdown-navbar/dist/navbar.css'

在组件中使用MarkNav

<div className="detailed-nav comm-box">
  <div className="nav-title">文章目录</div>
  <MarkNav
    className="article-menu"
    source={markdown}
    ordered={false}
  />
</div>
// 此时便可看到效果
avatar
文章
阅读
粉丝