首页 > 其他分享 >React + Ant Design 搭建个人博客

React + Ant Design 搭建个人博客

时间:2022-10-27 20:35:41浏览次数:56  
标签:npm React react marked Ant Design 博客 https highlight


react框架学的差不多了,就想搭建一个博客,沉淀一下!记录走过的点点滴滴!

博客主要运用技术栈:

  • react : 项目主框架
  • redux : 状态管理
  • reacr-router : 前端路由控制
  • es6 : 项目中的JS语法
  • Ant Design : 前端UI框架
  • Axios : 异步请求数据处理

部署开发环境

  • 安装node环境,官方地址:https://nodejs.org/en/ 。node中自带npm,无需另行安装。
  • 全局安装官方提供的手脚架create-react-app
npm install -g create-react-app

//创建project

create-react-app projectName

//打开项目

npm start

博客的UI框架

使用Antd: https://ant.design/index-cn

博客数据源暂时来自于 issues

API:https://developer.github.com/v3/issues/

markdown渲染

运用了marked:https://github.com/chjj/marked

在博客中使用marked的语法:

import marked from  'marked';

commponentWillMount(){
marked.setOptions({
highlight: code => hljs.highlightAuto(code).value,
});
}

//把字符串插入DOM元素
<div dangerouslySetInnerHTML={{ __html: marked(item.body) }} />

代码高亮

代码高亮用的是highlight.js:https://github.com/isagalaev/highlight.js 。

//npm 安装
npm install highlight.js

highlight.js支持多种代码的颜色风格,可以在css中随意切换

@import '~highlight.js/styles/github.css';

在这可以看到每种语言的高亮效果和配色风格:https://highlightjs.org/

项目打包上线:npm run build


标签:npm,React,react,marked,Ant,Design,博客,https,highlight
From: https://blog.51cto.com/u_12344418/5801927

相关文章

  • react Hooks 钩子函数
    什么是Hooks?首先:React的组件创建方式,一种是类组件,一种是纯函数组件。React团队认为组件的最佳写法应该是函数,而不是类。但是纯函数组件有着类组件不具备的特点:纯函数......
  • React进阶篇——十、高阶组件使用场景
    十、高阶组件使用场景操纵props在被包装组件接收props前,高阶组件可以先拦截到props,对props执行增加、删除或修改的操作,然后将处理后的props再传递给被包装组件,上一篇的......
  • 二. jmeter+ant+jenkins接口自动化测试平台
    平台搭建  (1).录制jmeter脚本  (2).将jmeter的安装目录下的G:\jmeter\apache-jmeter-5.1.1\extras中,将”ant-jmeter-1.1.1.jar”文件放到ant的lib目录下  ......
  • react组件深度解读
    五、React核心是组件在React中,我们使用组件(有状态、可组合、可重用)来描述UI。在任何编程语言中,你都可以将组件视为简单的函数。React组件也一样,它的输入是props......
  • React实现一个简易版Swiper
    背景最近在公司内部进行一个引导配置系统的开发中,需要实现一个多图轮播的功能。到这时很多同学会说了,“那你直接用swiper不就好了吗?”。但其实是,因为所有引导的展示都是作......
  • React高级特性之Render Props
    renderprop是一个技术概念。它指的是使用值为function类型的prop来实现Reactcomponent之间的代码共享。如果一个组件有一个render属性,并且这个render属性的值为一个返......
  • React高级特性之Context
    Context提供了一种不需要手动地通过props来层层传递的方式来传递数据。正文在典型的React应用中,数据是通过props,自上而下地传递给子组件的。但是对于被大量组件使用的......
  • 项目实战:在线报价采购系统(React +SpreadJS+Echarts)
    小伙伴们对采购系统肯定不陌生,小到出差路费、部门物资采购;大到生产计划、原料成本预估都会涉及到该系统。管理人员可以通过采购系统减少管理成本,说是管理利器毫不过分,对于......
  • 前端一面高频react面试题(持续更新中)
    如何避免组件的重新渲染?React中最常见的问题之一是组件不必要地重新渲染。React提供了两个方法,在这些情况下非常有用:React.memo():这可以防止不必要地重新渲染函数组......
  • 老生常谈React的diff算法原理-面试版
    第一次发文章notonly(虽然)版式可能有点烂butalso(但是)最后赋有手稿研究finally看完他你有收获diff算法:对于update的组件,他会将当前组件与该组件在上次更新是对应的......