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.