https://github.com/Yancey-Blog/BLOG_DESKTOP
Yancey Official Blog for PC.
https://github.com/Yancey-Blog/BLOG_DESKTOP
blog mobx react
Last synced: 12 months ago
JSON representation
Yancey Official Blog for PC.
- Host: GitHub
- URL: https://github.com/Yancey-Blog/BLOG_DESKTOP
- Owner: Yancey-Blog
- License: mit
- Archived: true
- Created: 2018-09-10T11:33:16.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2021-04-28T05:41:45.000Z (about 5 years ago)
- Last Synced: 2024-11-27T06:36:51.258Z (over 1 year ago)
- Topics: blog, mobx, react
- Language: TypeScript
- Homepage: https://www.yanceyleo.com
- Size: 12.1 MB
- Stars: 79
- Watchers: 3
- Forks: 15
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# [Blog FE for PC](https://www.yanceyleo.com/)
[](https://app.codacy.com/app/YanceyOfficial/BLOG_FE?utm_source=github.com&utm_medium=referral&utm_content=Yancey-Blog/BLOG_FE&utm_campaign=Badge_Grade_Dashboard)
[](https://opensource.org/licenses/MIT)
[](https://github.com/Yancey-Blog/BLOG_FE)
[](https://github.com/Yancey-Blog/BLOG_FE)
[](https://github.com/Yancey-Blog/BLOG_FE/pulls)
[](https://travis-ci.org/Yancey-Blog/BLOG_FE)
English | [中国語](https://github.com/Yancey-Blog/BLOG_FE/blob/master/README_ZH.md)
## 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](https://github.com/Yancey-Blog/BLOG_CMS/) to manage and operate the data. You can click the link to fork.
Now, I am writing the [mobile side pages](https://github.com/Yancey-Blog/BLOG_WAP/), 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](https://opensource.org/licenses/MIT).