我的博客2.0 FE

Introduction

线上博客连接

前端GitHub

这是我写的第二个博客网站。初版是在今年(2018年)3月份完成的，用的Bootstrap + Django. 待第二版数据迁移完毕后，初版会开源。 至于为何写第二版，是由于还有不少本身想表达的东西没有在初版呈现。

2.0版本是一个基于React + Node的先后端分离的项目，由于初版用的Django，因此后台直接使用的Django Admin，但此次须要本身撸一个后台。

后台管理系统的线上版本我就不在这里放出了，由于2.0是全端开源的，因此直接去 后台管理系统GitHub便可，后续会放一个demo版本到线上。

浅谈一下全端主要的技术栈：

• 前端主要技术栈是react全家桶 + mobx;
• 管理后台用的是react全家桶 + mobx + Google reCAPTCHA + Ant Design;
• 后端则是Express + Mongo + JWT + Ali OSS + Google reCAPTCHA + request promise.

全端用到了Airbnb的eslint，此外还用到了像CSS Module、Webp、SVG Sprite等一些三方开源的插件。

Module

• 全局
  • Aplayer播放器
  • 全站置灰（用于哀悼日）
  • header
  • footer
• 主页
  • 可切换的整屏Cover图
  • Motto（格言）
  • Announcement（会发布一些新消息）
  • Project（显示最新开源的三个项目，连接指向GitHub）
  • 最新十篇文章Summay
• 博客页
  • 文章Summary（分页加载，每篇10页）
  • Tags
  • PV最高的7篇文章Summary
  • 按标题名检索
• 博客细节页
  • 标题
  • 发布时间（hover显示最后修改时间）
  • 所属Tags
  • 正文
  • Toc
  • 点赞
  • 分享到Twitter
  • 评论
  • 上一篇下一篇跳转
• 归档页
  • 显示全部文章的归档
• 音乐页
  • Live Tours（我的去看过的演唱会，在拍照容许时间拍的现场照片，以轮播形式呈现）
  • 最新四篇关于音乐方面的文章
  • 精选唱片（我的喜欢的唱片，购买地址不涉及商业）
  • Yancey Music（本人业余爱好是音乐，这里放一些我的的小做品）
• CV页面
  • 我的简介
  • 工做经历
  • 项目经历
• App页
  • 后期会上Wap、iOS、Androd、Mac版本，如今还没实施
• About页
  • 会放一些网站运行改版的大事记
• 隐私政策页
  • 没什么卵用，为了Blog的完整性

Detail

Global Component

全局无非就是标配的header、footer、滚动进度指示条、固然还有一个音乐播放器的组件。

此外，我还后端写了一个glonalConfig的接口，暂时只想到一个功能，就是控制前端的filter: grayscale(100%);属性，用在一些哀悼日时，后台会开启这个按钮。

Home Page

主页分为5个部分：

• Background
• Motto
• Announcement
• The Latest 3 Projects
• The Latest 10 Articles

Background

先说背景图，后台存有多张背景图，所以经过左右按钮能够切换背景图。而且当前那张背景图的id会存储到localStorage，所以只要不清掉localStorage，下次打开仍是当前那张背景图。

固然若是localStorage没有相关id或者这张图片被我在后台删除了，将会返回最新发布的图片。

其实后台我还设置了图片的显隐按钮，当某张图片的id在localStorage，但被我在后台隐藏了，一样将会返回最新发布的图片。

Motto

Motto部分对应上面第一张图这个部分。

死は生の対極としてではなく、その一部として存在している
复制代码

一样是请求后端接口，取得最新的那条Motto

ps: 上面那句话来自「ノルウェイの森」（《挪威的森林》）

Announcement

和Motto部分同理，用途是发布一些最新消息。

The Latest 3 Projects

这个是用来展现我最新的三个开源项目，url会链接到相应的GitHub.

The Latest 10 Articles

整个博客的核心部分之一，在首页会显示最新10篇文章的摘要模块，上面显示发布时间、title、PV量、点赞量、Tags、summary、show more，点击图片、标题或者show more均可以进入到文章细节页。

Blog Page

左边是最新的十篇summary, 而下面是后端分页的分页器；右边上面是文章的标签集合，下面是7篇最高PV的文章（设计你们都懂，知乎的设计）。

此外，其实在header的右上角还有一个搜索按钮，点进去是这个样子：

没错，可爱的初音ミク, 经过在搜索框输入，模糊匹配文章名。固然这里没有初版好，初版用了whoosh + jieba搜索引擎，效果理论上要比这版好一些。

Blog Detail Page

关于Blog Detail页面其实有不少地方，一张图放不下：

• 从上面来看是header cover、标题、发布时间（鼠标移入显示最后修改时间）、tags等；

• 正文部分的图片能够点击放大，造成一个手动轮播图的效果；

• code部分用了highlight.js

• 其中点击code的头部，也就是仿Mac按钮那个部分，代码块也会全屏放大

• 右边是toc

• 下面还有点赞、Twitter（这个地方恐怕要作SSR，由于Twitter Card必需要拿到实际的meta信息，若是是JS生成的，好比用了react-helmet，是不会被识别出来的）

• 而后就是用了LiveRe的评论插件。

• 最后还有人见人恨的复制文本附带版权信息：

  不知道你们看到一个小细节没，打开Chrome开发者工具，选择查看元素，将鼠标移动到html页面，发现浏览器自动给栅格标上了虚线，看下图。
  
    Article Name: Grid
    Article URL: https://blog.yanceyleo.com/p/5bc202a26b48dfee0a0dcedf
    License: Attribution-NonCommercial-ShareAlike 4.0 International (CC BY-NC-SA 4.0)
  复制代码

后期确实要把这个页面作成SSR，除了Twitter Card的问题，由于如今正文用的dangerouslySetInnerHTML，这一块也无法作懒加载。

Archive Page

这个部分显示归档，话说毕竟很久不写后端了，写聚合分组SQL那一块的时候确实花了些时间。

点击大一点儿的圆圈会显示/隐藏某个月的文章归档信息，默认展现最新一个月的归档信息，右边的按钮控制展现所有和关闭所有，其实原理就是用了checkbox.

Music Page

个人业余爱好是搞搞音乐，所以Blog也不会少了Music模块。

第一张图的左上角是我看过的Live的轮播图片，固然图片确定都是在拍照时间拍的；

右边是Music Notes，实际上就是articles?tag=Music,而后取最新的四篇，固然数据还没迁移过来，随便找了篇文章加上了Music的tag；

第二张图上面是一些我喜欢的唱片，关于购买地址，没有任何商业用途，通常连接来自日亚抑或cdjapan;

下面则是个人一些小做品了，连接指向SoundCloud（需fq）

Apps Page

如今还没去作，后期会计划写Wap版（1.0是用的响应式，此次想把Wap单独抽离出来）；用NR写iOS和Andriod；用Electron写个Mac版，毕竟用着Nav Bar的MBP, 仍是想在这个地方作点儿好玩的事情出来。

CV Page

这里就不放图了，简历分三部分，都是从后端取出来的：

• 基本信息
• 工做经历
• 项目经历

About

About页面也是从后端取出来的，用来记录Blog发展的大事记（估计就是Bug修改历程 噗x）。

Privacy Policy

有个网站能够生成隐私政策，虽然没什么卵用，但既然想作这个Blog，那就把它完善好。排版的话借鉴了Paypal隐私政策的样式。

最后

由于最近忙着找工做，文章迁移、英文文档撰写都会在忙过这段时间以后再去实施，若是有好的机会能够联系我哈～

以上、よろしく。