阅读 5882

个人博客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

Cover
Home

主页分为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

Blog

左边是最新的十篇summary, 而下面是后端分页的分页器;右边上面是文章的标签集合,下面是7篇最高PV的文章(设计大家都懂,知乎的设计)。

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

Blog

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

Blog Detail Page

Blog Detail

关于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

Blog Detail

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

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

Music Page

我的业余爱好是搞搞音乐,因此Blog也不会少了Music模块。

Music-1

Music-2

第一张图的左上角是我看过的Live的轮播图片,当然图片肯定都是在拍照时间拍的;

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

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

下面则是我的一些小作品了,链接指向SoundCloud(需fq)

Apps Page

Apps

现在还没去做,后期会计划写Wap版(1.0是用的响应式,这次想把Wap单独抽离出来);用NR写iOS和Andriod;用Electron写个Mac版,毕竟用着Nav Bar的MBP, 还是想在这个地方做点儿好玩的事情出来。

CV Page

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

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

About

About

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

Privacy Policy

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

最后

因为最近忙着找工作,文章迁移、英文文档撰写都会在忙过这段时间之后再去实施,如果有好的机会可以联系我哈~

以上、よろしく。

关注下面的标签,发现更多相似文章
评论