我的博客2.0 FE

時間 2019-11-15

標籤我的博客 2.0 简体版

原文原文鏈接

Introduction

線上博客連接html

前端GitHub前端

這是我寫的第二個博客網站。初版是在今年(2018年)3月份完成的，用的Bootstrap + Django. 待第二版數據遷移完畢後，初版會開源。 至於爲何寫第二版，是由於還有不少本身想表達的東西沒有在初版呈現。react

2.0版本是一個基於React + Node的先後端分離的項目，由於初版用的Django，因此後臺直接使用的Django Admin，但此次須要本身擼一個後臺。git

後臺管理系統的線上版本我就不在這裏放出了，由於2.0是全端開源的，因此直接去後臺管理系統GitHub便可，後續會放一個demo版本到線上。github

淺談一下全端主要的技術棧：後端

前端主要技術棧是react全家桶 + mobx;
管理後臺用的是react全家桶 + mobx + Google reCAPTCHA + Ant Design;
後端則是Express + Mongo + JWT + Ali OSS + Google reCAPTCHA + request promise.

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

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，這一塊也無法作懶加載。