首页 专题 H5案例 前端导航 UI框架

漫谈博客重构

作者:TG 日期: 2019-09-27 字数: 6628 阅读: 466

由于种种说不清道不明的原因,博客停更了一年多。在此期间,也没有闲下来,将博客狠狠的重构了一波。

主要包括以下几个方面:

  • 完善构建工具:webpack + Gulp + rollup

  • 使用SASS预编译器,更好地组织管理样式文件

  • 编辑器: 基于React开发了Markdown编辑器,后续文章统一使用Markdown格式

  • 文章: 隐藏左边栏、新增内容目录栏、支持目录导航

  • 待开发功能

构建工具

完善构建工具,采用Webpack + Gulp + rollup,对静态资源统一编译压缩。

Webpack

基于Webpack编译TypeScript + React。

Babel7配置:

  • {
  • "presets": [
  • ["@babel/preset-env", {
  • "loose": true,
  • "targets": {
  • "browsers": ["ie >= 10", "chrome >= 31", "ios >= 8", "android >= 4.4"],
  • "node": "8"
  • }
  • }],
  • "@babel/preset-react",
  • "@babel/preset-typescript"
  • ],
  • ...
  • }

Gulp + rollup

针对一些旧的JS文件,使用Gulp + rollup进行模块化管理。

  • function buildJs() {
  • return gulp.src(paths.js.src)
  • .pipe(sourcemaps.init())
  • .pipe(rollup({
  • plugins: [
  • commonjs(),
  • resolve(),
  • babel({
  • runtimeHelpers: true
  • }),
  • uglify.uglify()
  • ]
  • }, {
  • format: 'iife'
  • }))
  • .pipe(rename({
  • suffix: ".min"
  • }))
  • .pipe(sourcemaps.write('./'))
  • .pipe(gulp.dest(paths.js.dest));
  • }

后续使用ES6、ES7语法,逐渐抛弃JQuery。

SASS预编译器

使用SASS预编译器,更好地组织管理样式文件。

编辑器

基于React + TypeScript开发了Markdown编辑器,后续文章统一使用Markdown格式。

主要特性

Markdown编辑器主要特性:

  • 支持标准Markdown语法

  • 支持实时预览、图片上传、代码块(高亮、行号)

  • 支持TOC目录、Emoji表情

  • 支持识别和解析 HTML 标签

依赖开源项目

文章

为了方便阅读,文章详细页隐藏了左侧边栏,新增了内容目录栏(仅针对Markdown文章),支持目录导航。

目录

新增内容目录栏。

上下导航

文章尾部新增上一篇、下一篇功能。

待开发功能

  • 分享模块

  • 评论模块(目前评论使用第三方disqus,但是有翻墙的问题,还未找到合适的国内工具,如有好的,欢迎推荐~)

  • 公众完善管理

  • H5案例新增

….

总结

重构过程中,耗费了不少功夫,断断续续的,一期总算是完成了,后续还有好多事情要做,一年又快结束了,希望自己勤奋点吧!

如有问题或发现Bug,可加群(QQ:481231348)反馈。

目录