Blog FE for PC

English | 中国語

Introduction

This is the second blog website I wrote, The first version was released in March 2018 which wrote by Django and Bootstrap. With the booming of SPA, I decided to write a react version and add some new features. After about two months of design and coding, the second version was released.

Mainwhile, I also wrote a CMS to manage and operate the data. You can click the link to fork.

Now, I am writing the mobile side pages, coming soon~

Technology Stack

• BLOG_FE_FOR_PC: react + react-router-4 + mobx + TypeScript;
• CMS: react + react-router-4 + mobx + Google reCAPTCHA + Ant Design;
• BE Express + Mongo + JWT + Ali OSS + Google reCAPTCHA

I alse used CSS Module、Webp、SVG Sprite and so on...

Page

Home Page

The home page contains five parts：

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

Background

The first time you visited my website, you will see the latest background, meanwhile, the id of this background will saved in localStorge. You can switch background by clicking the left arrow or right arrow. So, when open the website again, you will see the current background usless clear cache or I delete/hide the background in CMS.

Motto

My motto.

Announcement

I always publish new information in the component.

The Latest 3 Projects

Display the latest 3 open source projects of mine, click on any one to jump to the corresponding GitHub page

The Latest 10 Articles

Display the latest 10 articles summary, which is include release date, title, PV, likes, tag, summary and so on, click one to jump to the article detail page.

Blog Page

The left part is a pageable summary list; The right part includes two parts: tags list and top 7 most viewed

In addition, you can see a search button in the rightmost position of header component. Yep,a lovely Hatsune Miku will appear.

Blog Detail Page

• Collect people views counts.

• Display the article cover, title, publish date(show the lastest update date when you are moving in the text.)

• The right part is menu

• In the maim body

  • Click on the picture to zoom in
  • Click the header of code to zoom in
  • Like
  • Comment
  • Previous article and Next article
  • Share to Twitter

Archive Page

• Click on the circle to show the current month's articles.

• Click on the Fold to hide all articles.

• Click on the Unfold to show all articles.

Music Page

• The Lives image
• Music notes
• Featured reecords
• My works

Apps Page

Todos:

• Blog for Android
• Blog for iOS
• Blog for Mac

CV Page

• My basic information
• Work experience
• Program experience

About Page

Display the development history of the blog.

Change Logs

• 2018-10-14 First blood.
• 2018-12-30 Remove dependencies on jQuery and optimize performance.
• 2019-01-14 Refactor with TypeScript.
• 2019-04-03 Add skeleton for blog detail page.
• 2019-05-08 Use React.lazy() replace react-loadable.
• 2019-05-12 Add Canvas Bubble for Home Page.
• 2019-05-13 Support skeleton for blog summary component and try a new lazyload component.

TODO

• SSR
• Optimize performance
• Fragment page
• RSS

License

BLOG FE is MIT licensed.